像淘寶京東等購物網(wǎng)站中經(jīng)常會有商品列表頁，這里需要用到的是一個圖片列表假颇，產(chǎn)品分類要用到的是一個導(dǎo)航條
今天我們要做的模塊如下圖所示：
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>導(dǎo)航條</title>
<style type="text/css">
/*清除默認(rèn)樣式*/
*{
margin: 0;
padding: 0;
}
.nav{
/*去除項目符號*/
list-style: none;
/*為ul設(shè)置一個背景顏色*/
background-color: #55a8ea;
width: 960px;
height: 40px;
/*設(shè)置居中*/
margin: 50px auto;
/*解決高度塌陷*/
overflow: hidden;
}
/*設(shè)置li*/
.nav li{
float: left;
width: 100px;
}
.nav a{
/*將a轉(zhuǎn)換為塊元素*/
display: block;
/*為a指定一個寬度*/
width: 100%;
/*設(shè)置文字居中*/
text-align: center;
/*設(shè)置一個上下內(nèi)邊距*/
padding: 10px 0;
/*去除下劃線*/
text-decoration: none;
/*設(shè)置字體*/
color: #fff;
font-family: "微軟雅黑";
font-size: 14px;
}
/*設(shè)置a的鼠標(biāo)移入的效果*/
.nav a:hover{
background-color: #00619f;
height: 40px;
</style>
<body>
<ul class="nav">
<li><a href="#">首頁</a></li>
<li><a href="#">網(wǎng)站建設(shè)</a></li>
<li><a href="#">程序開發(fā)</a></li>
<li><a href="#">網(wǎng)絡(luò)營銷</a></li>
<li>
<a href="#">企業(yè)VI</a>
<img src="new.png" style="position: absolute;margin-left: 45px;margin-top: -50px">
</li>
<li><a href="#">案例展示</a></li>
<li><a href="#">聯(lián)系我們</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;
/*設(shè)置居中*/
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>
