品优购商城制作2

页面样式

1.首页

/* 新的样式文件注意要引入 */
/* 定义main盒子的宽度注意,版心宽度1200,全部商品分类dropdown盒子的宽度是210,dropdown和焦点图之间有10px的间距,所以main盒子剩余宽度:980 */
.main {
	width: 980px;
	/* 给main盒子高度后里面浮动的盒子可以不用清除浮动，原因是浮动的盒子不占位置 */
	height: 457px;
	/* 通过给main盒子外边距，让main盒子移动到右侧,移动距离为左侧盒子宽度加间距，不要盖住详细列表盒子 */
	margin-left: 220px;
	margin-top: 10px;
}
/* 焦点图盒子给宽高,左浮 */
.main .focus {
	float: left;
	width: 722px;
	height: 457px;
	background-color: blueviolet;
}
/* 快报盒子给宽高,右浮,定位到盒子右侧 */
.main .newsflash {
	float: right;
	width: 251px;
	height: 457px;
	
}
.newsflash .news {
	width: 251px;
	height: 164px;
	border: 1px solid #e4e4e4;
}
.news .news-hd {
	/* 给高度,虚线边框 ，设置文字水平居中，左右内边距*/
	height: 36px;
	border-bottom: 1px dotted #e4e4e4;
	line-height: 36px;
	padding: 0 15px;
}
/* 给a链接一个after伪元素 */
.news-hd .more::after {
	font-family: 'icomoon';
	content: "\e920";
}
.news-hd h5 {
	float: left;
	font-size: 14px;
}
.news-hd .more {
	float: right;
}
/* 给li设置行高,让文字行间距变高 */
.news-bd ul li {
	height: 24px;
	padding: 5px 15px 0;
}
/* 设置溢出文字省略号显示 分三步，溢出隐藏，文字必须一行显示，超出部分用省略号代替*/
.news-bd ul li a {
	display: inline-block;
	width: 192px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* 设置lifeservice盒子4个边框后,通过none属性去掉上边框 */
/* ul宽度252,比父盒子lifeservice宽1px,通过溢出隐藏调整边框 */
.newsflash .lifeservice {
	width: 251px;
	height: 213px;
	border: 1px solid #e4e4e4;
	border-top: none;
	overflow: hidden;
}
/* 外层lifeservice盒子宽度251,4个li的宽度252,宽度超出,给li的父盒子ul一个足够的宽度,即可让4个li在一行显示 */

.lifeservice ul
{
	width: 252px;
}


/* 给每个li一个高度,宽度,右,底边框,加左浮动 */
.lifeservice ul li {
	position: relative;
	float: left;
	width: 63px;
	height: 71px;
	border-right: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	text-align: center;
	
}
/* i转换给行内块,给宽高,放精灵图 */
.lifeservice ul li i {
	display: inline-block;
	width: 24px;
	height: 28px;
	margin-top: 12px;
}
.lifeservice ul li .one {
	background: url(../images/icons.png) no-repeat -17px -15px;
}
.lifeservice ul li .two {
	background: url(../images/icons.png) no-repeat -80px -15px;
}
.lifeservice ul li .three {
	background: url(../images/icons.png) no-repeat -142px -15px;
}
.lifeservice ul li .fore {
	background: url(../images/icons.png) no-repeat -204px -15px;
}
.lifeservice ul li .five {
	background: url(../images/icons.png) no-repeat -14px -85px;
}
.lifeservice ul li .six {
	background: url(../images/icons.png) no-repeat -75px -85px;
}
.lifeservice ul li .seven {
	background: url(../images/icons.png) no-repeat -140px -85px;
}
.lifeservice ul li .eight {
	background: url(../images/icons.png) no-repeat -206px -85px;
}
.lifeservice ul li .nine {
	background: url(../images/icons.png) no-repeat -14px -158px;
}
.lifeservice ul li .ten {
	background: url(../images/icons.png) no-repeat -79px -158px;
}
.lifeservice ul li .eleven {
	background: url(../images/icons.png) no-repeat -140px -158px;
}
.lifeservice ul li .twe {
	background: url(../images/icons.png) no-repeat -206px -158px;
}
.lifeservice ul li i .jian {
	position: absolute;
	top: 0;
	right :0;
	width: 13px;
	height: 15px;
	background-color: #589d5a;
	color: #ffffff;
	line-height: 15px;
	text-align: center;
}
.newsflash .bargain {
	margin-top: 9px;
}
/* 推荐模块开始 */
.recom {
	height: 163px;
	background-color: #8A2BE2;
	margin-top: 10px;
}
.recom .recom_hd {
	float: left;
	width: 208px;
	height: 163px;
	background-color: #5c5251;
	text-align: center;
	padding-top: 30px;
}
.recom .recom_bd {
	float: left;
	width: 992px;
	height: 163px;
	background-color: #ebebeb;
}
.recom_bd ul li {
	position: relative;
	/* 将li的高度,宽度写死,可以保证不论图片大小都能填充到每个li里面,占用空间一样 */
	width: 245px;
	height: 163px;
	float: left;
	background-color: #B1191A;
}
/* 每个li后面有个小竖线,实现方法是:给每个li一个after伪元素,定义竖线的高度,宽度,颜色，这里最后一个li后面没有竖线，所以通过nth-child（—n+3)选出3之前的li ,注意将竖线定位到每个li的最右侧*/
.recom_bd ul li:nth-child(-n+3)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 10px;
	width: 1px;
	height: 144px;
	background-color: #ddd;
}
/* 猜你喜欢部分开始*/
.like {
	margin-top: 12px;
	height: 268px;
}
.like .like_hd {
	height: 36px;
	
}
.like_hd h3 {
	float: left;
	width: 74px;
	height: 37px;
	font-size: 18px;
	text-align: center;
	line-height: 37px;
	font-weight: 400;
}
.like_hd .change {
	float: right;
	width: 80px;
	height: 37px;
	font-size: 12px;
	text-align: center;
	line-height: 37px;
}
.change p {
	float: left;
}
.change span {
	float: left;
	display: inline-block;
	margin-left: 7px;
	width: 23px;
	height: 23px;
	background: url(../images/icons.png) no-repeat -418px -103px;
}
.like .like_bd {
	height: 232px;
	border: 1px solid #ededed;
}
.like_bd ul li {
	position: relative;
	float: left;
	width: 198px;
	height: 232px;
	
	text-align: center;
}
/* 每个li后面有个小竖线,实现方法是:给每个li一个after伪元素,定义竖线的高度,宽度,颜色，这里最后一个li后面没有竖线，所以通过nth-child（—n+5)选出5之前的li ,注意将竖线定位到每个li的最右侧*/
.like_bd ul li:nth-child(-n+5)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 157px;
	width: 1px;
	height: 64px;
	background-color: #ddd;
}

