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 ????????????absolute241 ????????</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" >overflow57 ????????<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 }CSS基础
原文地址：https://www.cnblogs.com/baird/p/9542444.html