html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>项目二任务拓展</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="loge">
<center>
<img src="img/logo.png" width=50%" height="60px" />
</center>
</div>
<div class="daoHang">
<ul>
<li>首页</li>
<li>新闻</li>
<li>体育</li>
<li>娱乐</li>
<li>导航</li>
</ul>
</div>
<div class="shiQing">
<ul class="a">
<li>新闻</li>
<span style="float:left;margin:10px;">
<li>军事</li>
</span>
<li>社会</li>
<li>国际</li>
<li>娱乐</li>
<li style="margin:10px 30px 10px 5px;">视频</li>
</ul>
</div>
<div class="shiQing2">
<ul class="b">
<span>
<li style="float:left;margin:10px;margin:10px 10px 10px 68px;">时尚</li>
</span>
<li>综艺</li>
<li>图片</li>
<li>科技</li>
</ul>
</div>
<div class="shiQing" style="background-color:orange">
<ul class="a">
<li>财经</li>
<span style="float:left;margin:10px;">
<li>宏观</li>
</span>
<li>股票</li>
<li>投资</li>
<li>基金</li>
<li style="margin:10px 30px 10px 5px;">外汇</li>
</ul>
</div>
<div class="shiQing2" style="background-color:orange">
<ul class="b">
<span>
<li style="float:left;margin:10px;margin:10px 10px 10px 68px;">电影</li>
</span>
<li>明星</li>
<li>娱乐</li>
<li>游戏</li>
</ul>
</div>
<div class="shiQing">
<ul class="a">
<li>体育</li>
<span style="float:left;margin:10px;">
<li>NBA</li>
</span>
<li>直播</li>
<li>美超</li>
<li>中超</li>
<li style="margin:10px 30px 10px 5px;">英超</li>
</ul>
</div>
<div class="shiQing2">
<ul class="b">
<span>
<li style="float:left;margin:10px;margin:10px 10px 10px 68px;">赛车</li>
</span>
<li>跑车</li>
<li>足球</li>
<li>篮球</li>
</ul>
</div>
<div class="shiQing" style="background-color:pink">
<ul class="a">
<li>汽车</li>
<span style="float:left;margin:10px;">
<li>新车</li>
</span>
<li>试车</li>
<li>购车指南</li>
</ul>
</div>
<div class="shiQing2" style="background-color:pink">
<ul class="b">
<span>
<li style="float:left;margin:10px;margin:10px 10px 10px 68px;">宝马</li>
</span>
<li>奥迪</li>
<li>凯迪拉克</li>
<li>捷豹</li>
</ul>
</div>
<div class="diBu">
<ul>
<li>彩版</li>
<li>触版</li>
<li>pc版</li>
<li>客户端</li>
</ul>
</div>
<center style="font-size:13px;">
Copyright @ 2016 baidu.com
</center>
</body>
</html>
css代码：
*{
margin:0px;
padding:0px;
}
.loge{
width:100%;
height:60px;
}
.daoHang{
text-align: center;
background-color:red;
}
.daoHang ul{
display:inline-block;
}
.daoHang ul li{
list-style: none;
float:left;
margin:0px 10px;
}
.shiQing{
overflow: auto;
}
.shiQing .a>li{
list-style:none;
float:left;
margin:10px 20px 10px 5px;
}
.shiQing2{
overflow:auto;
border-bottom:dashed 1px red;
}
.shiQing2 .b>li{
list-style:none;
float:left;
margin:10px 20px 10px 5px;
}
.diBu{
text-align: center;
}
.diBu ul{
display:inline-block;
}
.diBu ul li{
list-style:none;
float:left;
margin:25px 15px 15px 15px;
}
