各位大神帮忙看一下 为什么编的网页代码老是出错 排版不对
这是网页代码“<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;
}
”
这是我想要呈现的效果,但是怎么出来的是这样的
求大神解决~ 展开
<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;
}
”
这是我想要呈现的效果,但是怎么出来的是这样的
求大神解决~ 展开
3个回答
展开全部
应该是样式名写的不对,html里class名字的格式含义和css里的相同格式含义是不一样的。
比如 class="nav_ul li"在html里的含义是同时执行nav_ul和li两个样式,而在css里nav_ul li的意思是nav_ul里面的li的样式。
比如 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需要写宽度,量图上各个元素占位宽度是多少
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
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的开发者工具” */
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
高手就是高手,出错了我都看不懂。。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询