HTML+CSS简单静态页面——安利首页

本文介绍: 对于一个很简单的页面的记录代码记录效果图HTML代码展示CSS代码展示效果图HTML代码展示<!DOCTYPE html><html lang=”en”><head> <meta char set=”UTF-8″> <meta name=”viewport” content=”width=device–width, init i al-scale=1.0″> <title>Docum ent</ti tle>.

对于一个很简单的页面的记录

代码记录

效果图

在这里插入图片描述

HTML代码展示

<!DOCTYPE html&gt;
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="test.css">
	<!-- 版心，通栏 -->
</head>
<body>
	<div class="header con">
		<div class="logo"></div>
		<div class="headerright">
			<ul>
				<li><a class = "active" href="">安利海外购</a></li>
				<li><a href="">掌上安利</a></li>
				<li><a class = "active" href="">安利月享荟</a></li>
				<li><a href="">安利植物研发中心</a></li>
				<li><a href="">各地店铺</a></li>
				<li><a class = "last active" href="">安利易联网</a></li>
			</ul>
			<div class="search">
				<input type="text" name="" placeholder="搜索" class="left">
				<input type="submit" name="" value="" class="right">
			</div>
		</div>
	</div>
	<div class="nav">
		<ul class="con">
			<li><a href="">走进安利</a></li>
			<li><a href="">产品展馆</a></li>
			<li><a href="">公司咨询</a></li>
			<li><a href="">企业责任</a></li>
			<li><a href="">安利云购</a></li>
			<li><a href="">其他</a></li>
		</ul>
	</div>
	<div class="banner"></div>
	<div class="list con">
		<div class="box1">
			<img src="../image_box/anlilist.png" alt="">
			<p>《总裁零距离微站》</p>
		</div>
		<div class="box1">
			<img src="../image_box/anlilist1.png" alt="">
			<p>安利，值得选择</p>
		</div>
		<div class="box1 last">
			<img src="../image_box/anlilist2.png" alt="">
			<p>安利式体验 全新为您</p>
		</div>
	</div>
	<div class="footer">
		<div class="con">
			<ul>
				<li><a href="">安利公益基金会</a></li>
				<li><a href="">安利培训中心</a></li>
				<li><a href="">安利云购</a></li>
				<li><a href="">安利轻创业平台</a></li>
				<li><a href="">直销信息披露</a></li>
				<li><a href="">安利教育网</a></li>
				<li><a href="">网址导航</a></li>
				<li><a href="">安利全球官方网站</a></li>
				<li><a href="">联系我们</a></li>
				<li><a href="">企业证照</a></li>
				<li><a href="">隐私声明条例</a></li>
				<li><a href="">国家工商总局直销行业管理</a></li>
			</ul>
			<p>版权为安利（中国)日用品有限公司所有未经许可不得转载或链接，粤ICP备<span>05013154</span>号</p>
		</div>
	</div>
</body>
</html>

CSS代码展示

*{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
/*header区域*/
ul{
	list-style: none;
}
.con{
	width: 970px;
	margin: 0 auto;
}
.header{
	height: 110px;
	/*background-color: yellow;*/
}
.logo{
	width: 263px;
	height: 110px;
	background: url(../image_box/anlilogo.png);
	float: left;
}
.headerright{
	float: right;
}
.headerright ul{
	height: 44px;
	margin-top: 10px;
	line-height: 44px;
}
.headerright li{
	float: left;
}
.headerright li a{
	border-right: 1px solid #b2c7ea;
	padding: 0 13px;
	font-size: 13px;
	color: #ababab
}
.headerright .last{
	padding-right: 0;
	border: 0;
}
.headerright li .active{
	color: #eb6ca1;
}
.search{
	float: right;
	width: 234px;
	height: 28px;
	border: 1px solid #d1d1d1;
}
.search input{
	border: 0;
	outline: none;
}
.search .left{
	float: left;
	width: 196px;
	height: 28px;
	padding-left: 14px;
}
.search .right{
	background: url(../image_box/search.png) 
	no-repeat 
	center center; 
	float: right;
	height: 28px;
	width: 24px;
}
/*nav区域*/
.nav {
	height: 53px;
	line-height: 53px;
	border: 1px solid #657588;
	background: #0c345c;
}
.nav a{
	color: white;
}
.nav li{
	float: left;
	font-size: 16px;
	margin-right: 76px;
}
/*banner区域*/
.banner{
	height: 380px;
	background: url(../image_box/anlinav.png)
	no-repeat center;
}
/*list区域*/
.list{
	height: 213px;
	margin-top: 50px;
	margin-bottom: 35px;
	/*background: yellow;*/
}
.list .box1{
	width: 305px;
	height: 211px;
	border: 1px solid #cccccc;
	float: left;
	margin-right: 18px;
}
.list .last{
	margin-right: 0;
}
.list .box1 p{
	height: 47px;
	line-height: 47px;
	padding-left: 28px;
	font-size: 16px; 
	color: black;
}
.box1 img{
	display: block;
}
/*footer区域*/
.footer{
	height: 206px;
	border-top: 1px solid #cccccc;
	background: url(../image_box/anlifooter.png);
}
.footer ul a{
	display: block;
	color: rgb(0, 0, 120);
}
.footer ul{
	height: 84px;
	padding-top: 30px;
	padding-bottom: 30px;
	border: 1px solid #ecebeb;
	line-height: 28px;
}
.footer li{
	padding-left: 30px;
	width: 210px;
	font-size: 12px;  
	color: #336699;
	float: left;
}
.footer p{
	padding-left: 30px; 
	height: 61px;
	line-height: 61px;
	font-size: 12px;
}
.footer span{
	color: #0096da
}