效果图:
index.html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="header con">
<div class="logo"></div>
<div class="header-right">
<ul>
<!-- <div></div> -->
<li><a class="last active">安利海外购</a></li>
<li><a>掌上安利</a></li>
<li><a>安利悦享</a></li>
<li><a class="active">安利海外研发中心</a></li>
<li><a>各地店铺</a></li>
<li><a class="active">安利易联网</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="搜索" class="leftinput" />
<input type="submit" value="" class="rightinput" />
</div>
</div>
<div class="nav con">
<div>
<ul class="navlist con">
<li>走进安利</li>
<li>产品展览</li>
<li>公司咨询</li>
<li>企业展览</li>
<li>安利云购</li>
<li>其他</li>
</ul>
</div>
</div>
<div class="banner"></div>
<div class="list con">
<div class="item">
<img src="img/安利值得.png" class="img" />
<p>安利值得选择</p>
</div>
<div class="item">
<img src="img/老人.png" class="img" />
<p>《总裁零距离》微站</p>
</div>
<div class="item">
<img src="img/安利式体验.png" class="img last" />
<p>安利式体验,零距离接触</p>
</div>
</div>
<div class="footer">
<div class="up con">
<ul class="up_one">
<li><a>安利公益基金会</a></li>
<li><a>安利培训</a></li>
<li><a>安利云购</a></li>
</ul>
<ul class="up_one">
<li><a>直销信息披露</a></li>
<li><a>安利教育网</a></li>
<li><a>网站导航</a></li>
</ul>
<ul class="up_one">
<li><a>联系我们</a></li>
<li><a>企业认证</a></li>
<li><a>隐私声明条款</a></li>
</ul>
<ul class="up_one">
<li><a>联系我们</a></li>
<li><a>企业认证</a></li>
<li><a>隐私声明条款</a></li>
</ul>
</div>
<div class="con">
<p>
版权为安利(中国)日用品有限公司所有,未经过许可不得转载或链接,粤ICP备
<span>05013154</span>
号
</p>
</div>
</div>
</body>
</html>
css代码:
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.con {
width: 966px;
margin: 0 auto;
}
.header {
height: 110px;
/* background: yellow; */
}
.logo {
width: 265px;
height: 110px;
background-image: url(../img/安利.png);
float: left;
}
.header-right {
float: right;
}
.header-right ul {
height: 44px;
margin-top: 10px;
line-height: 44px;
}
.header-right li {
float: right;
}
.header-right li a {
border-right: 1px solid #b2c7ea;
padding: 0 13px;
font-size: 13px;
color: gray;
}
.header-right .last {
border: 0;
padding-right: 0;
}
.header-right li .active {
color: red;
}
.search {
width: 234px;
height: 28px;
border: 1px solid gray;
float: right;
}
.search input {
border: 0;
outline: none;
}
.search .leftinput {
padding-left: 14px;
float: left;
width: 195px;
height: 28px;
}
.search .rightinput {
float: right;
width: 24px;
height: 28px;
background: url(../img/搜索.png);
background-repeat: no-repeat;
/* background-position: right center; */
}
.nav {
width: 100%;
height: 53px;
line-height: 53px;
border-top: 1px solid black;
background-color: darkblue;
}
.navlist {
color: white;
margin: 0 auto;
}
.navlist li {
padding-right: 76px;
float: left;
text-align: center;
}
.navlist li:hover {
color: aqua;
/* background-color: ; */
}
.banner {
height: 500px;
background: url(../img/哈弗.png);
background-repeat: no repeat;
background-position: center center;
background-size: cover;
}
.list {
margin-top: 51px;
margin-bottom: 35px;
height: 231px;
/* background: yellow; */
}
.item {
height: 229px;
width: 300px;
border: 1px solid gray;
margin-right: 19px;
float: left;
}
.img {
width: 300px;
height: 190px;
}
.item p {
height: 41px;
line-height: 41px;
text-align: center;
font-size: 15px;
color: black;
/* background-color: #f6f7f8; */
}
.item img {
display: block;
}
.item .last {
margin-right: 0;
}
.item p:hover {
color: #3872d6;
}
.footer {
height: 206px;
border: 1px solid #cccccc;
}
.up {
width: 100%;
margin: 0 auto;
padding-left: 300px;
color: #3872d6;
font-size: 12px;
/* border-bottom: 1px solid gray; */
}
.up_one {
padding-left: 50px;
line-height: 35px;
padding-bottom: 20px;
width: 200px;
float: left;
}
.footer ul {
border-bottom: 1px solid gray;
}
.footer p {
height: 61px;
line-height: 61px;
padding-left: 30px;
font-size: 12px;
}
.footer p span {
color: #3872d6;
}