代码我放在这里了哈!有帮助到你的话,可以点点关注嘛嘿嘿😍
css
@charset "UTF-8";
/*css 初始化 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img {
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
}
fieldset,
img,
input,
button {
border: none;
padding: 0;
margin: 0 0 0 22px;
outline-style: none;
}
/*去掉边框、去掉轮廓(比如输入框外面的蓝边框)*/
/*去掉列表前面的圆点*/
ul,
ol {
list-style: none;
}
input {
padding-top: 0;
padding-bottom: 0;
}
/*字体一般是指定这两个*/
select,
input {
vertical-align: middle;
}
select,
input,
textarea {
font-size: 12px;
margin: 0;
}
textarea {
resize: none;
}
/*禁止文本输入框在右下角拖拽(因为拖动后会调整输入框大小)*/
img {
border: 0;
vertical-align: middle;
margin: 0;
}
/* 去掉图片底侧默认的3像素空白缝隙*/
table {
border-collapse: collapse;
}
body {
font: 12px/1.5 Microsoft YaHei, tahoma, arial, Hiragino Sans GB, \\5b8b\4f53, sans-serif;
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
font-weight: normal;
font-stretch: normal;
font-size: 12px;
line-height: 1.5;
font-family: "Microsoft YaHei", tahoma, arial, "Hiragino Sans GB", "\\5b8b体", sans-serif;
color: #666;
}
/*start:清除浮动【推荐此方式进行清除浮动】。左浮动和右浮动都清除了,盒子刚好达到闭合的状态*/
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
*zoom: 1;
/*IE/7/6*/
}
/*end:清除浮动*/
a {
color: #666;
text-decoration: none;
}
/*去掉超链接的下划线*/
a:hover {
color: #C81623;
}
/*鼠标悬停时的颜色*/
h1,
h2,
h3,
h4,
h5,
h6 {
text-decoration: none;
font-weight: normal;
font-size: 100%;
}
/*font-size:100% 的意思是:让它们和父亲一样大,避免在不同的浏览器中显示大小不一致*/
s,
i,
em {
font-style: normal;
text-decoration: none;
}
/*去掉i标签和em的斜体,取消s标签的删除线*/
.col-red {
color: #C81623 !important;
}
/*公共类*/
.w {
/*版心(可视区)。需要专门提取出来 */
width: 1190px;
margin: 0 auto;
}
.fl {
float: left
}
.fr {
float: right
}
.al {
text-align: left
}
.ac {
text-align: center
}
.ar {
text-align: right
}
.hide {
display: none
}
.index {
background-color: #f0f3ef;
}
.shortcut {
border-bottom: 1px solid #ddd;
background-color: #e3e4e5;
}
.shortcut .w {
height: 30px;
line-height: 30px;
color: #999;
}
.mycity {
margin-left: 200px;
}
.dt {
position: relative;
padding: 0 20px 0 0px;
overflow: hidden;
height: 30px;
}
.dt i {
position: absolute;
top: 14px;
right: 4px;
width: 14px;
height: 6px;
overflow: hidden;
text-align: center;
}
.dt i s {
position: relative;
top: -14px;
font-size: 16px;
}
.shortcut .style-red {
color: #f10215;
}
.shortcut li {
float: left;
}
.shortcut li.spacer {
width: 1px;
margin: 10px 11px;
height: 10px;
background-color: #ccc;
}
.mobile_static {
width: 66px;
height: 66px;
border: 1px solid #cfcfcf;
position: relative;
left: -11px;
}
.mobile_static::before {
content: "";
border-bottom: solid #f6f6f6 5px;
width: 0;
height: 0;
display: block;
border-left: solid transparent 5px;
border-right: solid transparent 5px;
position: absolute;
top: -5px;
left: 29px;
}
.mobile_static_qrcode {
background: url(../images/mobile_qrcode.png);
width: 100%;
height: 100%;
background-repeat: no-repeat;
margin: 3px;
}
.top-banner {
background-color: #fd6500;
}
.top-banner div {
width: 1210px;
height: 80px;
margin: 0 auto;
position: relative;
}
.close-banner {
position: absolute;
right: 0px;
top: 4px;
width: 19px;
height: 19px;
background: url(../images/close-banner.png) no-repeat;
}
.close-banner:hover {
background-position: bottom;
}
.header .w {
height: 140px;
position: relative;
}
.header .logo {
background: url('../images/sprite.head.png') no-repeat;
width: 190px;
height: 170px;
box-shadow: 0 -12px 10px rgba(0, 0, 0, .2);
position: absolute;
top: -31px;
border-bottom: 1px solid #ededed;
background-color: #fff;
text-indent: -9999px;
}
.search {
width: 544px;
height: 35px;
position: absolute;
left: 320px;
top: 25px;
}
.search input {
font-size: 14px;
height: 25px;
width: 440px;
padding: 5px 44px 5px 5px;
}
.search span {
background: url(../images/sprite-photo-search.png) no-repeat;
display: inline-block;
width: 19px;
height: 15px;
position: absolute;
right: 68px;
top: 9px;
overflow: hidden;
cursor: pointer;
}
.search span:hover {
background-position-x: -30px;
}
.search button {
background-color: #f10215;
color: #fff;
margin: 0px 0 0 -3px;
width: 50px;
height: 35px;
vertical-align: bottom;
cursor: pointer;
}
.shopping-cart {
width: 188px;
height: 33px;
background-color: #fff;
position: absolute;
top: 25px;
right: 112px;
text-align: center;
line-height: 33px;
/* vertical-align: top; */
border: 1px solid #e3e4e5;
}
.shopping-cart i {
position: absolute;
}
.shopping-cart i.cart {
background: url('../images/sprite.cart.png') no-repeat;
overflow: hidden;
width: 18px;
background-position: 0 -50px;
height: 22px;
left: 36px;
}
.shopping-cart i.cart-count {
width: 14px;
height: 14px;
background-color: #f10215;
border-radius: 50%;
margin: 5px 0 0 5px;
color: #fff;
text-align: center;
line-height: 14px;
}
.shopping-cart a {
color: #f10214;
}
.hotwords {
width: 550px;
height: 20px;
position: absolute;
top: 64px;
left: 320px;
line-height: 20px;
}
.hotwords a {
float: left;
margin-right: 10px;
white-space: nowrap;
}
.hotwords .style-red {
color: #f10215;
width: 70px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.navitems {
width: 790px;
height: 40px;
position: absolute;
top: 100px;
left: 230px;
line-height: 40px;
}
.navitems li {
float: left;
margin-left: 30px;
font-size: 14px;
}
.navitems .spacer {
float: left;
width: 1px;
height: 16px;
background-color: #ccc;
margin: 12px 20px;
}
.navitems li:first-child {
margin-left: 0;
}
.slogan {
padding: 30px 0;
border-bottom: 1px solid #dedede;
}
.slogan li {
float: left;
width: 258px;
margin-left: 38px;
}
.slogan h5 {
width: 36px;
height: 42px;
text-indent: -99999px;
float: left;
}
.slogan-1 {
background: url('../images/sprite.footer.png') no-repeat 0 -192px;
}
.slogan-2 {
background: url('../images/sprite.footer.png') no-repeat -41px -192px;
}
.slogan-3 {
background: url('../images/sprite.footer.png') no-repeat -82px -192px;
}
.slogan-4 {
background: url('../images/sprite.footer.png') no-repeat -123px -192px;
}
.slogan li p {
line-height: 42px;
font-size: 18px;
font-weight: 700;
margin-left: 50px;
color: #444;
}
.help {
padding: 20px 0;
}
.help h5 {
margin-bottom: 5px;
font-size: 14px;
font-weight: 700;
}
.help-list li {
line-height: 22px;
}
.help-list {
float: left;
width: 198px;
}
.help-cover {
width: 200px;
height: 150px;
background: url('../images/sprite.footer.png') no-repeat;
}
.help-cover h5 {
margin-bottom: 15px;
font-size: 14px;
text-align: center;
}
.help-cover-more {
text-align: right;
}
.copyright {
border-top: 1px solid #e1e1e1;
padding: 15px 0;
text-align: center;
}
.copyright-links a {
margin: 0px 5px;
}
.copyright-info {
padding: 10px 0;
line-height: 22px;
color: #999;
}
.copyright a {
position: relative;
}
.copyright-inter i {
width: 15px;
height: 14px;
position: absolute;
top: 3px;
left: -20px;
}
.copyright-inter-lk-1 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -108px -155px;
}
.copyright-inter-lk-2 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -168px -155px;
}
.copyright-inter-lk-3 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -148px -155px;
}
.copyright-inter-lk-4 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -128px -155px;
}
.copyright-inter-lk-5 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -108px -172px;
}
.copyright-inter a {
margin: 0 10px 0 28px;
}
.copyright-auth {
margin: 25px 0;
}
.copyright-auth a {
display: inline-block;
width: 103px;
height: 32px;
margin: 0 2px;
}
.copyright-auth-ico-1 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -205px -148px;
}
.copyright-auth-ico-2 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -205px -111px;
}
.copyright-auth-ico-3 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -205px -74px;
}
.copyright-auth-ico-4 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -205px -37px;
}
.copyright-auth-ico-5 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: -205px 0;
}
.copyright-auth-ico-6 {
background: url('../images/sprite.footer.png') no-repeat;
background-position: 0 -155px;
}
.main {
height: 480px;
margin-bottom: 30px;
}
.main-nav ul {
width: 190px;
font-size: 14px;
line-height