各位大神帮忙看一下 为什么编的网页代码老是出错 排版不对

这是网页代码“<divid="top_nav"><divid="nav_log"><divid="log"><ulclass="nav_ul"><liclass="nav... 这是网页代码“
<div id="top_nav">
<div id="nav_log">
<div id="log">

<ul class="nav_ul" >
<li class="nav_ul li"> <a href="" class="nav_ul li a " >首页</a> </li>
<li class="nav_ul li"><a href="" class="nav_ul li a ">商家联盟</a> </li>
<li class="nav_ul li"> <a href="" class="nav_ul li a ">使用说明</a></li>
</ul>

</div>
</div>
</div>


相应的css代码是“
@charset "gb2312";
#top_nav {
background: url("../images/topbg.png") repeat-x scroll 0 0 transparent;
height: 45px;
width: 100%;
}

#nav_log {
float: left;
padding-left: 60px;
}
#log {
background: url("../images/logo.jpg") no-repeat scroll 0 0 transparent;
color: #FFFFFF;
font-size: 14px;
height: 43px;
line-height: 43px;
margin-top: 1px;
padding-left: 70px;
width: 150px;
}

#top_nav .nav_ul {
float: left;
height: 45px;
margin: 0;
padding: 0 0 0 20px;
}

#top_nav .nav_ul li {
float: left;
margin-left: 15px;
margin-right: 15px;
}

#top_nav .nav_ul li a {
color: #FFFFFF;
display: block;
font-size: 12px;
height: 43px;
line-height: 45px;
text-decoration: none;
}
#s_div {
float: left;
height: 30px;
padding-left: 30px;
padding-top: 8px;
width: 350px;
}

.s_span {
background: url("../images/searchtextbox.png") repeat scroll 0 0 transparent;
display: block;
float: left;
height: 30px;
width: 237px;
}
.s_text {
border: 0 none;
margin: 2px 5px 0 10px;
outline: medium none;
padding-bottom: 6px;
padding-top: 6px;
width: 210px;
background:none;
}

.s_btn {
background: url("../images/searchbtm.png") repeat scroll 0 0 transparent;
border: 0 none;
cursor: pointer;
height: 30px;
margin-left: -10px;
width: 40px;
}
#u_div {
float: right;
line-height: 45px;
margin-right: 60px;
}
#u_div {
float: right;
line-height: 45px;
margin-right: 60px;
}

#u_div .u_ul li.line {
background: url("../images/topdividedline.png") no-repeat scroll 0 0 transparent;
height: 45px;
width: 2px;
}
#u_div .u_ul li.u_item {
padding-left: 15px;
padding-right: 15px;
}
#u_div .u_ul li {
color: #FFFFFF;
cursor: pointer;
float: right;
margin: 0;
}
#top_nav .nav_ul li a:hover {
border-bottom: 2px solid #F0652A;
}
#top_nav .nav_ul li a.curent {
border-bottom: 2px solid #F0652A;
}

.flash {
height: 345px;
width: auto;
}


这是我想要呈现的效果,但是怎么出来的是这样的

求大神解决~
展开
 我来答
军海孤舟
2013-09-17 · TA获得超过278个赞
知道小有建树答主
回答量:168
采纳率:100%
帮助的人:64.5万
展开全部
应该是样式名写的不对,html里class名字的格式含义和css里的相同格式含义是不一样的。
比如 class="nav_ul li"在html里的含义是同时执行nav_ul和li两个样式,而在css里nav_ul li的意思是nav_ul里面的li的样式。
追问
  • 那要如何修改html里的class样式名?

追答
ul里面li和a的class都可以删掉不要的。css里#top_nav .nav_ul li 和#top_nav .nav_ul li a已经把这两个元素的样式都定义好了。另外li需要写宽度,量图上各个元素占位宽度是多少
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
浮华out
2013-09-17 · TA获得超过101个赞
知道小有建树答主
回答量:138
采纳率:0%
帮助的人:120万
展开全部
ul、li 没有定义宽度
更多追问追答
追问
能告知具体肿么修改不?就出现图中那种效果?
追答

log的宽太小了:

#log {
    background: url("../images/logo.jpg") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    font-size: 14px;
    height: 43px;
    line-height: 43px;
    margin-top: 1px;
    padding-left: 70px;
    width: 90%;
}

#top_nav .nav_ul {
    float: left;
    height: 45px;
    margin: 0;
    padding: 0 0 0 20px;
    width: 90%;
}

#top_nav .nav_ul li {
    float: left;
    margin-left: 15px;
    margin-right: 15px;
    width:20%;
}

/* 一般css样式问题用浏览器的调试工具查看具体的边框大小,如“Firefox的检查元素”、“Safari的开发者工具” */
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友899fdc8
2013-09-17 · 超过17用户采纳过TA的回答
知道答主
回答量:85
采纳率:0%
帮助的人:35.1万
展开全部
高手就是高手,出错了我都看不懂。。。。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式