前端CSS练习项目记录(从16到18）

其他 2018-09-14 16:09:01 阅读次数: 0

十六. 完成建材咨询

js/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/cssReset.css"/>
	<link rel="stylesheet" href="../css/index.css"/>
	<link rel="stylesheet" href="../css/common.css"/>
</head>
<body>
	<!-- S=页面的顶部 -->
	<div class="top">
		<div class="top_page">
			<div class="top_page_l fl">您好，欢迎来到建材网！</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><s></s></li>
					<li><a href="#">客服中心</a></li>
					<li><a href="#">网站导航</a><s></s></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- E=页面的顶部 -->
	<!-- S=logo -->
	<div class="logo">
		<!-- 这里h1的目的是为了强调 -->
		<h1 class="logo_l fl">梅兰商贸</h1>
		<div class="logo_r fr">
			<div class="logo_r_content">
				<input type="input" value="请输入关键字" class="logo_r_search fl">
				<input type="button" value="搜索" class="logo_r_btn fl">
			</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>
		</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"></div>
		<div class="message fr">
			<div class="message_top">
				<p class="fw">建材通大众版</p>
				<s class="fl"></s>
				<p class="ch fl">价格实惠，量身为预算不多</br>的供应商所设。<a href="#">了解详情</a></p>
			</div>
			<div class="message_bottom">
				<p class="findMessage">找信息或者发信息遇到问题？</p>
				<p class="phone"><s></s>0124-97342354</p>
				<input type="button" class="btn">
			</div>
		</div>
	</div>
	<!-- E=banner -->
	<div class="material">建筑材料</div>
	<!-- 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" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
			<div class="product_l_line"></div>
			<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" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
		</div>
		<div class="product_r fr">
			<h2>建材资讯</h2>
			<ul>
				<ul>
					<li><s></s><a href="#">贵阳钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">石家庄钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">南京钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">重庆钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">杭州钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">广州钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">武汉钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">攀枝花钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">上海钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">鞍山无缝管7月17日价格行情</a></li>
					<li><s></s><a href="#">济南焊管7月17日价格行情</a></li>
					<li><s></s><a href="#">上海钢材市场7月17日价格行情</a></li>
				</ul>
			</ul>
		</div>
	</div>
	
	<!-- E=具体信息 -->
</body>
</html>

css/index.css

@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 {
	line-height: 26px;
	float: left;
	padding-right: 10px;
}
 
.top_page_r ul li s {
	width: 18px;
	height: 14px;
	background: url(../image/sprite.png);
	display: inline-block;
	vertical-align: -3px;
}
 
 
.logo {
	width: 970px;
	height: 98px;
	/*center*/
	margin: 0 auto;
}
 
.logo_l {
	width: 190px;
	height: 55px;
	background: blue;
	margin: 24px 0 19px 9px;
	background: url(../image/sprite.png) -20px 0;
	/*	这里是为了让“梅兰商贸”几个字，用户不可见，但爬虫可见，提高被搜索引擎爬取的概率*/
	text-indent: -1000em;
}
 
.logo_r {
	width: 530px;
	height: 42px;
	border: 1px solid #C9C9C9;
	margin-top: 29px;
}
 
.logo_r_content {
	margin:5px 5px 5px 4px;
}
 
.logo_r_search {
	width: 418px;
	height: 28px;
	border: 1px solid #C9C9C9;
	color: #999999;
}
 
.logo_r_btn {
	width: 99px;
	height: 30px;
	color: white;
	background-color: #2F70D0;
}
 
.nav {
	width: 970px;
	height: 25px;
	margin: 0 auto;
	border-bottom: 2px solid #0266A3;
}
.nav li {
	padding: 0 15px 0 15px;
	line-height: 25px;
	float: left;
	font-size: 14px;
	font-weight: bold;
}
 
.nav li a {
	color: #0266A3;
}
 
.nav li:hover {
	background-color: #0266A3;
}
 
.nav li:hover a {
	color: white;
}
 
.banner {
	width: 970px;
	height: 210px;
	margin: 0 auto;
	margin-top: 10px;
}
 
.subNav {
	width: 200px;
	height: 210px;
	margin-right: 11px;
	background-color: #E8F0F8;
}
 
.ad {
	width: 520px;
	height: 210px;
	background: url(../image/material.jpg);
}
 
.message {
	width: 230px;
	height: 210px;
}
 
.subNav h2 {
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	background-color: #0266A3;
	color: white;
}
 
.subNav s {
	display: inline-block;
	width: 15px;
	height: 13px;
	background: url(../image/sprite.png) -212px 0;
	vertical-align: middle;
}
 
.subNav li {
	font-size: 15px;
	padding-top: 11px;
	margin-left: 9px;
}
 
.subNav li a {
	padding-left: 15px;
}
 
.message_top {
	height: 95px;
	boreder: 1px solid #DDDDDD;
	background: #f7faff;
	margin-bottom: 21px;
}
 
.message_top s {
	margin: 20px 10px 0 10px;
	display: inline-block;
	height: 44px;
	width: 44px;
	background: url(../image/sprite.png) -229px 0;
}
 
.message_top .fw {
	font-weight: bold;
	padding: 7px 0 0 18px;
}
 
.message_top .ch {
	margin-top: 25px;
}
 
.message_bottom {
	height: 94px;
	background: #f7faff;
}
 
.message_bottom .findMessage {
	text-align: center;
	font-size: 14px;
	padding-top: 11px;
}
 
.message_bottom .phone {
	margin-top: 10px;
	text-align: center;
	color: #3F9CE0;
	font-size: 14px;
}
 
.message_bottom .phone s{
	/*设置宽高之前，一定要设置如下这行*/
	display: inline-block;
	width: 14px;
	height: 17px;
	background: url(../image/sprite.png) -274px 0;
	vertical-align: middle;
	margin-right: 6px;
}
 
.message_bottom .btn {
	width: 85px;
	height: 23px;
	background: url(../image/sprite.png) -300px -3px;
	margin-top: 9px;
	margin-left: 75px;
}
 
.material {
	width: 950px;
	height: 34px;
	border-top: 2px  solid #C3D7E4;
	margin: 0 auto;
	margin-top: 14px;
	padding-left: 20px;
	line-height: 34px;
	background: #ECF1F7;
	font-weight: bold;
}
 
.product {
	width: 970px;
	height: 345px;
	margin: 0 auto;
	margin-top: 12px;
}
 
.product .product_l {
	width: 738px;
	height: 345px;
	border: 1px solid #D8D8D8;
}
 
.product .product_l_top {
	width: 712px;
	height: 154.5px;
	padding: 17px 0 0 26px;
}
 
.product .p_l_t_product1 {
	width: 350px;
	height: 146px;
 
 
}
 
.product .buy {
	width: 99px;
	height: 143px;
}
 
.product .buy .img {
	height: 100px;
	border: 1px solid #CACACA;
}
 
.product .buy .img s {
	display: inline-block;
	width: 90px;
	height: 62px;
	background: url(../image/sprite.png) 0 -62px;
	margin: 10px 4px 0 3px;
}
 
.product .buy .btn {
	width: 99px;
	height: 26px;
	background-color: #0A84E3;
	color: white;
	margin-top: 15px;
}
 
.product .explain {
	width: 250px;
	height: 143px;
}
 
.product .explain .goodWife {
	font-size: 14px;
	padding: 10px 0 0 10px;
}
 
.product .explain .auto {
	color: #863E01;
	padding: 13px 0 0 15px;
}
 
.product .explain .money {
	padding: 23px 0 0 11px;
}
 
.product .explain .money span {
	color: red;
}
 
.product .explain .money s {
	text-decoration: line-through;
}
 
.product .explain .buyed {
	font-size: 14px;
	padding: 28px 0 0 11px;
}
 
.product .product_r {
	width: 220px;
	height: 345px;
	border: 1px solid #E0E6F0;
}
 
.product_l_line {
	margin: 0 4px 0 4px;
	border-top: 1px solid #CCC;
}
 
.product h2 {
	height: 28px;
	line-height: 28px;
	padding-left: 15px;
	border-bottom: 1px solid #E0E6F0;
}
 
.product_r ul {
	padding-top: 11px;
}
 
.product_r li {
	line-height: 23px;
	padding-left: 16px;
}
 
.product_r s {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url(../image/sprite.png) -285px -38px;
	margin-right: 10px;
	vertical-align: middle;
}

效果图

十七. 完成友情链接 + 十八. 完成关于我们

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="../css/cssReset.css"/>
	<link rel="stylesheet" href="../css/index.css"/>
	<link rel="stylesheet" href="../css/common.css"/>
</head>
<body>
	<!-- S=页面的顶部 -->
	<div class="top">
		<div class="top_page">
			<div class="top_page_l fl">您好，欢迎来到建材网！</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><s></s></li>
					<li><a href="#">客服中心</a></li>
					<li><a href="#">网站导航</a><s></s></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- E=页面的顶部 -->
	<!-- S=logo -->
	<div class="logo">
		<!-- 这里h1的目的是为了强调 -->
		<h1 class="logo_l fl">梅兰商贸</h1>
		<div class="logo_r fr">
			<div class="logo_r_content">
				<input type="input" value="请输入关键字" class="logo_r_search fl">
				<input type="button" value="搜索" class="logo_r_btn fl">
			</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>
		</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"></div>
		<div class="message fr">
			<div class="message_top">
				<p class="fw">建材通大众版</p>
				<s class="fl"></s>
				<p class="ch fl">价格实惠，量身为预算不多</br>的供应商所设。<a href="#">了解详情</a></p>
			</div>
			<div class="message_bottom">
				<p class="findMessage">找信息或者发信息遇到问题？</p>
				<p class="phone"><s></s>0124-97342354</p>
				<input type="button" class="btn">
			</div>
		</div>
	</div>
	<!-- E=banner -->
	<div class="material">建筑材料</div>
	<!-- 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" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
			<div class="product_l_line"></div>
			<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" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
		</div>
		<div class="product_r fr">
			<h2>建材资讯</h2>
			<ul>
				<ul>
					<li><s></s><a href="#">贵阳钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">石家庄钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">南京钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">重庆钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">杭州钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">广州钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">武汉钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">攀枝花钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">上海钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">鞍山无缝管7月17日价格行情</a></li>
					<li><s></s><a href="#">济南焊管7月17日价格行情</a></li>
					<li><s></s><a href="#">上海钢材市场7月17日价格行情</a></li>
				</ul>
			</ul>
		</div>
	</div>
	<!-- E=具体信息 -->
	<div class="zy"></div>
	<div class="material">建筑材料</div>
	<!-- 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" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
			<div class="product_l_line"></div>
			<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" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
				<div class="p_l_t_product1 fl">
					<div class="buy fl">
						<div class="img"><s></s></div>
						<input type="button" value="立即购买" class="btn">
					</div>
					<div class="explain fl">
						<p class="goodWife">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
						<p class="auto">自动换挡&nbsp;安全耐用</br>稳定性好&nbsp;抗氧化强</p>
						<p class="money"><span>239.00</span> <s>￥386.00</s></p>
						<p class="buyed">限量99件，已售22件</p>
					</div>
				</div>
			</div>
		</div>
		<div class="product_r fr">
			<h2>建材资讯</h2>
			<ul>
				<ul>
					<li><s></s><a href="#">贵阳钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">石家庄钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">南京钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">重庆钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">杭州钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">广州钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">武汉钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">攀枝花钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">上海钢材市场7月17日价格行情</a></li>
					<li><s></s><a href="#">鞍山无缝管7月17日价格行情</a></li>
					<li><s></s><a href="#">济南焊管7月17日价格行情</a></li>
					<li><s></s><a href="#">上海钢材市场7月17日价格行情</a></li>
				</ul>
			</ul>
		</div>
	</div>
	<!-- E=具体信息 -->
	<!-- S=友情链接 -->
	<div class="link">
		<p class="link_p1">友情链接：百度&nbsp;新浪&nbsp;传智播客&nbsp;搜狐</p>
		<p class="link_p2">百度&nbsp;新浪&nbsp;传智播客&nbsp;搜狐</p>
	</div>
	<!-- E=友情链接 -->
	<!-- S=关于我们 -->
	<div class="aboutMe">
		<p>关于我们 | 建材通服务 | 网站建设 | 诚聘英才 | 友情链接</p>
		<p>@版权所有2000-2018 服务热线： 0571-8993888</p>
		<p>本站网络实名：中建网本站通用网址</p>
	</div>
	<!-- E=关于我们 -->
</body>
</html>

 css/inex.css

@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 {
	line-height: 26px;
	float: left;
	padding-right: 10px;
}
 
.top_page_r ul li s {
	width: 18px;
	height: 14px;
	background: url(../image/sprite.png);
	display: inline-block;
	vertical-align: -3px;
}
 
 
.logo {
	width: 970px;
	height: 98px;
	/*center*/
	margin: 0 auto;
}
 
.logo_l {
	width: 190px;
	height: 55px;
	background: blue;
	margin: 24px 0 19px 9px;
	background: url(../image/sprite.png) -20px 0;
	/*	这里是为了让“梅兰商贸”几个字，用户不可见，但爬虫可见，提高被搜索引擎爬取的概率*/
	text-indent: -1000em;
}
 
.logo_r {
	width: 530px;
	height: 42px;
	border: 1px solid #C9C9C9;
	margin-top: 29px;
}
 
.logo_r_content {
	margin:5px 5px 5px 4px;
}
 
.logo_r_search {
	width: 418px;
	height: 28px;
	border: 1px solid #C9C9C9;
	color: #999999;
}
 
.logo_r_btn {
	width: 99px;
	height: 30px;
	color: white;
	background-color: #2F70D0;
}
 
.nav {
	width: 970px;
	height: 25px;
	margin: 0 auto;
	border-bottom: 2px solid #0266A3;
}
.nav li {
	padding: 0 15px 0 15px;
	line-height: 25px;
	float: left;
	font-size: 14px;
	font-weight: bold;
}
 
.nav li a {
	color: #0266A3;
}
 
.nav li:hover {
	background-color: #0266A3;
}
 
.nav li:hover a {
	color: white;
}
 
.banner {
	width: 970px;
	height: 210px;
	margin: 0 auto;
	margin-top: 10px;
}
 
.subNav {
	width: 200px;
	height: 210px;
	margin-right: 11px;
	background-color: #E8F0F8;
}
 
.ad {
	width: 520px;
	height: 210px;
	background: url(../image/material.jpg);
}
 
.message {
	width: 230px;
	height: 210px;
}
 
.subNav h2 {
	padding-left: 20px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	font-weight: bold;
	background-color: #0266A3;
	color: white;
}
 
.subNav s {
	display: inline-block;
	width: 15px;
	height: 13px;
	background: url(../image/sprite.png) -212px 0;
	vertical-align: middle;
}
 
.subNav li {
	font-size: 15px;
	padding-top: 11px;
	margin-left: 9px;
}
 
.subNav li a {
	padding-left: 15px;
}
 
.message_top {
	height: 95px;
	boreder: 1px solid #DDDDDD;
	background: #f7faff;
	margin-bottom: 21px;
}
 
.message_top s {
	margin: 20px 10px 0 10px;
	display: inline-block;
	height: 44px;
	width: 44px;
	background: url(../image/sprite.png) -229px 0;
}
 
.message_top .fw {
	font-weight: bold;
	padding: 7px 0 0 18px;
}
 
.message_top .ch {
	margin-top: 25px;
}
 
.message_bottom {
	height: 94px;
	background: #f7faff;
}
 
.message_bottom .findMessage {
	text-align: center;
	font-size: 14px;
	padding-top: 11px;
}
 
.message_bottom .phone {
	margin-top: 10px;
	text-align: center;
	color: #3F9CE0;
	font-size: 14px;
}
 
.message_bottom .phone s{
	/*设置宽高之前，一定要设置如下这行*/
	display: inline-block;
	width: 14px;
	height: 17px;
	background: url(../image/sprite.png) -274px 0;
	vertical-align: middle;
	margin-right: 6px;
}
 
.message_bottom .btn {
	width: 85px;
	height: 23px;
	background: url(../image/sprite.png) -300px -3px;
	margin-top: 9px;
	margin-left: 75px;
}
 
.material {
	width: 950px;
	height: 34px;
	border-top: 2px  solid #C3D7E4;
	margin: 0 auto;
	margin-top: 14px;
	padding-left: 20px;
	line-height: 34px;
	background: #ECF1F7;
	font-weight: bold;
}
 
.product {
	width: 970px;
	height: 345px;
	margin: 0 auto;
	margin-top: 12px;
}
 
.product .product_l {
	width: 738px;
	height: 345px;
	border: 1px solid #D8D8D8;
}
 
.product .product_l_top {
	width: 712px;
	height: 154.5px;
	padding: 17px 0 0 26px;
}
 
.product .p_l_t_product1 {
	width: 350px;
	height: 146px;
 
 
}
 
.product .buy {
	width: 99px;
	height: 143px;
}
 
.product .buy .img {
	height: 100px;
	border: 1px solid #CACACA;
}
 
.product .buy .img s {
	display: inline-block;
	width: 90px;
	height: 62px;
	background: url(../image/sprite.png) 0 -62px;
	margin: 10px 4px 0 3px;
}
 
.product .buy .btn {
	width: 99px;
	height: 26px;
	background-color: #0A84E3;
	color: white;
	margin-top: 15px;
}
 
.product .explain {
	width: 250px;
	height: 143px;
}
 
.product .explain .goodWife {
	font-size: 14px;
	padding: 10px 0 0 10px;
}
 
.product .explain .auto {
	color: #863E01;
	padding: 13px 0 0 15px;
}
 
.product .explain .money {
	padding: 23px 0 0 11px;
}
 
.product .explain .money span {
	color: red;
}
 
.product .explain .money s {
	text-decoration: line-through;
}
 
.product .explain .buyed {
	font-size: 14px;
	padding: 28px 0 0 11px;
}
 
.product .product_r {
	width: 220px;
	height: 345px;
	border: 1px solid #E0E6F0;
}
 
.product_l_line {
	margin: 0 4px 0 4px;
	border-top: 1px solid #CCC;
}
 
.product h2 {
	height: 28px;
	line-height: 28px;
	padding-left: 15px;
	border-bottom: 1px solid #E0E6F0;
}
 
.product_r ul {
	padding-top: 11px;
}
 
.product_r li {
	line-height: 23px;
	padding-left: 16px;
}
 
.product_r s {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url(../image/sprite.png) -285px -38px;
	margin-right: 10px;
	vertical-align: middle;
}
 
.zy{
	width: 970px;
	height: 500px;
	background-color: teal;
	margin: 0 auto;
}
 
.link {
	width: 970px;
	height: 103px;
	margin: 0 auto;
	margin-top: 11px;
	border-top: 1px solid #DDDDDD;
	border-bottom: 3px solid #0A7EC3;
	color: #666666;
}
 
.link_p1 {
	margin-top: 30px;
}
 
.link_p2 {
	margin-top: 14px;
	margin-left: 60px;
}
 
.aboutMe {
	height: 91px;
	width: 970px;
	margin: 0 auto;
}
 
.aboutMe p {
	margin-top: 14px;
	text-align: center;
}

猜你喜欢

转载自blog.csdn.net/garrulousabyss/article/details/82703911
今日推荐
周排行
Grayscale的报告显示，机构投资者接受比特币
任意角度的场景文本检测论文简单总结
努力学习的意义
蒟蒻 Wendigo 表情包
Ubuntu 14.04 Install Sublime Text 3
守卫
python3中request.urlopen()和requests.get()方法的区别
花点时间顺顺Git（下）
docker安装ngnix进行挂载
spring boot 2 统一异常处理
每日归档
更多
2024-06-13(0)
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022