网页中的图片列表和导航条
2018-09-12 本文已影响0人
心软脾气硬01
像淘宝京东等购物网站中经常会有商品列表页，这里需要用到的是一个图片列表，产品分类要用到的是一个导航条
今天我们要做的模块如下图所示：
2018-09-12 19-18-07.jpg
2018-09-12 19-18-23.jpg
效果图和源代码如下：
2018-09-12 19-19-21.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
.nav{
/*去除项目符号*/
list-style: none;
/*为ul设置一个背景颜色*/
background-color: #55a8ea;
width: 960px;
height: 40px;
/*设置居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
/*设置li*/
.nav li{
float: left;
width: 100px;
}
.nav a{
/*将a转换为块元素*/
display: block;
/*为a指定一个宽度*/
width: 100%;
/*设置文字居中*/
text-align: center;
/*设置一个上下内边距*/
padding: 10px 0;
/*去除下划线*/
text-decoration: none;
/*设置字体*/
color: #fff;
font-family: "微软雅黑";
font-size: 14px;
}
/*设置a的鼠标移入的效果*/
.nav a:hover{
background-color: #00619f;
height: 40px;
</style>
<body>
<ul class="nav">
<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>
<img src="new.png" style="position: absolute;margin-left: 45px;margin-top: -50px">
</li>
<li><a href="#">案例展示</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
2018-09-12 19-19-00.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片列表</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.outer{
width: 960px;
height: 269px;
border: 1px solid;
/*去除项目符号*/
list-style: none;
/*设置居中*/
margin: 50px auto;
/*解决高度塌陷*/
overflow: hidden;
}
.content{
width: 920px;
height: 181px;
border-top: 1px black solid;
margin-left: 20px;
}
.title h3{
text-decoration: none;
font-size: 18px;
font-family:"微软雅黑";
margin: 20px 30px;
color: #000;
}
.content ul{
/*去除项目符号*/
list-style: none;
/*background-repeat: repeat-x;*/
/*padding: 20px 29px 25px 0px;*/
}
.content .first a{
display: block;
float: left;
/*padding: 20px 14.5px 5px 0;*/
padding: 20px 29px 25px 0px;
}
.content .right a{
padding: 20px 0px 25px 0px;
float: left;
}
.content .second a{
padding: 0px 29px 0px 0px;
float: left;
}
.content .last a{
padding: 0px;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<h3>图片展示</h3>
</div>
<div class="content">
<ul class="first">
<li><a href="#"><img src="goods.jpg"></a></li>
<li><a href="#"><img src="goods.jpg"></a></li>
<li><a href="#"><img src="goods.jpg"></a></li>
<li><a href="#"><img src="goods.jpg"></a></li>
</ul>
<ul class="right">
<li><a href="#"><img src="goods.jpg"></a></li>
</ul>
<ul class="second">
<li><a href="#"><img src="goods.jpg"></a></li>
<li><a href="#"><img src="goods.jpg"></a></li>
<li><a href="#"><img src="goods.jpg"></a></li>
<li><a href="#"><img src="goods.jpg"></a></li>
</ul>
<ul class="last">
<li><a href="#"><img src="goods.jpg"></a></li>
</ul>
</div>
</div>
</body>
</html>