.like_bd ul li i {
	display: inline-block;
	width: 198px;
	height: 154px;
}
.like_bd ul li p {
	width: 126px;
	margin-left: 34px;
	height: 36px;
	line-height: 22px;
	text-align: left;
	
}
.like_bd ul li h4 {
	width: 126px;
	height: 20px;
	margin-top: 6px;
	margin-left: 34px;
	text-align: left;
	font-size: 18px;
	color: #df3033;
   
}
/* 猜你喜欢部分结束*/
/* 楼层区域开始 */
/* 定义头部区域的高度,加底部边框 */
/* 给w一个margin值是因为其他楼层也需要,方便一并统一处理 */
.floor .w {
	margin-top: 30px;
}
.jiadian .box_hd {
	height: 32px;
	border-bottom: 2px solid #c81623;
}
/* 头部上部分分左右,一个h3,一个tabliest盒子 */
.box_hd h3 {
	float: left;
	font-size: 18px;
	color: #c81623;
	font-weight: 400;
}
/* 盒子里的文字垂直居中 */
.box_hd .table_list {
	float: right;
	line-height: 32px;
}

.table_list ul li {
	float: left;
}
/* 给每个a一个左右的padding值拉开间距 */
.table_list ul li a {
	padding :0 15px;
}
/* 定义主体部分的高度 */
.jiadian .box_bd {
	height: 360px;
	
}
/* 用大于号,子代选择器,只选择table_list_item的亲儿子div给样式 */
.table_list_item>div {
	float: left;
}
/* 定义每个盒子的宽度样式,col_210代表宽度210的类，盒子直接调用该类即可 */
/* 定义第一个盒子的样式，高度和父盒子一样高，给背景色 ，设置水平居中，*/
.col_210 {
	width: 210px;
	/* 高度和父盒子box_bd一样高 */
	height: 360px;
	background-color: #f9f9f9;
	/* 给盒子加水平居中,让盒子里的内容都水平居中 */
	text-align: center;
}
/* 具体间距的实现,给每个ul一个padding-left值,让左侧空出距离,给每个li一个margin-right值,空出右侧和中间的间隙 */
.col_210 ul
{
	padding-left: 12px;
}
/* 定义每个li的宽高,下边框,给浮动，文字水平，垂直居中 */

