-
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> /* 去除所有标签默认的编剧 */ *{ margin: 0; padding: 0; } #box{ /* background-color: palegoldenrod; */ border: solid 1px white; } #box > h3{ margin: 10px 0; } #box .item{ /* 浮动布局 */ float: left; width: 290px; /* background-color: purple; */ margin-left: 10px; } #box .clear_float{ /* background-color: palevioletred; height: 50px; */ /* 清除浮动 */ clear: both; } .item_list{ /* 有一个具体的宽度 再去auto 浏览器才会根据自身的宽度 与该元素的宽度 进行自适应距离的*/ width: 1200px; margin: 0 auto; /* background-color: plum; */ } /* item中的布局 */ .item img{ /* 跟父标签等宽 */ width: 100%; } .item h4{ margin: 10px 0; font-size: 20px; } .item .detail{ margin-bottom: 10px; color: rosybrown; font-size: 17px; } .item .click_num{ color: blue; font-size: 12px; } </style> </head> <body> <div id="box"> <h3>热播</h3> <div class="item_list"> <div class="item"> <img src="../img/img1.png" /> <h4>太阳的后裔</h4> <p class="detail">宋仲基欧巴</p> <p class="click_num">点击次数:23456567次</p> </div> <div class="item"> <img src="../img/img2.png" /> <h4>太阳的后裔</h4> <p class="detail">宋仲基欧巴</p> <p class="click_num">点击次数:23456567次</p> </div> <div class="item"> <img src="../img/img3.png" /> <h4>太阳的后裔</h4> <p class="detail">宋仲基欧巴</p> <p class="click_num">点击次数:23456567次</p> </div> <div class="item"> <img src="../img/img4.png" /> <h4>太阳的后裔</h4> <p class="detail">宋仲基欧巴</p> <p class="click_num">点击次数:23456567次</p> </div> <div class="clear_float"></div> </div> </div> </body> </html>
HTML——浮动布局案例
最新推荐文章于 2022-08-01 10:56:25 发布