<head>
<meta charset="utf-8">
<style type="text/css">
li{
color:red
}
span{
color:black
}
</style>
</head>
<body>
<div style="width:300pxborder:2px solid redbackground-color:#eddfd5">
<ul style="font-size:14px">
<li><span>图书、电子书刊、音像</span></li>
<li><span>家用电器、汽车用品</span</li>
<li><span>手机数码</span</li>
<li><span>电脑、办公</span</li>
<li><span>家居家装、厨具</span</li>
<li><span>服饰、鞋帽</span</li>
<li><span>个护化妆</span</li>
<li><span>礼品箱包、钟表、珠宝</span</li>
<li><span>运动健康</span</li>
<li><span>母婴、玩具乐器</span</li>
<li><span>食品饮料、保健食品</span</li>
<li><span>彩票、旅行、充值、票务</span</li>
<li style="color:redfont-size:12px">全部商品分类</li>
</ul>
</div>
<script src="jquery-1.min.js"></script>
<script>
//需要引用Jquery.js文件
$("li").mouseover(function(){
$(this).css("background-color","#eeeeee")
$(this).css("border-top","1px solid red")
$(this).css("border-bottom","1px solid red")
$(this).find("span").css("color","red")
$(this).find("span").css("font-size","16px")
})
$("li").mouseout(function(){
$(this).css("background-color","#eddfd5")
$(this).css("border-top","none")
$(this).css("border-bottom","none")
$(this).find("span").css("color","black")
$(this).find("span").css("font-size","14px")
})
</script>
</body>
</html>
用div 还是用table
<!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>
</head>
<style type="text/css">
td{background-color:#FF0 border-right:#F00 2px dashed height:30px}
</style>
<body>
<table width="200" >
<tr>
<td align="right" valign="bottom">手机充值</td>
<td align="right" valign="bottom">电子彩票</td>
</tr>
<tr>
<td align="right" valign="bottom">电脑硬件</td>
<td align="right" valign="bottom">数码相机</td>
</tr>
</table>
</body>
</html>
例子代码如下：
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<style>
html, body, div, span, p, a,ul, li, section, video {
margin: 0
padding: 0
border: 0
font-size: 100%
vertical-align: baseline
}
body {
line-height: 1
}
A {
text-decoration: NONE
color: #000000
}
a:visited {
text-decoration: none
}
a:active {
text-decoration: none
}
a:hover {
text-decoration: none
color:#F00
}
ol,ul {
list-style: none
}
html {
overflow-y: scroll
font-size: 100%
-webkit-text-size-adjust: 100%
-ms-text-size-adjust: 100%
}
.dingbu {
height:30px
overflow:hidden
background-color:#999
position:relative
color:#3f3f3f
text-decoration:none
font-size:12px
}
.daohang {
width:960px
height:29px
line-height:29px
margin:0 auto 0 auto
position:relative
}
.daohang a {
margin:0px 10px 0px 10px
}
.daohanga {
width:370px
height:29px
float:left
}
.daohangb {
width:460px
height:29px
float:right
text-align:right
}
</style>
</head>
<body>
<div class="dingbu">
<div class="daohang">
<DIV class="daohanga">
<A>网址大全</A>
<A href="#">电影</A>
<A href="#">电视剧</A>
<A href="#">彩票</A>
<A href="#">团购</A>
<A href="#">手机必备</A>
</DIV>
<DIV class="daohangb">
<A href="#">手机版</A>
<A href="#">个性设置</A>
<A href="#">设为主页</A>
<A href="#">加入收藏</A>
</DIV>
</div>
</div>
<div class="zhengwen" style="background-color:#CCCwidth:960px height:1000px margin:0 auto 0 auto position:relative text-align:center font-size:36px">
<br />
<br />
<br />
<br />
<br />
<br />
正文
</div>
</body>
</html>