.col_210 ul li {
	float: left;
	margin-right: 10px;
	width: 84px;
	height: 32px;
	border-bottom: 1px solid #ededed;
	text-align: center;
	line-height: 32px;
}
.col_329 {
	width: 329px;
}
/* 第3.4盒子一样宽,不用定义重复类,直接调用一个即可 */
.col_221 {
	width: 221px;
    border-right: 1px solid #DDDDDD;
}
.col_219 {
	width: 219px;
}
/* 给每个a指定一个下边框,实现边框效果,一般情况下, a如果是一个包含有宽度的盒子,a需要转换为块级元素 */
.bb {
	display: block;
	border-bottom: 1px solid #DDDDDD;
}

.shouji .box_hd {
	margin-top: 30px;
	height: 32px;
	border-bottom: 2px solid #c81623;
}
.shouji .box_bd {
	height: 360px;
	
}
.diannao .box_hd {
	margin-top: 30px;
	height: 32px;
	border-bottom: 2px solid #c81623;
}
.diannao .box_bd {
	height: 360px;
	
}
/* 楼层区域结束 */

2.列表页

/* header盒子有相对定位,通过定位,将秒杀盒子定位到header盒子的指定区域 */
.sk {
	position: absolute;
	left: 186px;
	top: 40px;
	/* 给秒杀盒子一个做边框 */
	border-left: 1px solid #b1191a;
	/* 给盒子一个padding值,上3，右0，下0，左16，让边框和里面的内容有一个间隔 */
	padding: 3px 0 0 16px;
}
.sk_list {
	float: left;
}
.sk_list ul li {
	float: left;
}
.sk_list ul li a {
	display: block;
	/* 父盒子nav的高度是48,定义文字垂直居中,line-height=height */
	line-height: 48px;
	font-weight: 700;
	font-size: 16px;
	padding: 0 30px;
}
.sk_con {
	float: left;
}
.sk_con ul li {
	float: left;
}
.sk_con ul li a {
	display: block;
	/* 父盒子nav的高度是48,定义文字垂直居中,line-height=height */
	/* 为了让sk_con里面a的文字底部和sk_list里面a的文字底部一样齐,将text-align的高度设置的比行高大一点,文字可以下移; */
	line-height: 50px;
	font-size: 14px;
	padding: 0 22px;
}
/* 最后面一个li带一个下三角,通过last-child选出最后一个li,给最后一个li里面的a加after伪元素，字体图标下三角 */
.sk_con ul li:last-child a::after {
	content: "\e91e";
	font-family: 'icomoon';
}
/* ul没有给高度,里面的盒子都是浮动的,所以不占位置,想让ul里面的内容自然撑开,给ul清除浮动即可. */
.sk_bd ul {
	overflow:hidden
}
.sk_bd ul li {
	float: left;
	width: 290px;
	height: 460px;
	text-align: center;
	/* 每个li之间有一个14px的间距 */
	margin-right: 13px;
}
/* 每行最后一个li没有14px的外边距,清除每行最后一个li的外边距,4n代表4的倍数 */
.sk_bd ul li:nth-child(4n) {
	margin-right: 0;
}
.sk_bd ul li p {
	margin-top: 30px;
	text-align: left;
	height: 36px;
	line-height: 21px;
	font-size: 14px;
	color: #c1c1c1;
	padding: 0 12px;
}
.sk_bd ul li h3 {
	margin-top: 20px;
	text-align: left;
	padding-left: 12px;
	font-size: 22px;
	color: #C81623;
}
.sk_bd ul li h3 i {
	font-size: 14px;
	color: #aeaeae;
	text-decoration: line-through;
	font-style: normal;
}
.sk_bd ul li .shouchu {
	padding-left: 12px;
	text-align: left;
	font-size: 14px;
	color: #aeaeae;
}
.shouchu span {
	font-size: 16px;
	color: #C81623;
}
.shouchu .bar {
	display: inline-block;
				width: 133px;
				height: 14px;
				border: 1px solid red;
			/* 设置圆角边框 ，值为盒子高度的一半*/
				border-radius: 7px;
				/* 进度条和父盒子间有一个间距 */
				padding: 1px 0;
			}
