<!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>
<style>.li{ float:left; list-style-type:none; width:80px; height:60px; text-align:center; line-height:230px; font:"宋体"; font-weight: bold; font-size:13px;}#main a{ text-decoration:none}
#main a:hover{ color:#0000FF; background-image:url(nav_bg.png); width:60px; height:5px; display:block; font-size:14px; background-repeat:no-repeat; background-position:center ;}
#top li{background-repeat:no-repeat; float:left; line-height:30px;font-size:14px}/* 标题栏的文字显示*/
.topimage{width:20px; height:15px; padding:10px 5px 2px 2px;}
.bag{ background-image:url(5.png); background-repeat:no-repeat; width:39px; height:26px; list-style-type:none}
.textwenzi{padding:5px 5px 0px 2px; text-align:center; font-size:13px;}</style>
</head>
<body>
<div style="background-image:url(h_bg.jpg);  background-repeat:no-repeat; height:40px" id="main">
<div id="bag" style="float: right">
<!-- <ul>
<li class="bag" style="" ></li>
<li style="list-style-type:none" class="textwenzi" >登录</li>
<li  class="bag"style=""></li>
<li style="list-style-type:none" class="textwenzi">注册</li>
</ul> -->
</div>
<div style="float:right" id="top">
<ul>
<li class="topimage"style="background-image:url(1.png)"></li>
<li ><a href="#">购物车</a></li>
<li  class="topimage" style="background-image:url(2.png)"></li>
<li ><a href="#">帮助中心</a></li>
<li class="topimage" style="background-image:url(3.png)"></li>
<li><a href="#">加入收藏</a></li>
<li class="topimage" style="background-image:url(4.png)"></li>
<li><a href="#">设为首页</a></li>
</div>
<ul>
<li class="li"><a href="#">首&nbsp;&nbsp;页</a></li>
<li class="li"><a href="#">家用电器</a></li>
<li class="li"><a href="#">手机数码</a></li>
<li class="li"><a href="#">日用百货</a></li>
<li class="li"><a href="#">书&nbsp;&nbsp;籍</a></li>
<li class="li"><a href="#">帮助中心</a></li>
<li class="li"><a href="#">免费开店</a></li>
<li class="li"><a href="#">全球咨询</a></li>
</ul>
</div>
</body>
</html>
为什么“全球咨询”这里要错位,大小都差不多够吧?大哥大姐帮忙瞧瞧。还有个问题怎样才能把注册放在那白色图片上面去?要是不用div的情况下?要是用他又有点头疼。

解决方案 »

  1.   

    这样写
    <div style="float:right" id="top">
    <ul>
    <li class="topimage" style="background-image:url(1.png)"></li>
    <li ><a href="#">购物车</a></li>
    <li class="topimage" style="background-image:url(2.png)"></li>
    <li ><a href="#">帮助中心</a></li>
    <li class="topimage" style="background-image:url(3.png)"></li>
    <li><a href="#">加入收藏</a></li>
    <li class="topimage" style="background-image:url(4.png)"></li>
    <li><a href="#">设为首页</a></li>
     
    </ul>
    </div>
     
    <div style="float:left" id="top">
    <ul>
    <li class="li"><a href="#">首&nbsp;&nbsp;页</a></li>
    <li class="li"><a href="#">家用电器</a></li>
    <li class="li"><a href="#">手机数码</a></li>
    <li class="li"><a href="#">日用百货</a></li>
    <li class="li"><a href="#">书&nbsp;&nbsp;籍</a></li>
    <li class="li"><a href="#">帮助中心</a></li>
    <li class="li"><a href="#">免费开店</a></li>
    <li class="li"><a href="#">全球咨询</a></li>
    </ul>
     
    </div>
      

  2.   

    放在层里是最好了
    曾听人说 HTML 对排序位置 支持不够好
      

  3.   


    <li class="topimage" style="background-image:url(4.png)"></li>
    <li><a href="#">设为首页</a></li>
    <!---这少个ul结束标签---->
    </ul>
    </div>其他不知道问题在哪,看不出效果