HTML+css练习
京东导航位置的一部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>请叫我国服第一瑞文</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
.navigate a{
text-decoration:none;
color:#fff;
}
.navigate{
text-indent:10px;
width:210px;
border:1px solid #b1191a;
border-right:none;
}
.navigate a h3{
height:44px;
line-height:44px;
font-family:Arial,"microsoft yahei";
font-size:16px;
font-weight:normal;
background-color:#b1191a;
}
.navigate .list{
background-color:#c81623;
font-size:14px;
position:relative;
}
.navigate .list li{
height:31px;
line-height:31px;
}
.navigate .list li:hover{
background-color:#fff;
}
.navigate .list li:hover a{
color:#c81623;
}
.navigate .list li i{
color:#fff;
float:right;
font:400 9px/14px comsolar;
margin-right:10px;
line-height:31px;
}
.navigate .list li .detail{
width:1000px;
height:465px;
background-color:#f7f7f7;
border:1px solid #b1191a;
border-top:2px solid #b1191a;
font-size:64px;
font-weight:800;
line-height:465px;
text-align:center;
color:#b1191a;
position:absolute;
top:-2px;
left:210px;
display:none;
}
.navigate .list li:hover .detail{
display:block;
}
</style>
</head>
<body>
<div>
<a href=""><h3>全部商品分类</h3></a>
<ul>
<li><a href="">家用电器</a><i>></i><div>1</div></li>
<li><a href="">电脑</a><a href="">办公</a><i>></i><div>2</div></li>
<li><a href="">电脑</a><a href="">办公</a><i>></i><div>3</div></li>
<li><a href="">电脑</a><a href="">办公</a><i>></i><div>4</div></li>
<li><a href="">电脑</a><a href="">办公</a><i>></i><div>5</div></li>
<li><a href="">电脑</a><a href="">办公</a><i>></i><div>6</div></li>
<li><a href="">电脑</a><a href="">办公</a><i>></i><div>7</div></li>
</ul>
</div>
</body>
</html>
