DIV+CSS 制作自适应混合布局

2024-11-11 技术教程

实现了头，产品列表，模向链接，纵向链接，DIV嵌套，直接上代码。。

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>DIV标签制作自适应混合布局</title><style>body {margin:0 auto;padding:0;}#top_logo{ margin:0 auto: width:100%; min-width:960px; line-height:50px; height:50px; text-align:center; background:lightblue;}#header{ width:100%; height:30px; min-width:960px; margin:0 auto; padding:0; margin-bottom:10px; background:purple;}#header1{ width:960px; margin:0 auto; padding:0;}#header ul{ list-style:none; background:purple; overflow:hidden; /* 特别重要，不加overflow，ul跑偏*/ margin:0 auto; text-align:center;}#header li { float:left; /*控制横向*/}#header li a{ display:block; color:white; width:104px; height:30px; line-height:30px; text-decoration:none; text-align:center; border-radius:5px;}#header li a:hover{ background:red; color:white;}.main{ width:100%; min-width:960px; margin:0 auto;}.main-left{ float:left; margin-left:0; width:35%; height:850px; background:yellow;}.left-menu{ margin:20px auto;}.left-menu ul{ list-style:none; padding:0;}.left-menu ul a{ display:block; padding:5px 0; /*padding要谨慎使用，父元素纵横有很大余量的时候可以用*/ margin: 5px auto; width:100%; color:black; text-align:center; text-decoration:none}.left-menu ul a:hover{ background:orange; }.main-right{ float:right; margin-left:0; width:65%; height:850px; background:green;}.product-list{ width:560px; margin:20px auto; /*上下留出20px，左右居中*/}.product{ margin-top:20px; margin-left:25px; width:240px; height:350px; background:white; float:left;}.product-page{ margin:0 auto; margin-top:800px; /*DIV嵌套，使用margin定义位置，否则会堆在一起*/ width:600px; height:30px; background:lightblue; text-align:center}</style></head><body><div id='top_logo'> This is banner picture ╕╖╗╘╙╚ ╛╜╝╞╟╠ ╡╢╣╤ ╥</div><div id='header'> <div id='header1'> <ul> <li><a href="#">新闻</a></li> <li><a href="#">热点</a></li> <li><a href="#">动态</a></li> <li><a href="#">直播</a></li> <li><a href="#">地图</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> <li><a href="#">关于我们</a></li> </ul> </div></div> <div class='main'> <div class='main-left'> <div class='left-menu'> <ul> <li><a href="#">新闻</a></li> <li><a href="#">热点</a></li> <li><a href="#">动态</a></li> <li><a href="#">直播</a></li> <li><a href="#">地图</a></li> <li><a href="#">服务</a></li> <li><a href="#">社区</a></li> <li><a href="#">关于我们</a></li> </ul> </div> </div> <div class='main-right'> <div class='product-list'>  <div class='product'> 1111111111 </div> <div class='product'> 2222222222 </div> <div class='product'> 3333333333 </div> </div> <div class='product-page'> pages:1、2、3、4、5、6、7、8 </div> </div> </div> </body></html>