DIV+CSS布局
宽度自适应两列布局
<!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>宽度自适应两列布局</title> <style> *{margin:0;padding:0;} #herder{ height:41px; background:blue; } .main-left{ width:10%; height:800px; background:red; float:left; } .main-right{ width:90%; height:800px; background:pink; float:right; } #footer{ clear:both; height:50px; background:gray; } ul{ list-style-type:none; background-color:#333; overflow:hidden; } li{ float:left; } li a, .dropbtn{ display:inline-block; color:white; text-align:center; padding:10px 8px; text-decoration:none; font-family:华文新魏; font-size:18px; } li a:hover, .dropdown:hover .dropbtn{ background-color:#111; } .dropdown{ display:inline-block; } .dropdown-content{ min-width:140px; background-color:#FFE4C4; position:absolute; display:none; box-shadow:0px 4px 6px 0px rgba(0,0,0,0.2); font-family:华文新魏; } .dropdown-content a{ color:black; padding:4px 16px; text-decoration:none; display:block; } .dropdown-content a:hover{ background-color:#F1F1F1; } .dropdown:hover .dropdown-content{ display: block; } </style> </head> <body> <div id="herder"> <div class="dropdown"> <a href="#" class="dropbtn">网址大全</a> <div class="dropdown-content"> <a href="http://www.baidu.com">百度首页</a> <a href="http://www.qq.com">腾讯QQ</a> <a href="http://www.msn.com.cn">MSN</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">业务管理</a> <div class="dropdown-content"> <a href="http://www.baidu.com">百度首页</a> <a href="http://www.qq.com">腾讯QQ</a> <a href="http://www.msn.com.cn">MSN</a> </div> </div> <div class="dropdown"> <a href="#" class="dropbtn">信息中心</a> <div class="dropdown-content"> <a href="http://www.baidu.com">百度首页</a> <a href="http://www.qq.com">腾讯QQ</a> <a href="http://www.msn.com.cn">MSN</a> </div> </div> </div> <div class="main-left">左列</div> <div class="main-right">右列</div> <div id="footer111">页脚</div> </body> </html>
左列
右列