HTML+CSS實現淘寶首頁

2024年2月18日發(作者：塔河)

}.wrapper .arch-wrap .arch-con .arch-box .sousuo,.wrapper .arch-wrap .arch-con .arch-box .camera { display: inline-block; position: absolute;}

.wrapper .arch-wrap .arch-con .arch-box .sousuo { width: 12px; height: 14px; top: 11px; left: 14px;

background-image: url('./img/'); background-size: 100% 100%;}

.wrapper .arch-wrap .arch-con .arch-box .camera { width: 20px; height: 22px; top: 11px; right: 90px; background-image: url('./img/'); background-size: 100% 100%;}.wrapper .arch-wrap .arch-con .arch-box .arch-bl { width: 627px; height: 20px;}.wrapper .arch-wrap .arch-con .arch-box .arch-bl a{ font-size: 12px; margin-right:8px; color: #666;}.wrapper .arch-wrap .arch-con .arch-box .arch-bl ,.wrapper .arch-wrap .arch-con .arch-box .arch-bl a:hover { color: #ff5000;}.wrapper .arch-wrap .arch-con .code-box { display: inline-block; width: 76px;

height: 90px; border: 1px solid #eee; vertical-align: top; margin-left: 120px; position: relative;}.wrapper .arch-wrap .arch-con .code-box .phone { color: #ff5000; font-size: 14px; line-height: 20px; margin-left: 6px;}.wrapper .arch-wrap .arch-con .code-box .code { display: inline-block; width: 62px; height: 62px; background: url('./img/') no-repeat; background-size: 100% 100%; margin-left: 6px;

margin-left: 6px;}.wrapper .arch-wrap .arch-con .code-box .clo { width: 16px; height: 16px; text-align: center; line-height: 16px; /*垂直居中*/ position: absolute; display: inline-block; top: 0; left: -18px; border: 1px solid #eee; color: : #ddd; font-size: 14px;}/*搜索下的導航條*/.wrapper .screen-nav { width: 1190px; height: 30px; background: linear-gradient(to right, #ff9000 0, #ff5000 100%); margin: 0 auto; /*實現左右居中*/}.wrapper .screen-nav .screen-nav-con { width: 100%; height: 100%;}.wrapper .screen-nav .screen-nav-con h2 { float: left; color: #fff; font-size: 16px; width: 190px; height: 100%; background-color: #ff5000; text-align: center; line-height: 30px;}.wrapper .screen-nav .screen-nav-con ul {

float: left;}.wrapper .screen-nav .screen-nav-con ul li { float: left; margin:0 3px; padding: 0 4px; position: relative;}.wrapper .screen-nav .screen-nav-con ul li a { line-height: 30px; color: #fff; font-weight: 700;}.wrapper .screen-nav .screen-nav-con ul li:hover::before { content: ""; display: block; width: 30px; height: 30px; background: url('./img/') no-repeat; background-size: center;

.wrapper .screen-box .main .main-inner .inner-left ul li:hover { background-color: #ffe4dc;}.wrapper .screen-box .main .main-inner .inner-left ul li:hover a{ color: #ff5000;}/*中間輪播圖位置*/.wrapper .screen-box .main .main-inner .inner-content { float: left; width: 520px; height: 522px;}/*輪播圖*/.wrapper .screen-box .main .main-inner .inner-content .pic-box { padding: 8px; .content{width:525px; margin-right:10px;}.content #ad{width:524px; height:190px; position:relative;}.content #pic1{ position:absolute; top:0px; left:0px;}}.wrapper .screen-box .main .main-inner .inner-content .inner-mall { width: 520px; height: 230px; padding: 0 8px;}.wrapper .screen-box .main .main-inner .inner-content .inner-mall .tm { font-size: 12px; color: #666;}.wrapper .screen-box .main .main-inner .inner-right { float: left; padding: 8px; width: 160px; height: 522px;}.wrapper .screen-box .main .main-inner .inner-right .hot { font-size: 12px; margin-top: 11px;}.wrapper .screen-box .main .main-bottom { width: 890px; height: 100px;}/*最下淘寶頭條*/.wrapper .screen-box .main .main-bottom .content { background-color: #fff; padding: 14px 12px; margin-top: 10px; position: relative; height: 61px;}.wrapper .screen-box .main .main-bottom .content .logo-box { width: 180px; height: 73px; background-image: url('./img/');

width: 75px; background: linear-gradient(to right, #ff5000 0, #ff6f06 100%); border-radius: 4px; text-align: center; line-height: 25px; font-size: 14px; color: #fff; font-weight: 700;}.wrapper .screen-box .col-right .member .member-foot { width: 92px;}.wrapper .screen-box .col-right .message { width: 290px; height: 26px;}.wrapper .screen-box .col-right .message a { display: inline-block; width: 100%; height: 100%; background-color: #ffe4dd; color: #f40; font-size: 12px; text-align: center; line-height: 26px; position: relative;}.wrapper .screen-box .col-right .message a span { display: inline-block; width: 10px; height: 10px; position: absolute; top: 9px; right: 52px; background-image: url('./img/'); background-size: 100% 100%;}.wrapper .screen-box .col-right .notice { height: 98px; width: 100%; padding-top: 10px;}.wrapper .screen-box .col-right .notice ul li { float: left;}.wrapper .screen-box .col-right .notice .title { height: 24px; width: 100%; padding: 0 8px; /*box-sizing: border-box;*/ /*css3, 將當前標準模式下盒模型轉換成IE模式下的盒模型*/}.wrapper .screen-box .col-right .notice .title li { width: 32px; height: 20px; margin: 0 11px; text-align: center;}

.wrapper .screen-box .col-right .notice .title li a { color: #3c3c3c; font-size: 13px; line-height: 20px; padding: 0 2px;}.wrapper .screen-box .col-right .notice .title li { font-weight: 700; border-bottom: 2px solid #f40;}.wrapper .screen-box .col-right .notice .title li a:hover,.wrapper .screen-box .col-right .notice .content li ,.wrapper .screen-box .col-right .notice .content li a:hover { color: #f40;}.wrapper .screen-box .col-right .notice .content { width: 100%; height: 50px; padding: 9px; /*box-sizing: border-box;*/ /*css3, 將當前標準模式下盒模型轉換成IE模式下的盒模型*/}.wrapper .screen-box .col-right .notice .content li { width: 130px; height: 25px; line-height: 25px; text-align: center;}.wrapper .screen-box .col-right .notice .content li a { font-size: 12px; color: #3c3c3c;}.wrapper .screen-box .col-right .module { width: 100%; height: 230px;}.wrapper .screen-box .col-right .module ul li { float: left; width: 72px; height: 75px; border: 1px solid #eee; box-sizing: border-box; /*css3, 將當前標準模式下盒模型轉換成IE模式下的盒模型*/}.wrapper .screen-box .col-right .module ul li:hover { border: 1px solid #f40;}.wrapper .screen-box .col-right .module ul li a { display: block; text-align: center; margin-top: 10px;}.wrapper .screen-box .col-right .module ul li a span { display: inline-block; width: 24px;