实现了头,产品列表,模向链接,纵向链接,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>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。