导航栏和图片展示
2018-09-13 本文已影响0人
neko233
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条02</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.top{
margin: 20px auto;
width: 960px;
height: 40px;
background-color: #55a8ea;
position: relative;
}
.top ul li{
float: left;
list-style: none;
width: 100px;
}
.top ul a{
display: block;
width: 100px;
text-align: center;
padding: 11px 0;
text-decoration: none;
color: #fff;
font-size: 14px;
font-family: "雅黑";
}
.top a:hover{
background-color: #00619f;
color: gold;
}
.top img{
position: absolute;
left: 430px;
top: -10px;
}
.foot{
width: 960px;
height: 270px;
margin: 100px auto;
border: 1px solid #d1d1d1;
}
.foot span{
float: left;
display: block;
text-decoration: none;
font-size: 18px;
line-height: 50px;
font-family: "雅黑";
margin-left: 20px;
width: 90px;
height: 50px;
text-align: center;
border-bottom: 2px solid red;
}
.pic{
width: 1000px;
height: 220px;
margin: 50px auto;
padding-top: 20px;
padding-left: 20px;
}
.pic ul{
list-style: none;
}
.pic li{
float: left;
margin-right: 29px;
margin-bottom: 25px;
}
.right{
float: left;
width: 830px;
height: 50px;
border-bottom: 2px solid #d1d1d1;
}
</style>
</head>
<body>
<div class="top">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#">企业VI</a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<img src="./img/new.png" alt="">
</div>
<div class="foot">
<span class="clearfix">图片展示</span>
<div class="right"></div>
<div class="pic">
<ul>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
<li><img src="./img/goods.jpg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
猎豹截图20180913075629.png
