浮动和定位
浮动
可以让多个块标签处于同一行 不用转换成行内元素 宽和高以及盒子模型的特征的以保留
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .outerDiv{ border: 1px solid blue; width: 1000px; height: 500px; margin: 0px auto; } #d1,#d2,#d3{ border: 1px solid red; width: 400px; height: 200px; /*向右 浮动*/ /*float: right;*/ /*向左 浮动*/ float: left; margin-left:20px; margin-bottom: 20px; } #d1{
} #d2{ background-color:aqua; } #d3{ background-color: blueviolet; } </style> </head> <body> <div class="outerDiv"> <div id="d1"> <h1>1</h1> </div> <div id="d2"> <h1>2</h1> </div> <div id="d3"> <h1>3</h1> </div> </div> </body> </html> |
浮动案例
|
<head> <meta charset="utf-8"> <title></title> <style> .ad_item a img{ width: 590px; height: 160px; } .ad_item{ width: 590px; height: 160px; float: left; } #ad2,#ad4{ margin-left: 10px; } #ad3,#ad4{ margin-top: 20px; } #ad{ width: 1190px; height: 340px; margin: 0px auto; } </style> </head> <body> <div id="ad"> <div id="ad1" class="ad_item"> <a href="https://cx.12306.cn/tlcx/index.html" target="_blank"> <img src="https://www.12306.cn/index/images/abanner01.jpg" /> </a> </div> <div id="ad2" class="ad_item"> <a href="https://cx.12306.cn/tlcx/index.html" target="_blank"> <img src="https://www.12306.cn/index/images/abanner02.jpg" /> </a> </div> <div id="ad3" class="ad_item"> <a href="https://cx.12306.cn/tlcx/index.html" target="_blank"> <img src="https://www.12306.cn/index/images/abanner03.jpg" /> </a> </div> <div id="ad4" class="ad_item"> <a href="https://cx.12306.cn/tlcx/index.html" target="_blank"> <img src="https://www.12306.cn/index/images/abanner04.jpg" /> </a> </div> </div>
</body> |
定位
绝对定位
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .div1{ height: 200px; width: 200px;
/*绝对定位 基于父级标签原点 移开以后会自动释放父级标签原点位置*/ position: absolute; top: 100px; left: 100px; } .div2{ height: 200px; width: 200px; background-color: burlywood; position: absolute; top: 400px; left: 400px; } </style> </head> <body> <div class="div1">1</div> <div class="div2">2</div> </body> </html> |
相对定位
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .div1{ height: 200px; width: 200px;
/*相对定位 相对于自身原来的位置,移开之后,不会释放原点位置*/ position: relative; top: 100px; left: 100px; } .div2{ height: 200px; width: 200px; background-color: burlywood; position: relative; top: 100px; left: 100px; } </style> </head> <body> <div class="div1">1</div> <div class="div2">2</div> </body> </html> |
相对浏览器窗口定位
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .div1{ height: 200px; width: 200px;
position: absolute; top: 0px; left: 0px; } .div2{ height: 200px; width: 200px; background-color: burlywood; /*相对浏览器窗口定位*/ position: fixed; top: 100px; left: 100px; } </style> </head> <body> <div class="div1">1</div> <div class="div2">2</div> </body> </html> |
定位案例
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .note{ /*border: 1px solid red;*/ width: 50px; height: 395px; position: fixed; right: 0px; top: 150px; } .note_item1{ height: 86px; width: 50px; margin-bottom:5px; } .note_item2{ height: 122px; width: 50px; } </style> </head> <body> <div class="note"> <div class="note_item1"> <img src="img/note1.png" /> </div> <div class="note_item1"> <img src="img/note2.png" /> </div> <div class="note_item1"> <img src="img/note3.png" /> </div> <div class="note_item2"> <img src="img/note4.png" /> </div> </div> br*100 </body> </html> |
第三节:列表标签及案例开发
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } .outerintroduce{ width: 1190px; height: 300px; margin: 0px auto; } .introduce{ border: 1px solid #3B99FC; width: 388px; height: 298px; float: left; } .introduce h3{
height: 40px; text-align: center; line-height: 40px;
color: white; } .introduce ul{
list-style: none; margin-left: 50px; list-style-image: url(img/dot.png); } .introduce ul li { line-height: 45px; } .introduce ul a{ text-decoration: none; color: darkslategray; } .introduce ul a:hover{
color: black; } #i1,#i2{ margin-right: 10px; } </style> </head> <body> <div class="outerintroduce"> <div id ="i1" class="introduce"> <!--标题--> <h3>最新发布</h3> <!--列表--> <ul> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> </ul> </div> <div id ="i2" class="introduce"> <!--标题--> <h3>最新发布</h3> <!--列表--> <ul> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> </ul> </div> <div class="introduce"> <!--标题--> <h3>最新发布</h3> <!--列表--> <ul> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a> <a href="#"><li>燃了！宣传片《新时代的中国高铁》震撼亮相</li></a>
</div> </div> </body> </html> |
