简易的网站首页开发

最新推荐文章于 2024-04-29 16:27:27 发布

经常肥猫

最新推荐文章于 2024-04-29 16:27:27 发布

阅读量844

点赞数 1

分类专栏： html/css，css3 网站开发网站首页开发

本文链接：https://blog.csdn.net/qq_43228357/article/details/97766009

版权

html/css，css3 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

网站开发

2 篇文章 0 订阅

订阅专栏

网站首页开发

2 篇文章 0 订阅

订阅专栏

自己花了点时间写了一个简单网站的首页，包括布局，html+css，适合初学者，仅供参考。
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>lementi美容护肤</title>
		<link rel="stylesheet" type="text/css" href="css/cssReset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		
	</head>
	<body>
		<!--S= 页面的顶部-->
		<div class="top">
			<div class="top_page">
				<div class="top_page_l fl">你好，欢迎来到lementi</div>
				<div class="top_page_r fr">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">我的订单</a><s></s></li>
						<li><a href="#">我的服务</a><s></s></li>
						<li><a href="#">客服中心</a></li>
						<li><a href="#">收藏我们</a><s></s></li>
						<li><a href="#">关于lementi</a><s></s></li>
					</ul>
				</div>
			</div>
		</div>
		<!--E= 页面的底部-->
		
		<!--S= logo-->
		<div class="logo">
			<h1 class="logo_l fl">lementi美容护肤</h1>
			<div class="logo_r fr">
				<div class="logo_r_content">
					<input type="input" class="logo_r_search fl" placeholder="请输入关键字" />
					<input type="button" class="logo_r_btn fl" value="搜索" />
				</div>
			</div>
		</div>
		<!--E= logo-->
		
		<!--S= 导航-->
		<div class="nav">
			<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>
			</ul>
		</div>
		<!--E= 导航-->
		
		<!--S= banner-->
			<div class="banner">
				<div class="subNav fl">
					<h2>商机市场</h2>
					<ul>
						<li><s></s><a href="#">化妆品</a></li>
						<li><s></s><a href="#">美容护肤品</a></li>
						<li><s></s><a href="#">美容评测</a></li>
						<li><s></s><a href="#">肌肤保养</a></li>
						<li><s></s><a href="#">身体护理</a></li>
						<li><s></s><a href="#">彩妆香氛</a></li>
					</ul>
				</div>
				<div class="ad fl">
					<ul>
						<li class="current"></li>
						<li></li>
						<li></li>
					</ul>
				</div>
				<div class="message fr">
					<div class="message_top">
						<p class="fw">lementi大众版</p>
						<s class="fl"></s><p class="cheap fl">价格实惠，量身为<br />顾客定做。<a href="#">了解详情></a></p>
					</div>
					<div class="message_bottom">
						<p class="findmessage">找信息或者发信息遇到问题？</p>
						<p class="phone"><s></s>0124-9792374987</p>
						<input type="button" class="btn" />
					</div>
				</div>
			</div>
		<!--E= banner-->
		
		<!--S= material-->
			<div class="material">化妆品</div>
		<!--E= material-->
		
		<!--S= 具体信息-->
			<div class="product">
				<div class="product_l fl">
					<div class="product_l_top">
						<div class="p_l_t_product1 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>
						</div>
						<div class="p_l_t_product2 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>			
						</div>
					</div>
					<!--S= 分界线-->
					<div class="product_l_line"></div>
					<!--E= 分解线-->
					<div class="product_l_bottom">
						<div class="p_l_b_product1 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>
						</div>
						<div class="p_l_b_product2 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>			
						</div>
					</div>					
				</div>
				<div class="product_r fr">
					<h2>化妆品咨询</h2>
					<ul>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
					</ul>
				</div>
			</div>
		<!--E= 具体信息-->
		
		<!--S= 重复一份-->
		<!--S= material-->
			<div class="material">美容护肤品</div>
		<!--E= material-->
		
		<!--S= 具体信息-->
			<div class="product">
				<div class="product_l fl">
					<div class="product_l_top">
						<div class="p_l_t_product1 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>
						</div>
						<div class="p_l_t_product2 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>			
						</div>
					</div>
					<!--S= 分界线-->
					<div class="product_l_line"></div>
					<!--E= 分解线-->
					<div class="product_l_bottom">
						<div class="p_l_b_product1 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>
						</div>
						<div class="p_l_b_product2 fl">
							<div class="buy fl">
								<div class="img"><s></s></div>
								<input type="button" class="btn" value="立即购买" />
							</div>
							<div class="explain fl">
								<p class="gift">新客有礼&nbsp;会员预约&nbsp;本月福利</p>
								<p class="importance">早餐理肤<br />很重要&nbsp;不可少</p>
								<p class="money"><span>239.00</span> <s>￥386.00</s></p>
								<p class="buyed">限量<em>99</em>件，已售出<em>20</em>件</p>
							</div>			
						</div>
					</div>					
				</div>
				<div class="product_r fr">
					<h2>化妆品咨询</h2>
					<ul>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
						<li><s></s><a href="#">化妆品2019年7月29日价格行情</a></li>
					</ul>
				</div>
			</div>
		<!--E= 具体信息-->
		<!--E= 重复一份-->
		
		<!--S= 友情链接-->
			<div class="link">
				<p class="link_p1">友情链接：<a href="#">百度</a>&nbsp;<a href="#">谷歌</a>&nbsp;<a href="#">搜狗</a>&nbsp;<a href="#">搜狐</a>&nbsp;<a href="#">腾讯</a>&nbsp;<a href="#">阿里巴巴</a>&nbsp;<a href="#">京东</a>&nbsp;<a href="#">淘宝</a>&nbsp;<a href="#">谷歌</a>&nbsp;<a href="#">搜狗</a>&nbsp;<a href="#">搜狐</a>&nbsp;<a href="#">腾讯</a>&nbsp;<a href="#">阿里巴巴</a>&nbsp;<a href="#">京东</a>&nbsp;<a href="#">淘宝</a>&nbsp;<a href="#">谷歌</a>&nbsp;<a href="#">搜狗</a>&nbsp;<a href="#">搜狐</a>&nbsp;<a href="#">腾讯</a>&nbsp;<a href="#">阿里巴巴</a>&nbsp;<a href="#">京东</a>&nbsp;<a href="#">淘宝</a>&nbsp;</p>
				<p class="link_p2"><a href="#">百度</a>&nbsp;<a href="#">谷歌</a>&nbsp;<a href="#">搜狗</a>&nbsp;<a href="#">搜狐</a>&nbsp;<a href="#">腾讯</a>&nbsp;<a href="#">阿里巴巴</a>&nbsp;<a href="#">京东</a>&nbsp;<a href="#">淘宝</a>&nbsp;</p>
			</div>
		<!--E= 友情链接-->
		
		<!--S= 关于我们-->
			<div class="aboutMe">
				<p><a href="#">关于我们</a> | <a href="#">网站建设</a> | <a href="#">诚聘英才</a> | <a href="#">友情链接</a> | <a href="#">联系方式</a> | <a href="#">隐私声明</a> | <a href="#">版权声明</a></p>
				<p>服务热线: 0123-0000000 | 邮箱: 123456789@qq.com</p>
				<p>版权所有:lementi美容护肤 | 地址:深圳市区</p>
			</div>
		<!--E= 关于我们-->
		
	</body>
