问题描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><link href="test.css" rel="stylesheet" type="text/css" /> </head> <body><div class="contariner" > <div class="bor_1" ><div class="bor_1_left"></div><div class="bor_1_center"></div><div class="bor_1_right"> <ul><li><a href="#">登陆</a></li><li> </li><li><a href="#" >注册</a></li><li> </li> </ul></div></div> <div class="top_1"><div class="top_1_left"><ul><li class="STYLE1"><a href="#" >首页</a></li><li class="STYLE1"><a href="#">相册</a></li><li class="STYLE1"><a href="#">日志</a></li><li class="STYLE1"><a href="#">个人信息</a></li><li class="STYLE1"><a href="#">iteye</a></li></ul></div> <div id="top_right"> <ul><li class="STYLE1"><a href="#" >个人中心</a></li><li class="STYLE1"><a href="#">百度知道</a></li></ul></div> </div> </body></html> .contariner {height: 800px;width: 1340px;}.STYLE1 {font-size: 16px;font-weight: bold;} .contariner .bor_1 {background-color:#FFFFFF;height: 60px;width: 1240px;border: thin dashed #CCCCCC;font-style: normal;float:right; }.contariner .bor_1_left{background-color:#999;height:58px;width:800px;float:left; } .contariner .bor_1_center{background:#330033; height:58px;width:150px;float:left;} .contariner .bor_1_right{background-color:#00FF00;height:58px;width:288px;float:right;} .contariner .bor_1 .bor_1_right li {background-position: top;float: right;list-style-type: none;margin: 0px;padding: 1px;} .contariner .top_1 #top_right {background-color: #00CC00;margin-left:900px;height: 30px;width: 220px;margin-top:-48px;} .contariner .top_1 #top_right ul li {background-color: #00CC00;list-style-type: none;line-height: 30px;width:110px;float: right;text-align: center;margin-bottom: 1p} .contariner .top_1 {margin-top:65px;background-color: #00FF00;height: 30px;width: 1340px;border: 1px dashed #FFFFFF;list-style-type: none; } .contariner .top_1 .top_1_left {background-color: #00CC00;height: 30px;width: 600px;margin-left:100px;margin-top:-15px; } .contariner .top_1 .top_1_left ul li{background-color: #00CC00;list-style-type: none;line-height: 30px;width:110px;float: left;text-align: center;margin-bottom: 1px;} .contariner .top_1 .top_1_left ul li a{ font-size: 22px;color: #000;text-decoration: none;display:block; } .contariner .top_1 .top_1_left ul li a:hover{background-color:#006699; }
解决方案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="test.css" rel="stylesheet" type="text/css" /></head><body><div class="contariner"><!-- --><div class="bor_1"><div class="bor_1_left"></div><div class="bor_1_center"></div><div class="bor_1_right"><ul><li><a href="#">登陆</a></li><li> </li><li><a href="#">注册</a></li><li> </li></ul></div></div><!-- --><div class="top_1"><div class="top_1_left"><ul><li class="STYLE1"><a href="#">首页</a></li><li class="STYLE1"><a href="#">相册</a></li><li class="STYLE1"><a href="#">日志</a></li><li class="STYLE1"><a href="#">个人信息</a></li><li class="STYLE1"><a href="#">iteye</a></li></ul></div><div id="top_right"><ul><li class="STYLE1"><a href="#">个人中心</a></li><li class="STYLE1"><a href="#">百度知道</a></li></ul></div></div></div></body></html><style>.contariner {height: 800px;width: 100%;}.STYLE1 {font-size: 16px;font-weight: bold;}.contariner .bor_1 {background-color: #FFFFFF;height: 60px;width: 100%;border: thin dashed #CCCCCC;font-style: normal;float: left;}.contariner .bor_1_left {background-color: #999;height: 58px;width: 800px;float: left;}.contariner .bor_1_center {background: #330033;height: 58px;width: 150px;float: left;}.contariner .bor_1_right {background-color: #00FF00;height: 58px;width: 288px;float: right;}.contariner .bor_1 .bor_1_right li {background-position: top;float: right;list-style-type: none;margin: 0px;padding: 1px;}.contariner .top_1 #top_right {background-color: #00CC00;margin-left: 900px;height: 30px;width: 220px;margin-top: -48px;}.contariner .top_1 #top_right ul li {background-color: #00CC00;list-style-type: none;line-height: 30px;width: 110px;float: right;text-align: center;margin-bottom: 1p}.contariner .top_1 {background-color: #00FF00;height: 30px;width: 100%;float: left;border: 1px dashed #FFFFFF;list-style-type: none;}.contariner .top_1 .top_1_left {background-color: #00CC00;height: 30px;width: 600px;margin-left: 100px;margin-top: -15px;}.contariner .top_1 .top_1_left ul li {background-color: #00CC00;list-style-type: none;line-height: 30px;width: 110px;float: left;text-align: center;margin-bottom: 1px;}.contariner .top_1 .top_1_left ul li a {font-size: 22px;color: #000;text-decoration: none;display: block;}.contariner .top_1 .top_1_left ul li a:hover {background-color: #006699;}</style>
解决方案二：
html+css 尽量用dreamweaver来画吧 谁用谁知道