代码拉取完成,页面将自动刷新
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
/* 导航栏样式 */
.site-topbar {
position: relative;
height: 40px;
z-index: 30;
font-size: 12px;
color: #b0b0b0;
background: #333;
}
.container {
width: 1226px;
margin-right: auto;
margin-left: auto;
}
.topbar-nav {
float: left;
height: 40px;
line-height: 40px;
}
.container a {
font-size: 12px;
color: #b0b0b0;
text-decoration: none;
}
.container a:hover {
color: aliceblue;
}
.container .sep {
margin: 0 0.3em;
color: #424242;
}
.topbar-cart {
position: relative;
float: right;
width: 120px;
height: 40px;
line-height: 40px;
margin-left: 15px;
font-size: 12px;
background-color: #424242;
text-align: center;
}
.topbar-cart:hover {
background-color: white;
color: #FF7E00;
}
.topbar-cart:hover img {
content: url(./images/购物车2.png);
}
.topbar-cart:hover .cart-info {
display: block;
height: 100px;
}
.topbar-cart:hover .cart-info p {
display: block;
height: 100px;
}
.cart-info{
position: absolute;
right: 0px;
width: 300px;
height: 0;
transition: 0.5s;
font-size: 12px;
text-align: center;
color: #333;
box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
}
.cart-info p {
position: relative;
overflow: hidden;
height: 0;
top: 30%;
transition: 0.5s;
}
.topbar-cart img {
vertical-align: middle;
}
.topbar-info {
position: relative;
float: right;
height: 40px;
line-height: 40px;
}
.site-header {
position: relative;
height: 100px;
z-index: 20;
}
.header-logo {
float: left;
width: 62px;
margin-top: 22px;
}
.logo {
position: relative;
display: block;
width: 56px;
height: 56px;
overflow: hidden;
background: url(https://s02.mifile.cn/assets/static/image/logo-mi2.png) no-repeat;
background-size: 56px;
}
.header-nav {
float: left;
width: 850px;
}
.nav-list {
position: relative;
z-index: 10;
float: left;
width: 1100px;
height: 88px;
margin: 0;
padding: 12px 0 0 165px;
list-style-type: none;
font-size: 16px;
}
.nav-item {
float: left;
display: list-item;
padding: 26px 10px 38px;
width: auto;
white-space: nowrap;
}
.nav-list a {
font-size: 16px;
color: #333;
text-decoration: none;
}
.nav-list a:hover {
color: #FF7E00;
}
.item-children {
position: absolute;
display: none;
top: 100px;
left: -208px;
width: 1520px;
height: 200px;
background-color: #fff;
transition: 0.5s;
text-align: center;
border-top: 1px solid #c9c9c9;
box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.2);
}
.nav-item:hover .item-children {
display: block;
}
.children-list {
position: relative;
z-index: 10;
float: left;
width: 1100px;
height: 88px;
margin: 0;
padding: 12px 0 0 90px;
list-style-type: none;
font-size: 16px;
}
.children-item {
float: left;
display: list-item;
padding: 20px 10px 38px;
width: auto;
white-space: nowrap;
}
.children-item .title {
font-size: 10px;
}
.children-item .price {
font-size: 10px;
color: #FF7E00;
}
/* 主要内容样式 */
.home-hero-container {
position: relative;
z-index: 10;
width: 1226px;
height: 800px;
background-color: #b0b0b0;
}
/* 侧边栏样式 */
.aside {
position: fixed;
width: 80px;
height: 350px;
top: 250px;
right: 10px;
}
.aside div {
width: 100%;
height: 20%;
border: 1px solid rgb(245, 245, 245);
text-align: center;
color: rgb(164, 164, 164);
}
.phone:hover {
color: #FF7E00;
}
.phone:hover img {
content: url(./images/手机2.png);
}
.user:hover {
color: #FF7E00;
}
.user:hover img {
content: url(./images/个人中心2.png);
}
.server:hover {
color: #FF7E00;
}
.server:hover img {
content: url(./images/售后服务2.png);
}
.helper:hover {
color: #FF7E00;
}
.helper:hover img {
content: url(./images/人工客服2.png);
}
.shopcar:hover {
color: #FF7E00;
}
.shopcar:hover img {
content: url(./images/购物车3.png);
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。