.shouchu .sons {
				width: 87%;
				height: 100%;
				border-radius: 7px;
				background-color: #C81623;
				/* 给子盒子加过渡 */
				transition:width 1s;
			}
.sk_bd ul li .qianggou {
	margin-top: 13px;
	height: 52px;
	background-color: #b1191a;
	font-size: 20px;
	color: #FFFFFF;
	line-height: 52px;
}

3.注册页

.w {
	width: 1200px;
	margin: 0 auto;
}
.w .header {
	height: 86px;
	border-bottom: 2px solid #b1191a;
}
/* 这里给logopadding值而不是给margin值,是因为用margin会发生外边距合并的问题,子盒子的外边距会引起父盒子下移 */
.header .logo {
	padding-top: 20px;
}
/* 主体区域,有一个外边框,定义大小 */
.registerarea {
	height: 523px;
	border: 1px solid #dfdfdf;
	margin-top: 20px;
}
.registerarea h3 {
	height: 43px;
	background-color: #ececec;
	line-height: 43px;
	padding: 0 10px;
	font-size: 18px;
	font-weight: 400;
}
.registerarea h3 .logi {
	float: right;
	font-size: 14px;
}
h3 .logi a {
	color: #c81623;
}
/* 中间部分在页面的居中显示,给盒子宽度，利用margin设置盒子居中 */
.registerarea .reg_form {
	width: 600px;
	margin: 0 auto;
}
.reg_form ul {
	margin-top: 54px;
}
/* 每个li之间有个间隙,给li一个下外边距 */
.reg_form ul li {
	margin-bottom: 20px;
}
.reg_form ul li label {
	/* label标签是行内元素,给宽度要转换为行内块元素 */
	display: inline-block;
	width: 90px;
	text-align: right;
}
/* input定义宽高用一个类名定义,防止影响后面input大小，需要的input调用此类 */
.reg_form ul li .inp {
	width: 240px;
	height: 38px;
	border: 1px solid #C1C1C1;
}
/* 输入错误的样式写法 */
.reg_form ul li .error {
	color: #df3033;
	margin-right: 15px;
}
.reg_form ul li .error_icon {
	/* 定义一个图标的盒子,里面放一个背景图标,盒子要有宽高,i是行内元素,给宽高先转换为行内块 */
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../images/输入错误.png) no-repeat;
	/* 要实现图标和文字垂直居中,通过vertical-align: middle;来实现 */
	vertical-align: middle;
	/* 图标偏下,给margin-top负值,向上移动 */
	margin-top: -2px;
}
/* 输入正确的样式写法 */
.reg_form ul li .success {
	color: #40B83F;
	margin-right: 15px;
}
.reg_form ul li .success_icon {
	/* 定义一个图标的盒子,里面放一个背景图标,盒子要有宽高,i是行内元素,给宽高先转换为行内块 */
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../images/对勾1.png) no-repeat;
	/* 要实现图标和文字垂直居中,通过vertical-align: middle;来实现 */
	vertical-align: middle;
	/* 图标偏下,给margin-top负值,向上移动 */
	margin-top: -2px;
}
/* 安全程度部分靠右一些,给li一个padding值,往右移动一下 */
.reg_form ul .safe {
	padding-left: 180px;
}
.safe em {
	display: inline-block;
	padding: 0 10px;
	color: #FFFFFF;
	/* 倾斜的字体不倾斜 */
	font-style: normal; 
}
.safe .ruo {
	background-color: #de1111;
}
.safe .zhong {
	background-color: #40b83f
}
.safe .qiang {
	background-color: #f79100
}
/* 给li一个padding-left,让其右移 */
.agree {
	padding-left: 100px;
}
/* 实现选框和文字垂直居中效果 */
.agree input {
	vertical-align: middle;
}
.agree a {
	color: #1ba1e6;
}
/* 完成注册按钮 */
.btn {
	width: 202px;
	height: 36px;
	background-color: #c81623;
	color: #fff;
	margin: 30px 0 0 100px;
}
/* 底部第三部分版权模块,里面内容居中显示 */
.mod_copyright {
	text-align: center;
	padding-top: 20px;
}
.mod_copyright .links {
	margin-bottom: 15px;
}
/* 设置行高提升行间距 */
.mod_copyright .copyright {
	line-height: 20px;
}
/* css3盒子模型可以给行内元素左右的边距，不能设置上下，给每个a一个左右的外边距,上下0，使距离拉开 */
.links a {
	margin: 0 10px;
}
/* 底部公共样式结束 */

