一，如何给一个元素添加多个背景图
background ： url（第一个背景图） ，url（第二个背景图），url（第三个背景图）
多张背景图的时候，先写的优先级较高
二，position定位
格式 ： position ： relative ； left ：0； bottom ：0 ；
浮动 ： 解决左右排列的问题（主要去做的）
定位 ： 解决叠加排列的问题（主要去做的）
position取值 ：
1，static（默认）
2，relative（相对定位）
如果没有定位偏移量，对元素本生没有任何影响。
不使元素脱离文档流，空间是会被保留。
不影响其他元素布局
left，right，top，bottom是相对与当前元素自身进行偏移的
3，absolute（绝对定位）
使元素完全脱离文档流
使内联元素支持宽高（使内联元素具备块元素特性）
使块元素默认宽根据内容决定（让块具备内联特性）
如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。
4，fixed（绝对定位）
使元素完全脱离文档流
使内联元素支持宽高（让内联具备快特性）
使块元素默认宽根据内容决定（让块具备内联的特性）
相对与整个浏览器窗口进行偏移，不受浏览器滚动条的影响
不会受到祖先元素的影响
5，sticky：粘性定位
在没有到达指定位置时没有固定效果，到达了指定位置就变为固定模式
注 : 定位偏移量 ： left right bottom top，不能单独使用，必须得配合定位模式
6，z-index定位层级
默认层级为0
嵌套时候的层级问题 ： 比较的时候，会先跟同级别的去比较。（同级别必须有定位模式与z-index）
固定定位练习
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 *{margin: 0;padding: 0;} 9 a{text-decoration: none;} 10 ul{list-style: none;} 11 img{display: block;} 12 .clear:after{content: "";display: block;clear: both;} 13 .l{float: left;} 14 .r{float: right;} 15 #main{ 16 border: 1px black solid; 17 width: 320px;height: 320px; 18 margin: 100px auto; 19 position: relative; 20 } 21 .main{ 22 width: 100px;height: 100px;background: red; 23 } 24 #box1{position: absolute; left: 10px;top:10px; color: white; line-height: 100px;text-align: center;} 25 #box2{position: absolute; right: 10px;top:10px;color: white; line-height: 100px;text-align: center;} 26 #box3{position: absolute;left: 110px; top: 110px;color: yellow; line-height: 100px;text-align: center;background: blue;} 27 #box4{position: absolute;left: 10px;bottom: 10px;color: white; line-height: 100px;text-align: center;} 28 #box5{position: absolute;right: 10px;bottom: 10px;color: white; line-height: 100px;text-align: center;} 29 </style> 30 </head> 31 <body> 32 <div id="main"> 33 <div id="box1" class="main ">链接</div> 34 <div id="box2" class="main ">链接</div> 35 <div id="box3" class="main ">链接</div> 36 <div id="box4" class="main ">链接</div> 37 <div id="box5" class="main ">链接</div> 38 </div> 39 40 </body> 41 </html>
相对定位练习
1 img { 2 display: block; 3 } 4 5 .clear:after { 6 content: ""; 7 display: block; 8 clear: both; 9 } 10 11 .l { 12 float: left; 13 } 14 15 .r { 16 float: right; 17 } 18 #box1{ 100px;height: 100px;background: blue;border: 1px black solid;} 19 #box2{ 100px;height: 100px;background: blue;position: relative;left: 50px;bottom: 50px;border: 1px black solid;} 20 #box3{ 100px;height: 100px;background: yellow;position: relative;left: 100px;bottom: 100px;border: 1px black solid;} 21 #box4{ 100px;height: 100px;background: blue;position: relative;left: 150px;bottom: 150px;border: 1px black solid;} 22 #box5{ 100px;height: 100px;background: blue;position: relative;left: 200px;bottom: 200px;border: 1px black solid;} 23 </style> 24 <body> 25 <div id="box1"></div> 26 <div id="box2"></div> 27 <div id="box3"></div> 28 <div id="box4"></div> 29 <div id="box5"></div> 30 </body> 31 </html>
浮动与定位练习
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 *{margin: 0;padding: 0;} 9 a{text-decoration: none;} 10 ul{list-style: none;} 11 img{display: block;} 12 h2{font-size: 26px; color: #909090;line-height: 56px;padding-left: 30px;} 13 .clear:after{content: "";display: block;clear: both;} 14 .l{float: left;} 15 .r{float: right;} 16 main{margin: 100px auto;} 17 img1{padding-left: 30px;} 18 .content1{margin-right: 20px; 19 background: url(./img/2.png) repeat-x ; 20 position: relative; 21 } 22 .content1 img{ 23 padding-top: 5px; 24 25 } 26 .content1 p{ 27 font-size: 12px; 28 line-height: 24px; 29 position: relative ;bottom: 24px; 30 } 31 .new{ 32 position: absolute;bottom: 150px; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="main" > 38 <h2>黄金档</h2> 39 <div id="img1" class="clear"> 40 <div class="content1 l"> 41 <img src="./img/1.jpg" alt=""> 42 <img src="./img/3.png" alt="" class="new"> 43 <p>更新至九集</p> 44 <p>香蜜沉沉烬如霜</p> 45 <p>杨紫登陆上演千年之恋</p> 46 </div> 47 <div class="content1 l"> 48 <img src="./img/1.jpg" alt=""> 49 <p>更新至九集</p> 50 <p>香蜜沉沉烬如霜</p> 51 <p>杨紫登陆上演千年之恋</p> 52 </div> 53 <div class="content1 l"> 54 <img src="./img/1.jpg" alt=""> 55 <p>更新至九集</p> 56 <p>香蜜沉沉烬如霜</p> 57 <p>杨紫登陆上演千年之恋</p> 58 </div> 59 <div class="content1 l"> 60 <img src="./img/1.jpg" alt=""> 61 <p>更新至九集</p> 62 <p>香蜜沉沉烬如霜</p> 63 <p>杨紫登陆上演千年之恋</p> 64 </div> 65 </div> 66 <div id="img2" class="clear"> 67 <div class="content1 l"> 68 <img src="./img/1.jpg" alt=""> 69 <p>更新至九集</p> 70 <p>香蜜沉沉烬如霜</p> 71 <p>杨紫登陆上演千年之恋</p> 72 </div> 73 <div class="content1 l"> 74 <img src="./img/1.jpg" alt=""> 75 <p>更新至九集</p> 76 <p>香蜜沉沉烬如霜</p> 77 <p>杨紫登陆上演千年之恋</p> 78 </div> 79 <div class="content1 l"> 80 <img src="./img/1.jpg" alt=""> 81 <p>更新至九集</p> 82 <p>香蜜沉沉烬如霜</p> 83 <p>杨紫登陆上演千年之恋</p> 84 </div> 85 <div class="content1 l"> 86 <img src="./img/1.jpg" alt=""> 87 <p>更新至九集</p> 88 <p>香蜜沉沉烬如霜</p> 89 <p>杨紫登陆上演千年之恋</p> 90 </div> 91 </div> 92 <div id="img3" class="clear"> 93 <div class="content1 l"> 94 <img src="./img/1.jpg" alt=""> 95 <p>更新至九集</p> 96 <p>香蜜沉沉烬如霜</p> 97 <p>杨紫登陆上演千年之恋</p> 98 </div> 99 <div class="content1 l"> 100 <img src="./img/1.jpg" alt=""> 101 <p>更新至九集</p> 102 <p>香蜜沉沉烬如霜</p> 103 <p>杨紫登陆上演千年之恋</p> 104 </div> 105 <div class="content1 l"> 106 <img src="./img/1.jpg" alt=""> 107 <p>更新至九集</p> 108 <p>香蜜沉沉烬如霜</p> 109 <p>杨紫登陆上演千年之恋</p> 110 </div> 111 <div class="content1 l"> 112 <img src="./img/1.jpg" alt=""> 113 <p>更新至九集</p> 114 <p>香蜜沉沉烬如霜</p> 115 <p>杨紫登陆上演千年之恋</p> 116 </div> 117 </div> 118 </div> 119 </body> 120 </html>