国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > 品優(yōu)購(gòu)

品優(yōu)購(gòu)

時(shí)間：2023-08-02 08:57:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-08-02 08:57:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

品優(yōu)購(gòu)：

初始化樣式

/* 內(nèi)外邊距清零 */* { margin: 0; padding: 0; /* css3盒子模型 */ box-sizing: border-box;}/* em 和 i 斜體的文字不傾斜 */em,i { font-style: normal}/* 去掉li 的小圓點(diǎn) */li { list-style: none}img { /* border 0 照顧低版本瀏覽器 如果 圖片外面包含了鏈接會(huì)有邊框的問(wèn)題 */ border: 0; /* 取消圖片底側(cè)有空白縫隙的問(wèn)題 */ vertical-align: middle}button { /* 當(dāng)我們鼠標(biāo)經(jīng)過(guò)button 按鈕的時(shí)候，鼠標(biāo)變成小手 */ cursor: pointer}a { color: #666; text-decoration: none}a:hover { color: #c81623}button,input { /* "/5B8B/4F53" 就是宋體的意思 這樣瀏覽器兼容性比較好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "/5B8B/4F53", sans-serif; /* 默認(rèn)有灰色邊框我們需要手動(dòng)去掉 */ border: 0; outline: none;}body { /* CSS3 抗鋸齒形 讓文字顯示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "/5B8B/4F53", sans-serif; color: #666}.hide,.none { display: none}/* 清除浮動(dòng) */.clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0}.clearfix { *zoom: 1}

公共樣式(因?yàn)槭醉?yè)和列表頁(yè)頭部和尾部樣式一樣等，可以設(shè)置為公共的樣式）

網(wǎng)站favicon圖標(biāo)

示例如下圖：

步驟：

1.制作favicon圖標(biāo)

百度搜索比特蟲，利用比特蟲添加圖片在線轉(zhuǎn)換

2.favicon圖標(biāo)放到網(wǎng)站根目錄下

3.HTML頁(yè)面引入favicon圖標(biāo)

快捷導(dǎo)航欄制作

思路：首先一個(gè)通欄的大盒子，再放一個(gè)版心，然后兩個(gè)盒子，左邊盒子左浮動(dòng)，右邊和自由浮動(dòng)。

效果圖：

版心：

