⼩⽶商城官⽹部分代码CSS部分
.top-bar-wrapper
{
width: 100%;
height: 40px;
line-height: 40px;
background-color: #333333;
}
.tool-bar a
{
font-size: 14px;
color: #b0b0b0;
display: block;
}
.tool-bar a:hover
{
color: white;
}
.tool-bar .line
{
color: #b0b0b0;
margin-left: 4px ;
margin-right: 4px ;
margin-top: -1px;
}
.service,.tool-bar li
{
float: left;
}
.app
{
position: relative;
}
/
*设置app图⽚上⾯的⼩三⾓
注意这⾥的li:hover 的⽤法，因为我们要hover出这个伪元素
*/
li:hover> .app::after
{
content:'';
position: absolute;
width: 0px;
height: 0px;
border: 8px transparent solid;
border-top: none;
border-bottom-color: white;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.app .qr-code
.app .qr-code
{
/*display: none;*/
position: absolute;/*给⼆维码开启绝对定位，使其脱离⽂档流，不占⽤⽗元素的宽度*/
width: 124px;
/*height: 148px;*/
height: 0px;
overflow: hidden;
z-index: 9999;
line-height: 1;/*因为前⾯设置了⾏⾼，但是，这⾥⾯的⽂字也是⽗类容器的⼦类，会继承属性，所以要从新定义⾏⾼，保证字体紧贴图⽚下边*/ text-align: center;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0 ,0, 0.3);
/*    接下来演⽰⼀下，下拉的动画效果,transition 设置属性，以及变化的时间
*/transition: height 300ms;
}
li:hover>.app .qr-code{
/*display: block;*/
height: 148px;
z-index: 9999;
}
.app .qr-code span{
color: black;
}
.qr-code img
{
width: 90px;
margin: 17px 17px;
}
.shopCar
{
float: right;
}
.shopCar a
{
width: 120px;
text-align: center;
}
.
shopCar i
{
margin-right: 4px;
}
.shopCar:hover /*绑定⽗元素，保证弹出层不消失*/
{
background-color: black;
color: orange;
}
.user-info
{
float: right;
}
/*设置header*/
.header
{
height: 100px;
/*background-color: #bfa;*/
}
.logo
{
width: 55px;
height: 55px;
float: left;
position: relative;
overflow: hidden;
margin-top: 22px;
}
.header .logo a
{
position: absolute;
left: 0;
/*background-color: red;*/
transition: left 0.3s;/*这个transition加在这个a这⾥，直接就让两个a都具有了动画的属性*/ }
.header .logo .mihome
{
left: -55px;
}
.header .logo:hover .milogo
{
left: 55px;
}
.header .logo:hover .mihome
{
left: 0;
}
/*---------------上⾯是动画效果-------------------*/
/*设置中间导航条*/
.header-wrapper
{
position: relative;
}
.header .nav-wrapper
{
float: left;
margin-left: 7px;
}
.header .nav
{
width: 792px;
/*background-color: #bfa;*/
height: 100px;
line-height: 100px;
line-height: 100px;
padding-left: 58px;
}
.
nav > li/* 只让⼦元素浮动，后代不浮动 */
{
float: left;
}
.all-goods-wrapper
{
position: relative;
}
.left-menu
{
width: 234px;
height: 420px;
background-color:rgba(154,151,153,0.3);
line-height: 1;
position: absolute;
left: -120px;
z-index: 999;
padding:20px 0px;
}
.header .nav-wrapper .left-menu a
{
display: block;
height: 42px;
line-height: 42px;
color: white;
}
.header .nav-wrapper .left-menu li:hover/*  写长⼀点，增加优先级 */ {
color:white ;
background-color:rgb(255,103,0);
}
.left-menu li
{
padding: 0 30px;
}
.left-menu a i
{
float: right;
line-height: 42px;
}
.nav-wrapper li a
{
color: black;
font-size: 16px;
margin-right: 20px;
}
.nav-wrapper li a:hover
{
color:rgb(255,103,0);
}
.all-goods
{
visibility: hidden;
}
.header .goods-info
{
height: 0px;
width: 100%;
overflow: hidden;
position: absolute;
top:100px;
left: 0px;
z-index: 9999;
transition: height 1s;
/*height: 228px;*/
/*background-color: #bfa;*/
/*border-top: 1px solid rgb(224,224,224);*/
}
.header .nav-wrapper li:not(:first-of-type):not(:nth-child(10)):not(:nth-child(9)):hover ~ .goods-info,/*除了not（），不能混合写，只能⼀个⼀个写，因为混合写全部都要失效*/
.goods-info:hover
/*注意：这⾥有选择器优先级的问题，如果我们把上⾯那个定义goods-info写在下⾯，那么就不会出现这个效果*/
{
width: 100%;
height: 228px;
background-color: white;
/*background-color: #bfa;*/
border-top: 1px solid rgb(224,224,224);
box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
z-index: 9999;
}
.search-wrapper
{
width: 296px;
height: 50px;
background-color: red;
float: right;
margin-top: 25px;
border: 1px solid rgb(224,224,224);
}
.search-wrapper .search-inp
{
float: left;
border: none;
padding:0px 10px;
height: 50px;
width: 224px;
font-size: 16px;
/*border: 1px solid rgb(224,224,224);*/

更多推荐

保证,效果,属性,元素,动画,设置,定位