CSS基础

最新推荐文章于 2023-08-18 20:40:23 发布

weixin_34075268

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量44

点赞数

原文链接：http://www.cnblogs.com/baird/p/9542444.html

版权

HTML文件

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="style.css"/>   <!-- 连接css文件 -->
 7     <!-- 内联style方法-->
 8     <style>
 9         /*!*id选择器*!*/
10         /*#i1{*/
11             /*background-color: #ff6c4a;*/
12             /*height: 50px;*/
13         /*}*/
14     </style>
15 </head>
16 <body>
17     <div>
18         <div id="i1">i1</div>
19         <div id="i2">i2</div>
20         <div id="i3">i3</div>
21         <div id="i4">i4</div>
22     </div>
23     <div class="c1">c1</div>
24     <div class="c1 c2">多样式</div>
25 
26     <div>
27         <input type="text" name="user" value="Baird">
28         <input class="in1" type="password" cust="test">
29     </div>
30 
31     <span>标签选择器</span>
32     <div><span>关联选择器</span></div>
33 
34     <div style="width:300px;height:300px;position: relative;border: 2px solid black">
35         <div style="position: absolute;border: 2px solid blue;right:5px;top:5px;">
36             absolute 相对父级div的位置
37             positon设置为 absolute 后可以使用 left、top、right、bottom属性
38         </div>
39         <div style="border: 2px solid red;margin-left: 20px; width:110px;margin-top: 90px">
40             absolute2
41         </div>
42     </div>
43 
44     <div style="z-index:8;position: fixed;
45         background-color: #dddddd;left: 0;
46         top: 0;right: 0;bottom: 0;
47         opacity: 0.4;">遮罩层</div>
48 
49     <div style="z-index:9;
50         position: fixed;
51         background-color: lightgreen;
52         width: 400px;height:500px;
53         left: 50%;top: 50%;
54         margin-left: -200px;margin-top: -250px;">z-index:权重</div>
55 
56     <div style="border: 2px solid black;width: 300px;height: 300px;overflow: auto" >overflow
57         <img src="http://img.zcool.cn/community/012cb757939a8e0000018c1b7482be.jpg@1280w_1l_2o_100sh.png">
58     </div>
59 
60     <div class="creturn">返回顶部</div>
61 </body>
62 </html>

CSS文件

 1 body{
 2     margin:0 auto;
 3 }
 4 /*id选择器*/
 5 #i1{
 6     background-color: lightblue;
 7     height: 300px;
 8     width: 45%;
 9     border-top: 2px solid black;
10     border-bottom: 2px dotted black;
11     text-align: center;   /*文本左右居中*/
12     line-height: 300px;  /*文本上下居中*/
13     font-weight: bold;
14     /*float: left;*/
15 }
16 
17 /*组合选择器 i2&i3&i4*/
18 #i2,#i3,#i4{
19     background-color: #ff6c4a;
20     height: 150px;
21     width: 150px;
22     margin-top: 10px;
23     margin-left: 10px;
24     display: inline-block;  /*可水平放置的前提下，可设置size*/
25 }
26 
27 /*类选择器*/
28 .c1{
29     background-color:#ed5c4a;
30     height: 35px;
31     border-top: 2px solid black;
32     border-bottom: 2px double black;
33     margin-top: 10px;
34     margin-bottom: 10px;
35 }
36 
37 .c2{
38     font-size: 27px;
39     display: inline;   /*使用此属性时，长宽设置、margin等失效*/
40 }
41 
42 /*属性选择器*/
43 input[type="text"]{
44     background-color: #fe6c4a;
45     height: 50px;
46 }
47 .in1[cust="test"]{
48     background-color: #fe6c4a;
49     height: 50px;
50 }
51 
52 /*标签选择器*/
53 span{
54     background-color: #feefef;
55     height: 50px;
56 }
57 
58 /*关联选择器  span下的div*/
59 div span{
60     background-color:#ed5c4a;
61     height: 20px;
62 }
63 
64 .creturn{
65     background-color: lightcyan;
66     position: fixed;   /*固定位置*/
67     right: 20px;
68     bottom: 20px;
69 }