/* 版心 */.w{ width: 1200px; margin: 0 auto;}.fl{ float: left;}.fr{ float: right;}.style_red{ color: #c81623;}快捷導(dǎo)航欄（還運(yùn)用到了字體圖標(biāo)）：

/* 導(dǎo)入字體圖標(biāo) */@font-face { font-family: 'iconfont'; /* project id 2165991 */ src: url('https://at.alicdn.com/t/font_2165991_a7yxzjewf06.eot'); src: url('https://at.alicdn.com/t/font_2165991_a7yxzjewf06.eot?#iefix') format('embedded-opentype'), url('https://at.alicdn.com/t/font_2165991_a7yxzjewf06.woff2') format('woff2'), url('https://at.alicdn.com/t/font_2165991_a7yxzjewf06.woff') format('woff'), url('https://at.alicdn.com/t/font_2165991_a7yxzjewf06.ttf') format('truetype'), url('https://at.alicdn.com/t/font_2165991_a7yxzjewf06.svg#iconfont') format('svg'); } @font-face { font-family: 'iconfont'; /* project id 2165991 */ src: url('https://at.alicdn.com/t/font_2165991_2c9zgdjlo3k.eot'); src: url('https://at.alicdn.com/t/font_2165991_2c9zgdjlo3k.eot?#iefix') format('embedded-opentype'), url('https://at.alicdn.com/t/font_2165991_2c9zgdjlo3k.woff2') format('woff2'), url('https://at.alicdn.com/t/font_2165991_2c9zgdjlo3k.woff') format('woff'), url('https://at.alicdn.com/t/font_2165991_2c9zgdjlo3k.ttf') format('truetype'), url('https://at.alicdn.com/t/font_2165991_2c9zgdjlo3k.svg#iconfont') format('svg'); } @font-face { font-family: 'iconfont'; /* project id 2165991 */ src: url('https://at.alicdn.com/t/font_2165991_iqtafbj0crh.eot'); src: url('https://at.alicdn.com/t/font_2165991_iqtafbj0crh.eot?#iefix') format('embedded-opentype'), url('https://at.alicdn.com/t/font_2165991_iqtafbj0crh.woff2') format('woff2'), url('https://at.alicdn.com/t/font_2165991_iqtafbj0crh.woff') format('woff'), url('https://at.alicdn.com/t/font_2165991_iqtafbj0crh.ttf') format('truetype'), url('https://at.alicdn.com/t/font_2165991_iqtafbj0crh.svg#iconfont') format('svg'); } .iconfont { font-family: 'iconfont'; }/* 快捷導(dǎo)航模塊 */.shortcut{ height: 31px; background-color: #f1f1f1; line-height: 31px;}.shortcut ul li{ float: left;}.shortcut .fr ul li:nth-child(even){ width: 1px; height: 12px; background-color:#666666 ; margin: 9px 15px 0;}HTML部分：

<div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>品優(yōu)購(gòu)歡迎您！&nbsp;</li> <li> <a href="#">請(qǐng)登錄&nbsp;</a> <a href="#" class="style_red">免費(fèi)注冊(cè)</a> </li> </ul> </div> <div class="fr"> <ul> <li>我的訂單</li> <li></li> <li class="iconfont">我的品優(yōu)購(gòu)&nbsp;&nbsp;&#xe688;</li> <li></li> <li>品優(yōu)購(gòu)會(huì)員</li> <li></li> <li>企業(yè)采購(gòu)</li> <li></li> <li class="iconfont">關(guān)注品優(yōu)購(gòu)&nbsp;&nbsp;&#xe688;</li> <li></li> <li class="iconfont">客戶服務(wù)&nbsp;&nbsp;&#xe688;</li> <li></li> <li class="iconfont">網(wǎng)站導(dǎo)航&nbsp;&nbsp;&#xe688;</li> </ul> </div> </div> </div>

頭部header制作

思路：給header盒子一個(gè)寬高，里面四個(gè)小盒子采用定位的方式完成。

logo模塊：

HTML：

<!-- logo標(biāo)志 --> <div class="logo"> <h1> <a href="index.html" title="品優(yōu)購(gòu)">品優(yōu)購(gòu)</a> </h1> </div>CSS：

/* logo */.logo{ position: absolute; height: 61px; width: 171px; top:25px;}.logo a{ display: block; height: 61px; width: 171px; background: url(../images/logo.png);/* 將文字大小設(shè)置為0，隱藏文字，京東做法 */ font-size: 0;}

search模塊：

HTML：

<div class="search"> <input type="search" placeholder="語(yǔ)言開(kāi)發(fā)"> <button>搜索</button> </div>CSS：

/* 搜索框模塊 */.search{ position: absolute; top: 25px; left: 346px; width: 538px; height: 36px; border: 2px solid #c81623;}.search input{ float: left; width: 454px; height: 32px; padding-left: 10px;}.search button{ float: left; width: 80px; height: 32px; background-color: #c81623; font-size: 16px; color: #ffffff;}

熱詞模塊：

HTML：

<div class="hotwords"> <a href="#" class="style_red">優(yōu)惠購(gòu)首發(fā)</a> <a href="#">億元優(yōu)惠</a> <a href="#">9.9元團(tuán)購(gòu)</a> <a href="#">美滿99減30</a> <a href="#">辦公用品</a> <a href="#">電腦</a> <a href="#">通信</a></div>CSS:

.hotwords{ position: absolute; top: 66px; left: 346px; }.hotwords a{ margin-right: 10px; margin-left: 10px;}

購(gòu)物車模塊：

HTML：

<div class="shopcar iconfont">&#xe609;&nbsp;&nbsp;我的購(gòu)物車&nbsp;&#xe689;<i class="count">8 </i> </div>CSS:

.shopcar{ position: absolute; top: 25px; right: 64px; width: 142px; height: 35px; line-height: 35px; text-align: center; font-size: 12px; color:#666666 ; border: 1px solid #dfdfdf; background-color: #f7f7f7;}.count { position: absolute; top: -5px; left: 100px; height: 14px; line-height: 14px; color: #fff; background-color: #e60012; padding: 0 5px; border-radius: 7px 7px 7px 0;}

導(dǎo)航詳細(xì)分類模塊：

HTML部分：

<div class="dropdown"> <div class="dt">全部商品分類</div> <div class="dd"> <ul class="iconfont"> <li><a href="#">家用電器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">手機(jī)</a>、 <a href="#">數(shù)碼</a>、<a href="#">通信&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">電腦、辦公&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">家居、家具、家裝、廚具&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">男裝、女裝、童裝、內(nèi)衣&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">個(gè)戶化妝、清潔用品、寵物&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">鞋靴、箱包、珠寶、奢侈品&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">運(yùn)動(dòng)戶外、鐘表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">汽車、汽車用品&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">母嬰、玩具樂(lè)器&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">食品、酒類、生鮮、特產(chǎn)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">醫(yī)藥保健&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#xe689;</a> </li> <li><a href="#">圖書、音像、電子書</a> </li> <li><a href="#">彩票、旅行、充值、票務(wù)</a> </li> <li><a href="#">理財(cái)、眾籌、白條、保險(xiǎn)</a> </li> </ul> </div><div>CSS部分：：

.dropdown{ float: left; width: 210px; height: 47px; background-color: #c81623 ;}.dropdown .dt{ font-size: 16px; color: #fff; line-height: 47px; text-align: center;}.dropdown .dd{ width: 210px; height: 465px; background-color: #c81623 ;}.dropdown .dd ul li{ position: relative; height: 31px; line-height: 31px; margin-left: 2px; padding-left: 10px;}.dropdown .dd ul li:hover{ background-color: #fff;}.dropdown .dd ul li a{ font-size: 14px; color: #fff;}.dropdown .dd ul li:hover a{ color:#c81623 ;}.navitems ul li{ float: left; }.navitems ul li a{ display: block; font-size: 16px; line-height: 47px; text-align: center; padding: 0 25px;}

底部footer模塊：

思路：給一個(gè)大盒子，給定高度和背景顏色，再給一個(gè)版心，最后劃分為三個(gè)小盒子來(lái)做。

上面service模塊制作：

思路：給上5個(gè)小li，每個(gè)小li分為左邊和右邊兩個(gè)模塊，左邊運(yùn)用精靈圖，右邊是簡(jiǎn)單的字體。

HTML部分：

<div class="footer"><div class="w"> <div class="service"> <ul> <li class="service_txt1"> <h5></h5> <div> <h4>正品保障</h4> <p>正品保障,提供發(fā)票</p> </div> </li> <li class="service_txt2"> <h5></h5> <div> <h4>極速物流</h4> <p>急速物流，急速送達(dá)</p> </div> </li> <li class="service_txt3"> <h5></h5> <div> <h4>無(wú)憂售后</h4> <p>7天無(wú)理由退換貨</p> </div> </li> <li class="service_txt4"> <h5></h5> <div> <h4>特色服務(wù)</h4> <p>私人定制家電套餐</p> </div> </li> <li class="service_txt5"> <h5></h5> <div> <h4>幫助中心</h4> <p>您的購(gòu)物指南</p> </div> </li> </ul> </div> </div></div>CSS部分：

.footer{ margin-top: 555px; padding-top: 30px; height: 415px; background-color: #f5f5f5;}.service{ height: 80px; border-bottom: 2px solid #ededed;}.service ul li{ float: left; width: 200px; height: 50px; /* background-color: rgb(238, 208, 144); */ padding-left: 35px; margin-right: 35px;}.service ul li h5{ float: left; height: 50px; width: 50px; background-color: limegreen; margin-right: 7px;}.service ul .service_txt1 h5{ background: url(../images/jinglintu.png) no-repeat -252px -2px;}.service ul .service_txt2 h5{ background: url(../images/jinglintu.png) no-repeat -254px -53px;}.service ul .service_txt3 h5{ background: url(../images/jinglintu.png) no-repeat -257px -105px;}.service ul .service_txt4 h5{ background: url(../images/jinglintu.png) no-repeat -257px -156px;}.service ul .service_txt5 h5{ background: url(../images/jinglintu.png) no-repeat -256px -209px;}.service h4{ font-size: 14px;}.service p{ font-size: 12px;}中間help模塊：

HTML部分：

<div class="help"> <dl> <dt>購(gòu)物指南</dt> <dd><a href="#">購(gòu)物流程</a></dd> <dd><a href="#">會(huì)員介紹</a></dd> <dd><a href="#">生活旅行/團(tuán)購(gòu)</a></dd> <dd><a href="#">常見(jiàn)問(wèn)題</a></dd> <dd><a href="#">大家電</a></dd> <dd><a href="#">聯(lián)系客服</a></dd> </dl> <dl> <dt>配送方式</dt> <dd><a href="#">上門自提</a></dd> <dd><a href="#">211限時(shí)達(dá)</a></dd> <dd><a href="#">配送服務(wù)查詢</a></dd> <dd><a href="#">配送費(fèi)收取標(biāo)準(zhǔn)</a></dd> <dd><a href="#">海外配送</a></dd> </dl> <dl> <dt>支付方式</dt> <dd><a href="#">貨到付款</a></dd> <dd><a href="#">在線支付</a></dd> <dd><a href="#">分期付款</a></dd> <dd><a href="#">郵局匯款</a></dd> <dd><a href="#">公司轉(zhuǎn)賬</a></dd> </dl> <dl> <dt>售后服務(wù)</dt> <dd><a href="#">售后政策</a></dd> <dd><a href="#">價(jià)格保護(hù)</a></dd> <dd><a href="#">退款說(shuō)明</a></dd> <dd><a href="#">返修/退換貨</a></dd> <dd><a href="#">取消訂單</a></dd> </dl> <dl> <dt>特色服務(wù)</dt> <dd><a href="#">奪寶島</a></dd> <dd><a href="#">DIY裝機(jī)</a></dd> <dd><a href="#">延保服務(wù)</a></dd> <dd><a href="#">品優(yōu)購(gòu)E卡</a></dd> <dd><a href="#">品優(yōu)購(gòu)?fù)ㄐ?lt;/a></dd> </dl> <dl> <dt>幫助中心</dt> <dd class="img"></dd> <dd>品優(yōu)購(gòu)客戶端</dd> </dl> </div>CSS部分：

.help{ height: 185px; border-bottom: 2px solid #ededed; padding-left: 50px; margin-top: 21px;}.help dl{ float: left; width: 200px;}.help dl:last-child { width: 90px; text-align: center;}.help dt{ font-size: 16px; margin-bottom: 14px;}.help dd{ font-size: 12px;}.help .img{ width: 92px; height: 92px; background: url(../images/erweima.jpg);}底部copyright模塊：

HTML部分：

<div class="copyright"> <div class="links"> <a href="#">關(guān)于我們</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">聯(lián)系我們</a>&nbsp;&nbsp;|&nbsp;&nbsp; <a href="#">聯(lián)系客服 </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">商家入駐</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">營(yíng)銷中心</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">手機(jī)品優(yōu)購(gòu)</a> &nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">友情鏈接</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">銷售聯(lián)盟</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">品優(yōu)購(gòu)社區(qū)</a> | <a href="#">品優(yōu)購(gòu)公益</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">English Site</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Contact U</a> </div> <div class="copyright_address"> 地址：杭州市昌平區(qū)建材城西路金燕龍辦公樓一層 郵編：100096 電話：400-618-4000 傳真：010-82935100 郵箱: zhanghj+itcast.cn <br> 京ICP備08001421號(hào)京公網(wǎng)安備110108007702 </div> </div>CSS部分：

.links{ margin: 10px auto; text-align: center;}.copyright_address{ text-align: center; margin-bottom: 10px;}

主頁(yè)index模塊（注意：不是commom.css，新建了一個(gè)index.css)

思路：版心內(nèi)容下給兩個(gè)盒子，一個(gè)左浮動(dòng)，一個(gè)右浮動(dòng)。左邊插入圖片，右邊在劃分為三個(gè)小盒子。

HTML部分：

<div class="w"> <div class="main"> <!-- 焦點(diǎn)圖 --> <div class="focus"></div> <!-- 快報(bào) --> <div class="newsflash"> <div class="news"> <div class="news_hd"> <h5>品優(yōu)購(gòu)快報(bào)</h5> <a href="#" class="more iconfont">更多&nbsp;&nbsp;&#xe689;</a> </div> <div class="news_bd"> <ul> <li><a href="#"><strong>[特惠]</strong> 備戰(zhàn)開(kāi)學(xué)季 全民半價(jià)購(gòu)數(shù)碼</a></li> <li><a href="#"><strong>[公告]</strong> 品優(yōu)穩(wěn)占家電網(wǎng)購(gòu)六成份額</a></li> <li><a href="#"><strong>[特惠]</strong> 百元中秋全品類禮券限時(shí)領(lǐng)</a></li> <li><a href="#"><strong>[公告]</strong> 生鮮 享陽(yáng)澄湖大閘蟹</a></li> <li><a href="#"><strong>[特惠]</strong> 每日享折扣品優(yōu)品質(zhì)游</a></li> </ul> </div> </div> <div class="lifeservice"> <ul> <li> <i class="service_img1"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img2"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img3"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img4"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img5"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img6"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img7"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img8"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img9"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img10"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img11"></i> <p>話費(fèi)</p> </li> <li> <i class="service_img12"></i> <p>話費(fèi)</p> </li> </ul> </div> <div class="bargain"> <img src="./images/bargain.png" alt=""> </div> </div>CSS部分：

.main{ width: 980px; height: 455px; margin-top: 11px; margin-left: 220px;}.focus{ float: left; width: 721px; height: 455px; /* background-color: mediumseagreen; */ background: url(../images/jiaodiantu.png);}.newsflash{ float: right; width: 251px; height: 455px; /* background-color: orchid; */}.news{ height: 165px; border: 1px solid #e4e4e4;}.news_hd{ height: 33px; line-height: 33px; /* padding-top: 10px; */ border-bottom: 1px dotted #e4e4e4; padding: 0 15px;}.news_hd h5{ float: left; padding-left: 2px; font-size: 14px; } .news_hd .more{ float: right; /* padding-right: 13px; */ font-size: 12px; } .news_bd{ padding-left: 14px; padding: 5px 15px 0; } .news_bd ul li{ margin-top: 5px; margin-bottom: 5px; } .lifeservice { overflow: hidden; height: 209px; /* background-color: purple; */ border: 1px solid #e4e4e4; border-top: 0;}.lifeservice ul { width: 252px;}.lifeservice ul li { float: left; width: 63px; height: 71px; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #e4e4e4; text-align: center;}.lifeservice ul li i { display: inline-block; width: 24px; height: 28px; background-color: pink; margin-top: 12px;}.lifeservice ul li .service_img1{ background: url(../images/jinglintu.png) no-repeat -16px -15px;}.lifeservice ul li .service_img2{ background: url(../images/jinglintu.png) no-repeat -79px -15px;}.lifeservice ul li .service_img3{ background: url(../images/jinglintu.png) no-repeat -142px -17px;}.lifeservice ul li .service_img4{ background: url(../images/jinglintu.png) no-repeat -205px -15px;}.lifeservice ul li .service_img5{ background: url(../images/jinglintu.png) no-repeat -16px -86px;}.lifeservice ul li .service_img6{ background: url(../images/jinglintu.png) no-repeat -77px -86px;}.lifeservice ul li .service_img7{ background: url(../images/jinglintu.png) no-repeat -142px -88px;}.lifeservice ul li .service_img8{ background: url(../images/jinglintu.png) no-repeat -205px -86px;}.lifeservice ul li .service_img9{ background: url(../images/jinglintu.png) no-repeat -16px -155px;}.lifeservice ul li .service_img10{ background: url(../images/jinglintu.png) no-repeat -79px -155px;}.lifeservice ul li .service_img11{ background: url(../images/jinglintu.png) no-repeat -142px -155px;}.lifeservice ul li .service_img12{ background: url(../images/jinglintu.png) no-repeat -205px -155px;} .bargain{ margin-top: 5px; height: 76px; /* background-color: paleturquoise; */ }

推薦模塊：

HTML部分：

<div class="recom w"> <div class="recom_hd"> <img src="./images/recom.png" alt=""> </div> <div class="recom_bd"> <ul> <li><img src="./images/recom01.png" alt=""></li> <li><img src="./images/recom02.png" alt=""></li> <li><img src="./images/recom03.png" alt=""></li> <li><img src="./images/recom04.jpg" alt=""></li> </ul> </div> </div>CSS部分：

.recom{ height: 163px; /* background-color: plum; */ margin-top: 10px; } .recom_hd{ float: left; width: 206px; height: 163px; text-align: center; line-height: 163px; background-color: #5c5251; } .recom_bd{ float: left; } .recom_bd ul li { position: relative; float: left;}.recom_bd ul li img { width: 248px; height: 163px;}.recom_bd ul li:nth-child(-n+3)::after { content: ''; position: absolute; right: 0; top: 10px; width: 1px; height: 145px; background-color: #ddd;}

猜你喜歡模塊：

也是分為上邊標(biāo)題和下邊內(nèi)容，上面標(biāo)題用兩個(gè)小li，左邊左浮動(dòng)，右邊右浮動(dòng)，右邊還使用到了字體圖標(biāo)。

我懶得在截圖了，就只用了一個(gè)
HTML部分：

<!-- 猜你喜歡模塊 --> <div class="xihuan w"> <div class="xihuan_hd clearfix"> <h3> 猜你喜歡</h3> <a href="#" class="iconfont">換一批&nbsp;&#xe685;</a> </div> <div class="xihuan_bd"> <ul> <li> <img src="./images/xihuan-1.png" alt=""> <h4> 陽(yáng)光美包新款單肩包女 包時(shí)尚子母包四件套女 </h4> <div class="info"> <span>￥116.00</span> </div> </li> <li> <img src="./images/xihuan-1.png" alt=""> <h4> 陽(yáng)光美包新款單肩包女 包時(shí)尚子母包四件套女 </h4> <div class="info"> <span>￥116.00</span> </div> </li> <li> <img src="./images/xihuan-1.png" alt=""> <h4> 陽(yáng)光美包新款單肩包女 包時(shí)尚子母包四件套女 </h4> <div class="info"> <span>￥116.00</span> </div> </li> <li> <img src="./images/xihuan-1.png" alt=""> <h4> 陽(yáng)光美包新款單肩包女 包時(shí)尚子母包四件套女 </h4> <div class="info"> <span>￥116.00</span> </div> </li> <li> <img src="./images/xihuan-1.png" alt=""> <h4> 陽(yáng)光美包新款單肩包女 包時(shí)尚子母包四件套女 </h4> <div class="info"> <span>￥116.00</span> </div> </li> <li> <img src="./images/xihuan-1.png" alt=""> <h4> 陽(yáng)光美包新款單肩包女 包時(shí)尚子母包四件套女 </h4> <div class="info"> <span>￥116.00</span> </div> </li> </ul> </div> </div>CSS部分：

/* 猜你喜歡模塊 */.xihuan{ margin-top: 30px;}.xihuan_hd h3{ float: left; font-size: 18xp;}.xihuan_hd a{ float: right; font-size: 12px; padding-right: 18px;}.xihuan_bd{ width: 1202px;height: 230px;border: 1px solid #ccc;margin-top: 12px;/* background-color: salmon; */}.xihuan_bd h4{ font-size: 12px; font-weight: 400; padding:0 49px 0 30px; border-right: 1px solid #ccc;}.xihuan_bd .info{ font-size: 18px; color:#df3033; padding-left: 30px; border-right: 1px solid #ccc;}.xihuan_bd ul li{ float: left; height: 230px; width: 200px; /* background-color: rgb(90, 205, 142); */}

商品樓層模塊：

思路：一個(gè)版心的大盒子，分為上下兩個(gè)盒子，上邊標(biāo)題左邊左浮動(dòng)，右邊右浮動(dòng)，下邊添加圖片及邊框。

HTML部分：

<!-- 1樓商品區(qū)域模塊 --> <div class="floor"> <div class=" w jiadian"> <div class="box_hd"> <h3>家用電器</h3> <div class="tab_list"> <ul> <li> <a href="#" class="style_red">熱門</a>|</li> <li><a href="#">大家電</a>|</li> <li><a href="#">生活電器</a>|</li> <li><a href="#">廚房電器</a>|</li> <li><a href="#">生活電器</a>|</li> <li><a href="#">個(gè)護(hù)健康</a>|</li> <li><a href="#">應(yīng)季電器</a>|</li> <li><a href="#">空氣/凈水</a>|</li> <li><a href="#">新奇特</a>|</li> <li><a href="#"> 高端電器</a></li> </ul> </div> </div> <div class="box_bd"> <div class="tab_content"> <div class="tab_list_item"> <div class="col_210"> <ul> <li><a href="#">節(jié)能補(bǔ)貼</a></li> <li><a href="#">4K電視</a></li> <li><a href="#">空氣凈化器</a></li> <li><a href="#">IH電飯煲</a></li> <li><a href="#">滾筒洗衣機(jī)</a></li> <li><a href="#">電熱水器</a></li> </ul> <a href="#"> <img src="./images/floor-1-1.png" alt=""> </a> </div> <div class="col_329"> <a href="#"> <img src="./images//floor-1-b01.png" alt=""> </a> </div> <div class="col_221"> <a href="#" class="bb"> <img src="./images//floor-1-2.png" alt=""></a> <a href="#"> <img src="./images//floor-1-3.png" alt=""></a> </div> <div class="col_221"> <a href="#"> <img src="./images//floor-1-4.png" alt=""></a> </div> <div class="col_219"> <a href="#" class="bb"> <img src="./images//floor-1-5.png" alt=""></a> <a href="#"> <img src="./images//floor-1-6.png" alt=""></a> </div> </div> </div> </div> </div> </div> <!-- 下面標(biāo)簽?zāi)K --> <div class="w biaoqian"> <img src="./images/tubiao1.png" alt=""> </div>CSS部分：

/* 家用電器模塊 */.floor .w{ margin-top: 30px;}.box_hd{ height: 30px; border-bottom: 2px solid #c81623;} .box_hd h3{ float: left; font-size: 18px; color: #c81623 ; font-weight: 400;}.box_hd .tab_list{ float: right; line-height: 30px;}.box_hd .tab_list ul li{ float: left;}.box_hd .tab_list ul li a{ margin: 0 15px;}.box_bd{ height:361px;}.box_bd h4{ font-size: 12px;}.tab_list_item>div{ float: left; height: 361px;}.col_210{ width: 210px; background-color: #f9f9f9; text-align: center;}.col_210 ul li { float: left; width: 85px; height: 34px; border-bottom: 1px solid #ccc; text-align: center; line-height: 33px; margin-right: 10px;}.col_210 ul { padding-left: 12px;}.col_329{ width: 329px;}.col_221{ width: 221px; border-right: 1px solid #ccc;}.col_219{ width: 219px;}.bb { /* 一般情況下，a如果包含有寬度的盒子，a需要轉(zhuǎn)為塊級(jí)元素 */ display: block; border-bottom: 1px solid #ccc;}/* 下面標(biāo)簽?zāi)K */.biaoqian .w{ height: 65px;}.biaoqian{margin-top: 21px;}下邊兩個(gè)手機(jī)和電腦樓層和上邊一樣樣的。

熱門瘋搶模塊：

分為上邊標(biāo)題和下面內(nèi)容區(qū)。

HTML部分：

<!-- 熱門瘋搶模塊 --> <div class="fengqiang w"> <div class="fengqiang_hd">熱門瘋搶</div> <div class="fengqiang_bd"> <div class="fengqiang_240"> <img src="./images/fengqiang-1.png" alt=""> </div> <div class="fengqiang_220"> <img src="./images/fengqiang-2.png" alt=""> <img src="./images/fengqiang-3.png" alt=""> </div> <div class="fengqiang_220"> <img src="./images/fengqiang-4.png" alt=""> <img src="./images/fengqiang-3.png" alt=""> </div> <div class="fengqiang_220"> <img src="./images/fengqiang-3.png" alt=""> <img src="./images/fengqiang-5.png" alt=""> </div> <div class="fengqiang_297"> <img src="./images/fengqiang-6.png" alt=""> </div> </div> </div>CSS部分：

/* 熱門瘋搶模塊 */.fengqiang_hd{ font-size: 18px;}.fengqiang_bd{ height: 283px; border: 1px solid #ccc;}.fengqiang_bd>div{ float: left;}.fengqiang_240{ width: 240px; border-right: 1px solid #ccc;}.fengqiang_220{ width: 220px; border-right: 2px solid #ccc;}.fengqiang_297{ width: 297px;}

后續(xù)還有在下一篇里.......

關(guān)鍵詞：

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