当前位置：首页 > news >正文

html+css-----补

news 来源：原创 2024/5/3 20:57:02

其实html没什么好补充的了，主要是使用css如何构造出各种想要的效果

1.加减框

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .inp{
 8             border: 0;
 9             border-left: 1px solid #dddddd;
10             border-right: 1px solid #dddddd;
11             height: 25px;
12             margin: 0;
13             padding: 0;
14             float: left;
15         }
16         .sp{
17             display: inline-block;
18             height: 25px;
19             width: 25px;
20             line-height: 25px;
21             text-align: center;
22             float: left;
23         }
24     </style>
25 </head>
26 <body>
27     <div style="border: 1px solid #dddddd;display: inline-block">
28         <div class="sp">-</div>
29         <input type="text" class="inp" />
30         <div class="sp">+</div>
31     </div>
32 </body>
33 </html>

2.小尖角

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             display: inline-block;
 9             border-right: solid 15px red;
10             border-left: solid 15px transparent;
11             border-top: solid 15px yellow;
12             border-bottom: solid 15px black;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="c1"></div>
18 </body>
19 </html>

3.伪类与常用后端模版样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*伪类清除漂浮*/
 8         .clearfix:after{
 9             content: '.';
10             clear: both;
11             display: block;
12             visibility: hidden;
13             height: 0;
14         }
15         body{
16             margin: 0;
17         }
18         .pg-header{
19             height: 50px;
20             background-color: aqua;
21         }
22         .pg-body .body-menu{
23             position: absolute;
24             top: 50px;
25             width: 200px;
26             left: 0;
27             bottom: 0;
28             background-color: red;
29         }
30         .pg-body .body-content{
31             position: absolute;
32             top: 50px;
33             left: 210px;;
34             right: 0;
35             bottom: 0;
36             background-color: yellow;
37             overflow: auto;
38         }
39     </style>
40 </head>
41 <body>
42     <div class="pg-header"></div>
43     <div class="pg-body">
44         <div class="body-menu">
45 
46         </div>
47         <div class="body-content">
48             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
49             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
50             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
51             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
52             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
53             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
54             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
55             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
56             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
57             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
58             aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>aaaaaaaaa<br/>
59         </div>
60     </div>
61     <div class="pg-footer"></div>
62 </body>
63 </html>