</html>

css如下:
common.css：

/*写公共样式,避免公共样式重复写*/
@charset "utf-8";
.fl {
	float: left;
}
.fr {
	float: right;
}

网站首页样式：

/*写首页样式*/
@charset "utf-8";
html {
	font: 12px "宋体";
}
a {
	color: #000;
}
.top {
	background-color: #F7F7F7;
	height: 26px;
	border-bottom: 1px solid #D8D8D8;
}
.top_page {
	width: 970px;
	height: 26px;
	margin: 0 auto;
}
.top_page_l {
	line-height: 26px;
}
.top_page_r ul li {
	float: left;
	padding-left: 12px;
	line-height: 26px;
}
.top_page_r li s {
	width: 14px;
	height: 7px;
	display: inline-block;
	margin-left: 2px;
	background: url("../img/lementi精灵图.png");
	vertical-align: middle;
}
.top_page_r li:hover a {
	color: deepskyblue;
}
.top_page_r li:hover s {
	background-position: -20px 0;
}
.logo {
	width: 970px;
	height: 100px;
	margin: 0 auto;
}
.logo_l {
	width: 127px;
	height: 100px;
	background: url("../img/logo_02.png");
	text-indent: -9999em;
	overflow: hidden;
}
.logo_r {
	width: 530px;
	height: 44px;
	border: 1px solid #c9c9c9;
	box-sizing: border-box;
	margin-top: 28px;
}
.logo_r_content {
	margin: 5px;
}
.logo_r_search {
	width: 420px;
	height: 30px;
	border: 1px solid #c9c9c9;
	color: #999;
	box-sizing: border-box;
	padding-left: 7px;
}
.logo_r_btn {
	width: 98px;
	height: 30px;
	color: #fff;
	background-color: #0266A3;
}
.nav {
	width: 970px;
	height: 25px;
	margin: 5px auto;
	border-bottom: 2px solid #0266A3;
}
.nav li {
	padding: 0 15px 0 15px;
	font-size: 14px;
	line-height: 25px;
	float: left;
	font-weight: 700;
}
.nav li a {
	color: #0266A3;
}
.nav li:hover {
	background-color: deepskyblue;
}
.nav li:hover a {
	color: #fff;
}
.banner {
	width: 970px;
	height: 210px;
	margin: 0 auto;
	margin-top: 10px;
}
.subNav {
	width: 200px;
	height: 210px;
}
.ad {
	width: 520px;
	height: 210px;
	background-color: yellow;
	margin-left: 11px;
	background: url("../img/lementi精灵图.png") 0 -20px;
	position: relative;
}
.message {
	width: 230px;
	height: 210px;
}
.subNav h2 {
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: 700;
	background-color: #0266A3;
	color: #fff;
}
.subNav ul {
	height: 180px;
	background-color: #EBF0F6;
}
.subNav s {
	width: 15px;
	height: 13px;
	display: inline-block;
	background: url("../img/lementi精灵图.png") -39px 0;
	vertical-align: middle;
	/*margin-right: 7px;*/
}
.subNav li {
	font-size: 14px;
	padding-top:11px ;
	padding-left: 9px;
}
.subNav li a {
	padding-left: 15px;
}
.subNav li:hover s {
	background-position: -60px 0;
	vertical-align: middle;
}
.subNav li:hover a {
	color: deepskyblue;
}
.ad ul{
	width: 60px;
	height: 20px;
	background: rgba(255,255,255,0.3);
	border-radius: 10px;
	position: absolute;
	bottom: 10px;
	left: 50%;
	margin-left: -30px;
}
.ad ul li {
	float: left;
	width: 12px;
	height: 12px;
	background-color: #fff;
	border-radius: 50%;
	margin: 4px;
}
.ad ul .current {
	background-color: #0266A3;
}
.message_top {
	height: 95px;
	border: 1px solid #ddd;
	background-color: #f7faff;
	margin-bottom: 21px;
}
.message_top s {
	width: 40px;
	height: 40px;
	display: inline-block;
	background: url("../img/lementi精灵图.png") 0 -240px;
	margin: 15px 10px 0 20px; /*设置padding不能改变位置，还是以盒子的左上角开始对齐*/
}
.message_top .fw {
	padding: 7px 0 0 18px;
	font-weight: 700;
}
.message_top .cheap {
	margin: 20px 0 0 20px;
}
.message_top .cheap:hover a {
	color: #0266A3;
}
.message_bottom {
	height: 92px;
	background-color: #F7F7F7;
	/*border: 1px solid #ddd;*/
}
.message_bottom .findmessage {
	text-align: center;
	font-size: 14px;
	padding-top: 10px;  /*嵌套块级元素垂直外边距的合并,不能用margin*/
}
.message_bottom .phone {
	margin-top: 10px;
	text-align: center;
	color: #3f9ce0;
}
.message_bottom .phone s {
	width: 14px;
	height: 17px;
	display: inline-block;
	background: url("../img/lementi精灵图.png") -50px -240px;
	vertical-align: middle;
	margin-right: 10px;
}
.message_bottom .btn {
	width: 80px;
	height: 30px;
	background: url("../img/lementi精灵图.png") -70px -240px;
	margin: 5px 0 0 75px;
}
.material {
	width: 970px;
	height: 34px;
	border-top: 2px solid #C3D7E4;
	margin: 0 auto;
	margin-top: 14px;
	line-height: 34px;
	background: #ECF1F7;
	font-weight: 700;
	padding-left: 20px;
	box-sizing: border-box;
}
.product {
	width: 970px;
	height: 345px;
	/*background-color: red;*/
	margin: 0 auto;
	margin-top: 12px;
}
.product .product_l {
	width: 738px;
	height: 345px;
	/*background-color: pink;*/
	border: 1px solid #D8D8D8;
}
.product .product_l_top,.product .product_l_bottom {
	width: 738px;
	height: 172px;
	/*background-color: yellow;*/
	padding: 17px 0 0 26px;
	box-sizing: border-box;
}
/*S= product_l_top*/
.product .product_l_top .p_l_t_product1,.product .product_l_top .p_l_t_product2 {
	width: 350px;
	height: 146px;
	/*background-color: blue;*/
}
.product_l_top .p_l_t_product1 .buy,.product_l_top .p_l_t_product2 .buy {
	width: 100px;
	height: 145px;
	/*background-color: teal;*/
}
.product_l_top .p_l_t_product1 .buy .img,.product_l_top .p_l_t_product2 .buy .img {
	height: 99px;
	border: 1px solid #CACACA;
	padding: 15px 4px 0 4px;
	box-sizing: border-box;
}
.product_l_top .p_l_t_product1 .buy .img s,.product_l_top .p_l_t_product2 .buy .img s {
	width: 90px;
	height: 62px;
	display: inline-block;
	background: url("../img/lementi精灵图.png") -180px -240px;
}
.product_l_top .p_l_t_product1 .buy .btn,.product_l_top .p_l_t_product2 .buy .btn {
	width: 99px;
	height: 26px;
	background-color: #0A84E3;
	color: #fff;
	margin-top: 18px;
} 
.product_l_top .p_l_t_product1 .explain,.product_l_top .p_l_t_product2 .explain {
	width: 250px;
	height: 145px;
	/*background-color: red;*/
}
.product_l_top .p_l_t_product1 .explain .gift,.product_l_top .p_l_t_product2 .explain .gift {
	font-size: 14px;
	padding: 7px 0 0 12px;
}
.product_l_top .p_l_t_product1 .explain .importance,.product_l_top .p_l_t_product2 .explain .importance {
	line-height: 16px;
	color: #863E01;
	padding: 12px 0 0 20px;
}
.product_l_top .p_l_t_product1 .explain .money,.product_l_top .p_l_t_product2 .explain .money {
	padding: 20px 0 0 12px;
} 
.product_l_top .p_l_t_product1 .explain span,.product_l_top .p_l_t_product2 .explain span {
	color: red;
}
.product_l_top .p_l_t_product1 .explain s,.product_l_top .p_l_t_product2 .explain s {
	text-decoration: line-through;
}
.product_l_top .p_l_t_product1 .explain .buyed,.product_l_top .p_l_t_product2 .explain .buyed {
	font-size: 14px;
	padding: 22px 0 0 12px;
}
.product_l_top .p_l_t_product1 .explain .buyed em,.product_l_top .p_l_t_product2 .explain .buyed em {
	color: red;
	font-size: 16px;
}
/*E= product_l_top*/
.product_l_line {
	border-top: 1px solid #ccc;
	margin: 0 4px 0 4px;
}
/*S= product_l_bottom*/
.product .product_l_bottom .p_l_b_product1,.product .product_l_bottom .p_l_b_product2 {
	width: 350px;
	height: 146px;
	/*background-color: blue;*/
}
.product_l_bottom .p_l_b_product1 .buy,.product_l_bottom .p_l_b_product2 .buy {
	width: 100px;
	height: 145px;
	/*background-color: teal;*/
}
.product_l_bottom .p_l_b_product1 .buy .img,.product_l_bottom .p_l_b_product2 .buy .img {
	height: 99px;
	border: 1px solid #CACACA;
	padding: 15px 4px 0 4px;
	box-sizing: border-box;
}
.product_l_bottom .p_l_b_product1 .buy .img s,.product_l_bottom .p_l_b_product2 .buy .img s {
	width: 90px;
	height: 62px;
	display: inline-block;
	background: url("../img/lementi精灵图.png") -180px -240px;
}
.product_l_bottom .p_l_b_product1 .buy .btn,.product_l_bottom .p_l_b_product2 .buy .btn {
	width: 99px;
	height: 26px;
	background-color: #0A84E3;
	color: #fff;
	margin-top: 18px;
} 
.product_l_bottom .p_l_b_product1 .explain,.product_l_bottom .p_l_b_product2 .explain {
	width: 250px;
	height: 145px;
	/*background-color: red;*/
}
.product_l_bottom .p_l_b_product1 .explain .gift,.product_l_bottom .p_l_b_product2 .explain .gift {
	font-size: 14px;
	padding: 7px 0 0 12px;
}
.product_l_bottom .p_l_b_product1 .explain .importance,.product_l_bottom .p_l_b_product2 .explain .importance {
	line-height: 16px;
	color: #863E01;
	padding: 12px 0 0 20px;
}
.product_l_bottom .p_l_b_product1 .explain .money,.product_l_bottom .p_l_b_product2 .explain .money {
	padding: 20px 0 0 12px;
} 
.product_l_bottom .p_l_b_product1 .explain span,.product_l_bottom .p_l_b_product2 .explain span {
	color: red;
}
.product_l_bottom .p_l_b_product1 .explain s,.product_l_bottom .p_l_b_product2 .explain s {
	text-decoration: line-through;
}
.product_l_bottom .p_l_b_product1 .explain .buyed,.product_l_bottom .p_l_b_product2 .explain .buyed {
	font-size: 14px;
	padding: 22px 0 0 12px;
}
.product_l_bottom .p_l_b_product1 .explain .buyed em,.product_l_bottom .p_l_b_product2 .explain .buyed em {
	color: red;
	font-size: 16px;
}
/*E= product_l_bottom*/
.product .product_r {
	width: 230px;
	height: 347px;
	/*background-color: green;*/
	border-top: 1px solid #E0E6F0;
	border-right: 1px solid #E0E6F0;
	border-bottom: 1px solid #E0E6F0;
	box-sizing: border-box;
}
.product_r h2 {
	height: 28px;
	line-height: 28px;
	padding-left: 15px;
	border-bottom: 1px solid #E0E6F0;
}
.product_r ul {
	padding-top: 10px;
}
.product_r li {
	line-height: 24px;
	padding-left: 26px;
}
.product_r li s {
	width: 7px;
	height: 7px;
	display: inline-block;
	background: url("../img/lementi精灵图.png") -20px -300px;
	vertical-align: middle;
	margin-right: 5px;
}
.product_r li:hover a {
	color: #00BFFF;
}
.product_r li:hover s {
	background-position: -30px -300px;
}
.link {
	width: 970px;
	height: 103px;
	margin: 0 auto;
	margin-top: 12px;
	border-top: 1px solid #ddd;
	color: #666;
}
.link .link_p1 {
	margin-top: 30px;
}
.link .link_p2 {
	margin: 14px 0 0 61px;
}
.link a:hover {
	color: #00BFFF;
}
.aboutMe {
	width: 970px;
	height: 91px;
	margin: 0 auto;
}
.aboutMe p {
	text-align: center;
	margin-top: 12px;
}
.aboutMe p a:hover {
	color: #00BFFF;
}

希望大家都能有所收获，加油喔

经常肥猫

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
2
评论
简易的网站首页开发

自己花了点时间写了一个简单网站的首页，包括布局，html+css，适合初学者，仅供参考。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>lementi美容护肤</title> <link rel="stylesheet...
复制链接

扫一扫