标签：组合 href 属性选择器 htm index word play type spl
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 }
标签：组合 href 属性选择器 htm index word play type spl
原文地址：https://www.cnblogs.com/baird/p/9542444.html
