小米商城+html+css+js完整项目

最新推荐文章于 2025-11-16 22:52:52 发布

原创

最新推荐文章于 2025-11-16 22:52:52 发布 · 631 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

小米商城+html+css+js完整项目

CSS部分代码设计模块
/* 顶部广告 start */
.header {
width: 100%;
height: 120px;
overflow: hidden;
position: relative;
}

.header img {
height: 120px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 顶部广告 end */

/* 黑色导航 start /
.black-nav {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333;
font-size: 12px;
}
.wrap {
width: 1226px;
margin: 0 auto;
}
.black-nav .wrap .black-nav-left {
float: left;
}
/ less sass … */
.black-nav .wrap .black-nav-right {
float: right;
}

.black-nav .wrap li {
float: left;
position: relative;
}

.black-nav a {
color: #b0b0b0;
}

.black-nav .wrap li span {
color: #424242;
margin: 0 3.6px;
}

.download {
width: 124px;
height: 0px;
background: #fff;
box-shadow: 0 1px 5px #aaa;
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
z-index: 10;
overflow: hidden;
}

.download img {
width: 90px;
margin: 18px auto 0;
}

.download p {
color: #333;
font-size: 12px;
line-height: 12px;
}

.black-nav-left li:hover > .download {
height: 148px;
}

.stri {
width: 0;
height: 0;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
display: none;
}

.black-nav-left > li:hover > .stri {
display: block;
}

.cart {
width: 120px;
height: 40px;
background-color: #424242;
margin-left: 25px;
}

.cart:hover {
background: #fff;
}

.cart:hover > a {
color: #ff6700;
}

.cart i {
font-style: normal;
margin-right: 8px;
}

.cart-list {
width: 316px;
height: 0px;
background: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
position: absolute;
right: 0;
top: 40px;
color: #424242;
overflow: hidden;
line-height: 100px;
z-index: 10;
}

.cart:hover > .cart-list {
height: 100px;
}

/* 黑色导航 end */

/* 白色导航 start */

.white-nav {
width: 100%;
height: 100px;
background-color: #fff;
position: relative;
}

.logo {
width: 55px;
height: 55px;
background-color: #ff6700;
float: left;