4.公共样式（用于页面头部底部相同内容的公共样式）

/* 快捷导航栏开始 */
/* 声明字体图标 */
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tomleg');
  src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tomleg') format('truetype'),
    url('../fonts/icomoon.woff?tomleg') format('woff'),
    url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.w {
	/* 定义版心宽度,居中对齐 */
	width: 1200px;
	margin: 0 auto;
}
/* 定义导航栏,给高度,给背景色 */
.shotcult {
	height: 31px;
	/* 导航栏中的所有内容都垂直居中 */
	line-height: 31px;
	background-color: #f1f1f1;
}
/* 导航栏里一个左盒子 */
.fl {
	float: left;
}
/* 导航栏里一个有盒子 */
.fr {
	float: right;
}
/* 定义导航栏中的每个li都左浮动,显示在一行上 */
.shotcult ul li {
	float: left;
}
/* 定义一个公共的颜色属性,用于相同颜色的字体调用 */
.style_red {
	color: red;
}
/* 导航栏里面的小竖线的实现方式,定义一个li盒子,宽度为1,指定高度和背景色 */
/* 给所有小竖线指定样式的方法,通过nth-child(even)选出所有的偶数li指定样式 */
.shotcult .fr ul li:nth-child(even) {
	width: 1px;
	height: 13px;
	background-color: #666666;
	/* 通过给小竖线margin值,上边距，让小竖线下移,左右边距，隔开文字 */
	margin: 9px 14px 0;
}
/* 通过after伪元素在元素内部的后面添加内容，即在每个li的后面添加一个三角图标 */
.arrow-icon::after {
	/* 小箭头属于字体图标,添加字体图标,然后调用改字体图标 */
	font-family: 'icomoon';
	content: "\e91e";
	/* 给字体图标设置一个左边距,使文字和图标距离隔开 */
	margin-left: 6px;
}
/* 快捷导航栏结束 */
/* header区域开始 */
.header {
	/* 应用子绝父相,logo用绝对定位,header用相对定位 */
	position: relative;
	height: 106px;
}
.header .logo {
	/* 使用绝对定位将logo盒子定位在header的左侧 */
	position: absolute;
	top: 27px;
	/* logo盒子的宽度和高度是根据图片的尺寸设置的 */
	width: 171px;
	height: 61px;
}
/* 将链接中的文字隐藏 */
.header .logo a {
	/* a是行内元素没有大小,将a转化为块级元素,从而方便给大小 */
	display: block;
/* 将a转化为块级元素,设置为何logo一样大小,然后将logo的背景图给a */
	width: 171px;
	height: 61px;
	/* 通过no-repeat设置背景图不重复 */
	background: url(../images/logo.png) no-repeat;
	font-size: 0;
}
/* search模块 */
/* 测量盒子的宽度和高度,此处应用css3盒子模型,padding和border值不会撑大盒子,所以测量的时候加边框一起测量 */
.search {
	/* 使用绝对定位,定位到父盒子指定位置 */
	position: absolute;
	left: 347px;
	top: 27px;
	width: 540px;
	height: 36px;
/* 设定边框宽度和颜色 */
	border: 2px solid #b1191a;
	
}
/* input表单和button按钮是行内块元素,他们之间会有一定的缝隙,可以通过加浮动实现在一行上显示 */
.search input {
	/* 注意测量宽高的时候不要量边框,边框是外盒子的 */
	float: left;
	width: 454px;
	height: 32px;
	/* input表单里文字与表单边框之间有一定的距离,通过padding值来实现 */
	padding-left: 10px;
}
.search button {
	float: left;
	width: 82px;
	height: 32px;
	background-color: #b1191a;
	font-size: 16px;
	color: #ffffff;
}
/* 将hotwods模块定位到search盒子的指定位置 */
.hotwords {
	position: absolute;
	/* 左侧距离同search盒子一样 */
	left: 347px;
	top: 69px;
}
/* 每个a之间有固定的宽度,可以给每个a一个左右的margin值,行内元素可以直接给左右的margin值*/
.hotwords a {
	margin: 0 10px;
}
.shopcar {
	position: absolute;
	right: 65px;
	top: 27px;
	width: 140px;
	height: 34px;
	border: 1px solid #dfdfdf;
	background-color: #f7f7f7;
	/* 盒子里的文字水平垂直居中 */
	text-align: center;
	line-height: 34px;
}
/* 通过before和after伪元素实现在盒子的内部的前面和后面各添加一个字体图标 */
.shopcar::before {
	content: "\e93a";
	/* 通过已声明的font-family引入字体图标 */
	font-family: 'icomoon';
	margin-right: 5px;
	color: #dc6161;
	
}
.shopcar::after {
	content: "\e920";
	font-family: 'icomoon';
	margin-left: 10px;
}
.shopcar .cont {
	/* 父盒子shoper有绝对定位,子盒子也可以使用绝对定位 ，这里用left而不是用right是结合自然规律，当购物车数字变大时，自然左对齐，数字靠右显示。*/
	position: absolute;
	top: -5px;
	left: 105px;
	/* 给盒子加一个左右的padding值撑开盒子 */
	padding: 0 5px;
	/* 因为子盒子继承父盒子的行高,所以数字8没有完全显示在子盒子里,这里需要重新定义子盒子的行高 */
	line-height: 15px;
	/* 盒子是圆角边框,其中一个直角,通过border-radius设置; 直角用0，圆角是高度的一半*/
	border-radius: 7px 7px 7px 0;
	/* 因为cont里面放的数字可大可小,所以不要定位宽度,只给高度,宽度让盒子的内容自然撑开盒子 */
	height: 15px;
	color: #F1F1F1;
	background-color: #e60012;
}
/* header区域结束 */
/* nav导航模块开始 */
.nav {
	/* nav是通栏盒子,只给高度,不给宽度,高度要量边框,因为css3边框不会撑大盒子 */
	height: 48px;
	border-bottom: 2px solid #b1191a;
}
/* 给nav里面的两个盒子加浮动,让两个盒子在一行显示 */
.nav .dropdown {
	float: left;
	width: 210px;
	height: 46px;
	background-color: #b1191a;
}
.dropdown .dt {
	/* dt的宽度和高度100%设置和父盒子一样宽，背景色无需设置，继承父盒子颜色 */
	width: 100%;
	height: 100%;
	/* 设置字体颜色,字号，居中方式 */
	color: #FFFFFF;
	font-size: 16px;
	text-align: center;
	line-height: 46px;
}
.dropdown .dd {
	/* dd盒子压线,可以给一个2px(因为边框的高度是2px)的magin-top值,将盒子下移 */
	/* dd的盒子暂时隐藏 */
	/* display: none; */
	margin-top: 2px;
	height: 467px;
	width: 210px;
	background-color: #c81623;
}
.nav .navitems {
	float: left;
}
.dd ul li {
	position: relative;
	/* 指定li的高度,宽度继承父盒子dd的宽度 */
	height: 31px;
	/* 每个li与外盒子dd有个2px的间距,通过margin外边距来实现 */
	margin-left: 2px;
    /* 文字缩进通过padding值来实现 */
	padding-left: 14px;
	line-height: 31px;
}
/* 通过给每个li一个after伪元素,添加字体图标,加上小箭头 */
.dd ul li::after {
	content: "\e920";
	font-family: 'icomoon';
	/* 通过定位,将箭头定位到li盒子的右侧，所以li需要加相对定位 */
	position: absolute;
	top: 1px;
	right: 10px;
	color: #FFFFFF;
}
.dd ul li a {
	font-size: 14px;
	color: #FFFFFF;
}
/* 鼠标移动到li上,背景色变成白色. */
.dd ul li:hover {
	background-color: #FFFFFF;
}
/* 同时,鼠标移动到li上,a里面的字体颜色改成红色 */
.dd ul li:hover a {
	color: #c81623;
}
.navitems ul li {
	/* 给navitems盒子里的每个li加浮动显示在一行 */
	float: left;
}
/* 此处每个关键词设置样式,通过a来设置,高度,不给宽度,通过padding撑开每个盒子,a是行内元素,需要转换为行内块,设置文字垂直居中 */
.navitems ul li a {
	display: block;
	height: 46px;
	line-height: 46px;
	font-size: 16px;
	color: #333333;
	/* 测量两个关键词间距离是50px,所以给每个a左右的padding值是25px */
	padding: 0 25px;
}
/* 鼠标移动到每个词上字体颜色变成红色 */
.navitems ul li a:hover {
	color: #C81623;
}
/* nav导航模块结束 */
/* 底部公共样式开始 */
.footer {
	height: 420px;
	background-color: #f5f5f5;
	/* 给通栏大盒子一个内边距,使里面的内容下移 */
	padding-top: 20px;
}
.footer .mod_service {
	/* 第一模块盒子有一个下边框,设定好高度即可 */
	height: 80px;
	border-bottom: 1px solid #DFDFDF;
	padding-left: 37px;
}
.mod_service li {
	float: left;
     /* 版心宽度1200,5个li平均分配,每个li的宽度是300 */
	 width: 240px;
	 height: 53px;
}
.mod_service li:last-child {
	width: 184px;
}
.mod_service h5 {
	/* h5盒子里放图标,定义h5的宽度和高度,给背景色,通过给图标盒子加浮动,实现文字环绕图片显示的效果 */
	float: left;
	width: 50px;
	height: 50px;
	/* 图标和文字描述之间有个空隙,给图标盒子一个margin外边距 */
	margin-right: 8px;
}
.mod_service ul li .one {
	/* 将精灵图用ps打开,打开窗口—信息面板,选框选中精灵图,可以得到X,Y轴的坐标值; */
	background: url(../images/icons.png) no-repeat -252px -2px;
}
.mod_service ul li .two {
	/* 将精灵图用ps打开,打开窗口—信息面板,选框选中精灵图,可以得到X,Y轴的坐标值; */
	background: url(../images/icons.png) no-repeat -254px -54px;
}
.mod_service ul li .three {
	/* 将精灵图用ps打开,打开窗口—信息面板,选框选中精灵图,可以得到X,Y轴的坐标值; */
	background: url(../images/icons.png) no-repeat -256px -105px;
}
.mod_service ul li .fore {
	/* 将精灵图用ps打开,打开窗口—信息面板,选框选中精灵图,可以得到X,Y轴的坐标值; */
	background: url(../images/icons.png) no-repeat -258px -156px;
}
.mod_service ul li .five {
	/* 将精灵图用ps打开,打开窗口—信息面板,选框选中精灵图,可以得到X,Y轴的坐标值; */
	background: url(../images/icons.png) no-repeat -255px -208px;
}
.service_txt h4 {
	font-size: 14px;
	font-weight: 700;
}
.service_txt p {
	font-size: 12px;
}
/* 定义第二层盒子高度,底边框,上,左内边距 */
.footer .mod_help {
	height: 189px;
	border-bottom: 1px solid  #DFDFDF;
	padding-top: 20px;
	padding-left: 50px;
}
/* 总的版心1200宽,一共6个dl,每个dl200 外层盒子有个内边距50，所以最后一个盒子宽度150以内*/
.mod_help dl {
	float: left;
	width: 200px;
}
/* 通过last-child定义最后一个dl的宽度为100px，同时最后一个dl里的内容是水平居中显示 */
.mod_help dl:last-child {
	width: 100px;
	text-align: center;
}
/* 定义dt里面文字的大小,给dt底外边距,使dt和dd分开 */
.mod_help dl dt {
	font-size: 16px;
	margin-bottom: 10px;
}
.mod_help dl dd {
	font-size: 12px;
}
/* 底部第三部分版权模块,里面内容居中显示 */
.mod_copyright {
	text-align: center;
	padding-top: 20px;
}
.mod_copyright .links {
	margin-bottom: 15px;
}
/* 设置行高提升行间距 */
.mod_copyright .copyright {
	line-height: 20px;
}
/* css3盒子模型可以给行内元素左右的边距，不能设置上下，给每个a一个左右的外边距,上下0，使距离拉开 */
.links a {
	margin: 0 10px;
}
/* 底部公共样式结束 */

5.基础样式

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0;
	/* css3盒子模型 */
	box-sizing:border-box;
}
/* em 和 i 斜体的文字不倾斜 
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
	/* 手动去除input和button的默认灰色边框,outline是去掉表单选中时的默认蓝色边框 */
	border: 0;
	outline: none;
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}