摘要：HTML代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>淘宝导航</title><link rel="stylesheet" href="index.css&qu
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝导航</title>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-content">
<div class="header-left">
<a href="" class="header-a">中国大陆 <i class="fa fa-angle-down"></i>
</a>
<a href="" style="color:#ff5000;">亲,请登录</a>
<a href="">免费注册</a>
<a href="">手机逛淘宝</a>
</div>
<div class="header-right">
<a href="" class="header-a">我的淘宝 <i class="fa fa-angle-down"></i>
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</a>
<a href=""><span class="fa fa-cart-plus" style="color:#ff5000;"></span> 购物车</a>
<a href="" class="header-a"><span class="fa fa-star" style="color:gray;"></span> 收藏夹 <i class="fa fa-angle-down"></i>
<ul>
<li>收藏的宝贝</li>
<li>收藏的店铺</li>
</ul>
</a>
<a href="">商品分类</a>
|
<a href="" class="header-a">卖家中心 <i class="fa fa-angle-down"></i>
<ul>
<li>免费开店</li>
<li>已卖出的宝贝</li>
<li>出售中的宝贝</li>
<li>卖家服务市场</li>
<li>卖家培训中心</li>
<li>体检中心</li>
<li>问商友</li>
</ul>
</a>
<a href="" class="header-a">联系客服 <i class="fa fa-angle-down"></i>
<ul>
<li>消费者客服</li>
<li>卖家客服</li>
</ul>
</a>
<a href="" class="header-a"><span class="fa fa-align-justify" style="color:#ff5000;font-size:10px;"></span> 网站导航 <i class="fa fa-angle-down"></i>
<ul id="list">
<!-- 这里的li标签通过for循环写入 -->
</ul>
</a>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
<script>
var ul = document.getElementById('list');
for(var i=0;i<84;i++){
var li = document.createElement('li');
li.innerHTML = 'test';
ul.appendChild(li);
}
</script>
CSS代码:*{
margin: 0px;
padding: 0px;
}
.header{
width: 100%;
background-color: #f5f5f5;
}
.header-content{
width: 1200px;
margin: 0 auto;
line-height: 40px;
}
.header-left{
width: 300px;
height: 40px;
float: left;
}
.header-right{
width: 600px;
height: 40px;
float: right;
}
.clear{
clear: both;
}
a{
text-decoration: none;
color: #000;
font-size: 13px;
}
.header-a{
display: inline-block;
height: 40px;
width: 80px;
text-align: center;
position: relative;
}
.header-left a{
margin-right: 5px;
}
.header-content a:hover{
color: #ff5000;
}
.header-a:hover{
background: #fff;
}
li{
list-style-type: none;
}
.header-a ul{
border:1px solid lightgray;
display: none;
border-top: none;
}
.header-a:hover ul{
display: block;
position: absolute;
width: 82px;
}
.header-a ul li:hover{
background-color: #f5f5f5;
}
.header-a ul li{
color:#6c6c6c;
height:30px;
line-height: 30px;
text-align: left;
padding: 0px 3px;
margin: 5px 0px;
}
.header-right :nth-child(7) li{
list-style-type: none;
width: 80px;
background: lightblue;
float: left;
margin: 5px 4px;
text-align: center;
}
.header-right :nth-child(7) ul{
border: 1px solid lightgray;
border-top: none;
display: none;
}
.header-right :nth-child(7):hover ul{
width: 1140px;
height: 300px;
position: absolute;left:-1060px;
display: block;
}
注:font-awesome.min.css 需要到官网下载自行引入
http://fontawesome.dashgame.com/
批改老师：韦小宝批改时间：2019-01-20 15:39:24
老师总结：写的很不错 课后记得多练习 这种案例可以帮我们快速的掌握布局的基础
