313 lines
5.3 KiB
CSS
313 lines
5.3 KiB
CSS
/* 申明字体图标 这里需要注意路径的变化*/
|
|
@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;
|
|
}
|
|
|
|
|
|
/* 1.导航栏样式开始 */
|
|
|
|
.shortcut {
|
|
/* width: 100%; */
|
|
height: 30px;
|
|
line-height: 30px;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
}
|
|
.text_center{
|
|
text-align: center;
|
|
}
|
|
.shortcut ul li {
|
|
float: left;
|
|
}
|
|
|
|
.style_red {
|
|
color: #c81623;
|
|
}
|
|
|
|
|
|
/* 选择所有偶数的小li */
|
|
|
|
.shortcut .right ul li:nth-child(even) {
|
|
width: 1px;
|
|
height: 12px;
|
|
background-color: #666;
|
|
margin: 9px 15px 0;
|
|
}
|
|
.arrow-icon::after{
|
|
/* margin-left: 6px; */
|
|
font-family: 'icomoon';
|
|
content: '\e91e';
|
|
|
|
|
|
}
|
|
/* header头部样式制作 */
|
|
.header{
|
|
position: relative;
|
|
height: 105px;
|
|
/* background-color: skyblue; */
|
|
}
|
|
.header .logo{
|
|
position: absolute;
|
|
line-height: 105px;
|
|
left: 0;
|
|
}
|
|
.search{
|
|
position: absolute;
|
|
width: 540px;
|
|
height: 38px;
|
|
left: 0;
|
|
top: -25px;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
.search input{
|
|
border: 2px solid #b1191a;
|
|
border-right: 0;
|
|
width: 460px;
|
|
height: 38px;
|
|
border-radius: 0;
|
|
padding-left: 10px;
|
|
|
|
}
|
|
.search button{
|
|
float: right;
|
|
border-radius: 0;
|
|
height: 100%;
|
|
width: 80px;
|
|
background-color: #b1191a;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
.shopping_car{
|
|
position: absolute;
|
|
height: 38px;
|
|
width: 140px;
|
|
top: 20px;
|
|
right: 63px;
|
|
background-color:#f7f7f7;
|
|
line-height: 38px;
|
|
text-align: center;
|
|
border: 1px solid #dfdfdf;
|
|
|
|
}
|
|
.shopping_car::before{
|
|
font-family: 'icomoon';
|
|
content: '\e93a';
|
|
font-size: 20px;
|
|
color:#b1191a;
|
|
}
|
|
|
|
|
|
.shopping_car a{
|
|
float: right;
|
|
margin-right: 20px;
|
|
font-weight: 400;
|
|
}
|
|
.search_content{
|
|
position: absolute;
|
|
width: 540px;
|
|
height: 20px;
|
|
left: 0;
|
|
top: 50px;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
.search_content ul li a{
|
|
margin-left: 20px;
|
|
}
|
|
.count{
|
|
top: -5px;
|
|
left: 100px;
|
|
position: absolute;
|
|
height: 15px;
|
|
line-height: 14px;
|
|
color: white;
|
|
background-color: #b1191a;
|
|
padding: 0 5px;
|
|
border-radius: 7px 7px 7px 0;
|
|
}
|
|
.nav{
|
|
height: 47px;
|
|
border-bottom: 2px solid #b1191a;
|
|
}
|
|
.nav .dropdown{
|
|
float: left;
|
|
width: 210px;
|
|
height: 45px;
|
|
background-color: #b1191a;
|
|
}
|
|
|
|
.nav .navtimes{
|
|
float: left;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
}
|
|
.nav .navtimes ul li{
|
|
float: left;
|
|
}
|
|
.nav .navtimes ul li a{
|
|
height: 45px;
|
|
padding: 0 25px;
|
|
font-size: 16px;
|
|
}
|
|
.nav .navtimes ul li {
|
|
color: #b1191a;
|
|
}
|
|
|
|
.dropdown .dt{
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #ffffff;
|
|
line-height: 45px;
|
|
text-align: center;
|
|
font-size: 16px;
|
|
}
|
|
.dropdown .dd{
|
|
/* display: none; */
|
|
/* overflow: hidden; */
|
|
width: 210px;
|
|
height: 465px;
|
|
background-color: #c81623;
|
|
|
|
}
|
|
.dropdown .dd ul li:hover{
|
|
background-color: #ffffff;
|
|
|
|
}
|
|
.dropdown .dd ul li:hover a{
|
|
color: #c81623;
|
|
}
|
|
.dropdown .dd ul li{
|
|
height: 31px;
|
|
line-height: 31px;
|
|
margin-left: 2px;
|
|
padding-left: 10px;
|
|
|
|
}
|
|
.dropdown .dd ul li::after{
|
|
content: '\e920';
|
|
font-family: 'icomoon';
|
|
float: right;
|
|
color: #ffffff;
|
|
margin-right: 5px;
|
|
}
|
|
.dropdown .dd ul li:hover::after{
|
|
color: #c81623;
|
|
}
|
|
.dropdown .dd ul li a{
|
|
font-size: 14px;
|
|
color: #ffffff;
|
|
}
|
|
.footer{
|
|
/* position: absolute;
|
|
bottom: 0;
|
|
top: 1000px; */
|
|
width: 100%;
|
|
height: 415px;
|
|
background-color: #f5f5f5;
|
|
padding-top: 30px;
|
|
}
|
|
.mod_service{
|
|
height: 80px;
|
|
border-bottom: 1px solid #ccc;
|
|
}
|
|
.mod_service .service_text{
|
|
margin-top: 5px;
|
|
}
|
|
.mod_service ul li {
|
|
float: left;
|
|
width: 300px;
|
|
height: 50px;
|
|
/* background-color: pink; */
|
|
padding-left: 35px;
|
|
}
|
|
.mod_service ul li h5{
|
|
float: left;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 8px;
|
|
background: url(../images/icons.png) no-repeat;
|
|
}
|
|
.zhengpin{
|
|
background-position: -253px -3px !important;
|
|
}
|
|
.wuliu{
|
|
background-position: -255px -53px !important;
|
|
}
|
|
.shouhou{
|
|
background-position: -257px -105px !important;
|
|
}
|
|
.help{
|
|
background-position: -257px -157px !important;
|
|
}
|
|
.service_text h4{
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
}
|
|
.service_text p{
|
|
font-size: 12px;
|
|
}
|
|
.mod_help{
|
|
/* padding-left: 20px; */
|
|
height: 190px;
|
|
border-bottom: 1px solid #ccc;
|
|
/* margin-left: 5px; */
|
|
}
|
|
|
|
.mod_help dl{
|
|
float: left;
|
|
margin-right: 50px;
|
|
margin-top: 25px;
|
|
margin-left: 50px;
|
|
}
|
|
.mod_help dl dt{
|
|
font-size: 16px;
|
|
padding-bottom: 15px;
|
|
font-weight: 600;
|
|
}
|
|
.mod_help dl dt dd a{
|
|
font-size: 14px;
|
|
color: black;
|
|
}
|
|
.mod_copyright{
|
|
height: 50px;
|
|
/* font-size: 10px; */
|
|
margin-left: 5px;
|
|
}
|
|
.mod_copyright a{
|
|
line-height: 50px;
|
|
border-right: 1px solid #666;
|
|
margin: 15px 0px;
|
|
padding: 0 15px;
|
|
}
|
|
.mod_copyright a:last-child{
|
|
border: 0;
|
|
}
|
|
.lifeservice ul li{
|
|
float: left;
|
|
overflow: hidden;
|
|
}
|