cssday4homework

最新推荐文章于 2024-05-12 16:07:58 发布

MATATOP

最新推荐文章于 2024-05-12 16:07:58 发布

阅读量221

点赞数

分类专栏： practice

本文链接：https://blog.csdn.net/Saranghae_Lcx/article/details/78457089

版权

practice 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>京东导航</title>
<link type="text/css" rel="stylesheet" href="navi.css"/>
</head>
<body>
<p></p>
<div id="navi">
<div id="all_cate">
<div id="cate_title">
<a href="#">全部商品分类</a>
<i></i>
</div>
<div id="cate_main">
<div class="cate_line">
<h3>
<a href="#">图书</a>
<span>、</span>
<a href="#">音像</a>
<span>、</span>
<a href="#">数字商品</a>
</h3>
</div>
<div class="sub_cate">
<div class="x">x
</div>
</div>
<div class="cate_line">
<h3>
<a href="#">家用电器</a>
</h3>
</div>
</div>
</div>
<div id="navi_main">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">食品</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">夺宝岛</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">金融</a></li>
</ul>
</div>
</div>
</body>

</html>

*{
margin:0px;
padding:0px;
list-style:none;
}
#navi{
width:1210px;
height:40px;
margin:10px auto;
background-color:#e64346;
}
#all_cate,#navi_main{
float:left;
}
#all_cate{
width:210px;
}
#cate_title{
background-color:#cd2a2c;
color:#000;
font-weight:bold;
font-size:14px;
line-height:40px;
height:40px;
padding-left:16px;
}
#cate_title a{
text-decoration:none;
color:#fff;
float:left;
}
#cate_title a:hover{
text-decoration:underline;
}
#cate_title i{
width:20px;
height:20px;
float:right;
background:url(Images/iconlist_2.png) no-repeat -65px 0;
margin-top:10px;
}
#cate_main{
width:203px;
height:402px;
padding:4px 3px 3px 0;
background-color:#fafafa;
border:2px solid #e4394c;
border-top:none;
position:absolute;
}
.cate_line h3{
width:183px;
height:28px;
border-bottom:1px solid #fff;
padding-left:13px;
font-size:14px;
line-height:28px;
font-weight:normal;
position:relative;
z-index:2;
}
.cate_line h3:hover{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
background:#fff;
width:186px;
}
.cate_line a{
color:#333;
text-decoration:none;
}
.cate_line span{
margin-right:4px;
}
.sub_cate{
position:absolute;
width:705px;
height:300px;
border:1px solid #ddd;
background:#fff;
box-shadow:0px 1px 3px 1px #ddd;
top:3px;
left:198px;
z-index:1;
}
.x{
position:absolute;
left:706px;
width:26px;
height:26px;
background:#555;
color:#fff;
font-size:26px;
text-align:center;
line-height:26px;
font-family:"微软雅黑";
}
#navi_main li{
width:83px;
height:40px;
line-height:40px;
float:left;
text-align:center;
}
#navi_main li a {
display:block;
color:#fff;
text-decoration:none;
width:100%;
height:100%;
font-size:15px;
font-weight:bold;
}
#navi_main li a:hover{
background-color:#BD2a2c;
}