2023年12月3日发(作者：藤晶)

小米商城官网部分代码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{ /*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);*/ /*border: 1px solid rgb(224,224,224);*/}.search-wrapper .search-inp:focus/*

鼠标点击之后

的效果设置 */{ outline: 2px tomato solid;}.search-wrapper .search-btn{ float: left; height: 50px; width: 52px; color: #616161; font-size: 16px;}/*-------------------设置轮播图部分

中间部分----------------------*/.banner .img-list{ position: relative;}.banner .img-list li{ position: absolute;}.banner .img-list img{ width: 100%;}.banner{ height: 460px; position: relative;}.pointer{ position: absolute; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px;}.pointer a{ float: left; width: 8px; height: 8px; border: 2px rgba(255,255,255,0.6) solid ; border-radius: 50%; background-color: rgba(0,0,0,.4); margin-right: 4px;}.pointer a:hover,{ border: 2px rgba(0,0,0,.4) solid ; background-color: rgba(255,255,255,0.6);}/*右侧固定工具栏*/.back-top{ width: 26px; height: 206px; background-color: orangered; position: fixed;/*开启固定定位*/ bottom: 60px;/* */ right: 50%;/*

无论你窗口有多大，我的右边都是窗口的一半 */ margin-right: -639px; /*

要满足等式: left+margin-left+width+margin-right+right=包含块的宽度 width固定 right窗口一半 left为auto margin-left为0

如果我们给margin-right设置成负值，那么这个元素就会自动的向右移动，因为left为auto */}/*设置中间广告栏*/.ad{ height: 170px; margin-top: 14px}.ad .short-cut,.ad li,.ad img{ float: left;}.ad .short-cut{ width: 234px; height: 170px; background-color: #5f5750; margin-right: 14px;}.ad .img-list2 li{ width: 316px; margin-right: 15px;}.ad .img-list2 li:last-child{ margin-right: 0;}.ad .img-list2 img{ width: 100%;}.ad .short-cut a{ display: block; color: #cfccca; height: 84px; width: 76px; text-align: center; overflow: hidden;}.ad .short-cut i{ display: block; margin-top: 20px; margin-bottom: 5px; font-size: 20px;}.ad .short-cut a:hover{ color: white;}HTML部分

2023年12月3日发(作者：藤晶)

小米商城官网部分代码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{ /*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);*/ /*border: 1px solid rgb(224,224,224);*/}.search-wrapper .search-inp:focus/*

鼠标点击之后

的效果设置 */{ outline: 2px tomato solid;}.search-wrapper .search-btn{ float: left; height: 50px; width: 52px; color: #616161; font-size: 16px;}/*-------------------设置轮播图部分

中间部分----------------------*/.banner .img-list{ position: relative;}.banner .img-list li{ position: absolute;}.banner .img-list img{ width: 100%;}.banner{ height: 460px; position: relative;}.pointer{ position: absolute; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px;}.pointer a{ float: left; width: 8px; height: 8px; border: 2px rgba(255,255,255,0.6) solid ; border-radius: 50%; background-color: rgba(0,0,0,.4); margin-right: 4px;}.pointer a:hover,{ border: 2px rgba(0,0,0,.4) solid ; background-color: rgba(255,255,255,0.6);}/*右侧固定工具栏*/.back-top{ width: 26px; height: 206px; background-color: orangered; position: fixed;/*开启固定定位*/ bottom: 60px;/* */ right: 50%;/*

无论你窗口有多大，我的右边都是窗口的一半 */ margin-right: -639px; /*

要满足等式: left+margin-left+width+margin-right+right=包含块的宽度 width固定 right窗口一半 left为auto margin-left为0

如果我们给margin-right设置成负值，那么这个元素就会自动的向右移动，因为left为auto */}/*设置中间广告栏*/.ad{ height: 170px; margin-top: 14px}.ad .short-cut,.ad li,.ad img{ float: left;}.ad .short-cut{ width: 234px; height: 170px; background-color: #5f5750; margin-right: 14px;}.ad .img-list2 li{ width: 316px; margin-right: 15px;}.ad .img-list2 li:last-child{ margin-right: 0;}.ad .img-list2 img{ width: 100%;}.ad .short-cut a{ display: block; color: #cfccca; height: 84px; width: 76px; text-align: center; overflow: hidden;}.ad .short-cut i{ display: block; margin-top: 20px; margin-bottom: 5px; font-size: 20px;}.ad .short-cut a:hover{ color: white;}HTML部分