每一次做项目，都可以积累不少经验，这次也不例外，我这次主要负责搭建主页面，在搭建主页面的时候，由于导航要求是仿照京东商城的左导航，所以，刚开始，一点头绪也没有，但经过上网查资料，我明白了，下面和大家分享一下：
CSS样式表：
<style type="text/css">
#daohang{
width:780px;
height:30px;
padding:0px 5px;
}
#daohang ul,li{
margin:0px;
padding:0px;
float:left;
}
#daohang a:link{/*连接本身的设置，没有下划线*/
color:Black;
text-decoration:none;
float:left;
width:100px;
padding:3px 5px 0px 5px;
}
#daohang a:visited{/*访问过后的颜色设置*/
color:black;
text-decoration:none;
float:left;
padding:3px 5px 0px 5px;
width:100px;
}
#daohang a:hover{/* 当鼠标悬停锚点a标签时，文字颜色和背景颜色的变化效果 */
color:white;
float:left;
padding:3px 3px 0px 20px;
width:88px;
font-weight:bold;
text-decoration:none;
background-color:red;
}
#daohang a:active{/*按下时的设置*/
color:black;
float:left;
padding:3px 3px 0px 20px;
width:88px;
text-decoration:none;
background-color:#FFF7FB;
}
.list{/*下拉列表里的设置*/
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px 4px 0px 0px;
border:1px solid red;
background-color: #f4f4f4;
color:#000099;
padding:6px 0px 0px 0px;
font-weight:bold;
cursor:hand;/*规定要显示的光标的类型（形状）*/
overflow:hidden;/*溢出的内容将被隐藏，同时为了视觉差异，设置边框样式和背景颜色 */
}
.menu2{
width:120px;
height:18px;
margin:6px 4px 0px 0px;
background-color:#FFF7FB;
color:#999;
border:1px solid #CCC;
padding:6px 0px 0px 0px;
overflow:hidden;
cursor:hand;
}
</style>
html页面：
<body>
<div id="daohang">
<ul>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">音乐、影视
<div class="list"> <a href="#">音乐</a><br />
<a href="#">影视</a><br />
<a href="#">教育音像</a><br />
</div>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">家用电器
<div class="list">
<a href="#">平板电视</a><br />
<a href="#">洗衣机</a><br />
<a href="#">豆浆机</a><br />
</div>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">手机数码
<div class="list">
<a href="#">手机</a>
<a href="#">数码相机</a>
<a href="#">手机配件</a>
<a href="#">移动电源</a> </div>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">电脑办公
<div class="list">
<a href="#">笔记本</a><br />
<a href="#">CPU</a><br />
<a href="#">鼠标</a><br />
<a href="#">打印机</a><br />
</div>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">服饰鞋帽
<div class="list">
<a href="#">男士外套</a><br />
<a href="#">女士T恤</a><br />
<a href="#">运动装</a><br />
<a href="#">围巾</a><br />
<a href="#">童装</a><br />
</div>
</li>
<li class="menu2" οnmοuseοver="this.className='menu1'" οnmοuseοut="this.className='menu2'">食品饮料
<div class="list">
<a href="#">饼干蛋糕</a><br />
<a href="#">米面杂粮</a><br />
<a href="#">保健茶饮</a><br />
<a href="#">葡萄酒</a><br />
<a href="#">南北干货</a><br />
</div>
</li>
</ul>
</div>
</body>
效果如下图：
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
