First Commit
This commit is contained in:
进进啊
312
shopping/css/common.css
Normal file
312
shopping/css/common.css
Normal file
@@ -0,0 +1,312 @@
|
||||
/* 申明字体图标 这里需要注意路径的变化*/
|
||||
@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;
|
||||
}
|
||||
Reference in New Issue
Block a user