- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.box{width:960px;height:40px;margin:50px auto;background-color: #55a8ea}
.box li{
display:inline-block;
float: left;
text-align: :center;
}
.box a{
display: inline-block;
text-align: center;
padding:10px 10px;
text-decoration: none;
color:#fff;
font:14px '雅黑';
}
.box a:hover{
background-color: #cc0000;
}
.box .box1{width:100px;background-color:#00619f;}
.box img{position: absolute;
left:20px;
top:-10px;}
图片展示
.pic_box{width:960px;height:250px;border:1px solid #eeeeee;
margin:100px auto;}
.line_box{ width:920px; height:199px;margin:0 auto; border-top:1px #eeeeee solid;}
p{padding-left: 20px;
font:18px 微软雅黑;
color:#000;
display: inline-block;
border-bottom:2px solid red;
margin:0 1px;
}
.a{display:block;
float:left;padding:20px 14.5px 25px 0;}
.aa{display:block;
float:left;padding:20px 14.5px 25px 14.5px;}
.aaa{display:block;
float:left;padding:20px 0 25px 14.5px;}
.b{display:block;
float:left;padding:0 14.5px 39px 0;}
.bb{display:block;
float:left;padding:0 14.5px 39px 14.5px;}
.bbb{display:block;
float:left;padding:0 0 39px 14.5px;}
</style>
</head>
<body>
<!-- 创建导航条的结构 -->
<ul class="box">
<li >
<a class = 'box1' href="#" >首页</a>
</li>
<li><a href="#">网站建设</a></li>
<li><a href="#">程序开发</a></li>
<li><a href="#">网络营销</a></li>
<li><a href="#" style = 'position: relative;'>企业VI <img src = 'image/new.png'> </a></li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<!--图片展示 -->
<div class="pic_box">
<p>图片展示</p>
<div class = 'line_box'>
<img src="image/goods.jpg" class = 'a'>
<img src="image/goods.jpg" class = 'aa'>
<img src="image/goods.jpg" class = 'aa'>
<img src="image/goods.jpg" class = 'aa'>
<img src="image/goods.jpg" class = 'aaa'>
<img src="image/goods.jpg" class = 'b'>
<img src="image/goods.jpg" class = 'bb'>
<img src="image/goods.jpg" class = 'bb'>
<img src="image/goods.jpg" class = 'bb'>
<img src="image/goods.jpg" class = 'bbb'>
</div>
</div>
</body>
</html>
-
效果
Image 2.png
