b2b電子商務(wù)網(wǎng)站怎么做鄭州聚商網(wǎng)絡(luò)科技有限公司
目錄
一、效果展示圖?
二、設(shè)計(jì)分析
1.整體效果分析?
2.頭部header模塊效果分析
4.分類classify模塊效果分析?
5.產(chǎn)品展示show模塊效果分析
6.版權(quán)banquan模塊效果分析
三、HTML、CSS代碼分模塊展示
1.?頭部header模塊代碼
3.分類classify模塊
4.產(chǎn)品展示show模塊代碼
5.版權(quán)banquan模塊代碼
四、完整代碼
1.HTML代碼：
2.CSS代碼：
一、效果展示圖?
二、設(shè)計(jì)分析
1.整體效果分析?
（1）HTML結(jié)構(gòu)分析
????????“西式甜品網(wǎng)”首頁(yè)面從上到下可以分為5個(gè)模塊
（2）CSS樣式分析
????????頁(yè)面中的各個(gè)模塊居中顯示，頁(yè)面的版心為980px。另外，頁(yè)面中的所有字體均為微軟雅黑，字體大小為16px，這些可以通過CSS公共樣式進(jìn)行定義。
2.頭部header模塊效果分析
（1）HTML結(jié)構(gòu)分析
????????“頭部”模塊整體由一個(gè)大盒子<div>進(jìn)行控制。內(nèi)部嵌套<img>和<div>分別用來搭建左側(cè)logo和右側(cè)文字內(nèi)容部分。
（2）CSS樣式分析
????????“頭部”模塊的寬為980px，通過設(shè)置外邊距屬性使其在頁(yè)面中居中顯示，并設(shè)置相對(duì)定位。左側(cè)logo和右側(cè)文字內(nèi)容部分相對(duì)外層大盒子設(shè)置絕對(duì)定位，最后還需設(shè)置文字的相關(guān)樣式等。
3.導(dǎo)航及banner模塊效果分析
（1）HTML結(jié)構(gòu)分析
????????“導(dǎo)航”及“banner”模塊分別由一個(gè)大盒子<div>進(jìn)行控制。導(dǎo)航內(nèi)容部分由<span>標(biāo)簽定義，banner圖由<img>標(biāo)簽定義。?
（2）css樣式分析
????????“導(dǎo)航”模塊的背景色通欄顯示，因此需設(shè)置最外層<div>的寬度100%，內(nèi)部嵌套的<div>寬度為980px，且在頁(yè)面中居中顯示。定義<span>標(biāo)簽左浮動(dòng)，并定義相關(guān)的文字樣式。最后還需設(shè)置“banner”模塊的圖片在頁(yè)面中居中顯示。
4.分類classify模塊效果分析?
（1）HTML結(jié)構(gòu)分析
????????“產(chǎn)品分類”模塊主要由<div>標(biāo)簽定義。
（2）css樣式分析
????????“產(chǎn)品分類”模塊的背景色通欄顯示，因此需設(shè)置最外層<div>的寬度100%，內(nèi)部嵌套的<div>寬度為980px，且在頁(yè)面中居中顯示。定義每一個(gè)分類模塊的<div>標(biāo)簽左浮動(dòng)，并定義相關(guān)的文字樣式。
5.產(chǎn)品展示show模塊效果分析
（1）HTML結(jié)構(gòu)分析
????????“產(chǎn)品展示”模塊主要由<div>標(biāo)簽嵌套<img>標(biāo)簽和<span>標(biāo)簽定義。
（2）樣式分析
????????“產(chǎn)品展示”模塊的背景色通欄顯示，因此需設(shè)置最外層<div>的寬度100%，內(nèi)部嵌套的<div>寬度為980px，且在頁(yè)面中居中顯示。定義每一個(gè)展示模塊的<div>標(biāo)簽左浮動(dòng)，并定義相關(guān)的文字樣式。
6.版權(quán)banquan模塊效果分析
（1）HTML結(jié)構(gòu)分析
????????“版權(quán)信息”模塊由<div>標(biāo)簽定義。
（2）樣式分析
????????“版權(quán)信息”模塊的背景圖通欄顯示，因此需設(shè)置最外層<div>的寬度100%，且文字內(nèi)容居中顯示。
三、HTML、CSS代碼分模塊展示
1.?頭部header模塊代碼
HTML代碼：
<!-- header begin!--><div id="header"><div class="logo"><img src="images/logo.jpg" alt=""> </div> <div class="one"><span>登錄 | 注冊(cè)</span></div></div>
<!-- herder end-->CSS代碼：
#header{width: 980px;height: 80px;margin: 0 center;
/* position: absolute; 設(shè)置絕對(duì)定位*/background-color:white;
}.logo{float: left;position: relative; /*設(shè)置相對(duì)定位*/padding-left: 20px; /*設(shè)置內(nèi)邊距*/padding-top: 15px;
}
.one{float: right;text-align: right;padding-right: 30px;padding-top: 35px;position: relative;color: orange;
}2.導(dǎo)航及banner模塊代碼
HTML代碼：?
<!-- banner begin--><div id="banner"><div class="two"><span>首頁(yè)</span><span>公司簡(jiǎn)介</span><span>美食甜品</span><span>用戶留言</span><span>聯(lián)系我們</span></div><div class="imgg"><img src="images/banner.jpg"></div></div>
<!-- banner end-->CSS代碼：
#banner{margin: 0 auto 0;width: 100%;height: 390px;
}
.two{width: 980px;margin: 0 auto;background-color: orange;color:brown;float: left;text-align: center;padding-top: 12px;height: 30px;list-style-type: none;
}
.two span{padding: 0 60px;
}
.imgg img{width: 100%;height: 360px;
}3.分類classify模塊
HTML代碼：
<!-- classify begin--><div id="classify"><div class="con"><img src="images/list1.png"><p>提拉米蘇</p></div><div class="con"><img src="images/list2.png"><p>甜甜圈</p></div><div class="con"><img src="images/list3.png"><p>芝士蛋糕</p></div><div class="con"><img src="images/list4.png"><p>馬卡龍</p></div><div class="con"><img src="images/list5.png"><p>西式甜點(diǎn)</p></div></div>
<!-- classify end-->CSS代碼：
#classify{padding: 20px 0;width:980px;height: 140px;background:wheat;
}
.con{width:173px;height: 196px;float: left;margin-left: 23px;display: inline-block;overflow: hidden;white-space: nowrap;position: relative;
}
.con img{border-radius: 50%;left: 20px;top:0;
/*width: 980px;height: 100px;
*/
}
.con p{
/* position: absolute;*/width: 250px;height: 50px;z-index: 2;left: 2px;top:90px;color: #e7bf80;margin: 5px 45px;position: absolute;
}
4.產(chǎn)品展示show模塊代碼
HTML代碼：
<!-- show begin--><div id="show"><div class="three"><img src="images/con1.jpg"><span>愛的N次方</span><span class="name">馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con2.jpg"><span>果肉果凍</span><span class="name">雙色馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con3.jpg"><span>芒果味</span><span class="name">布丁馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con4.jpg"><span>果凍荔枝味</span><span class="name">多彩馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con5.jpg"><span>果味巧克力</span><span class="name">西式甜點(diǎn)</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con6.jpg"><span>奶油水果</span><span class="name">提拉米蘇</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con7.jpg"><span>玫瑰花型</span><span class="name">布丁</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con8.jpg"><span>燕麥奶油</span><span class="name">芝士蛋糕</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div></div>
<!-- show end-->CSS代碼：
#show{width: 100%;height: 580px;background-color:lightgoldenrodyellow;
}
.three{padding: 17px;float: left;
}
.three img{width: 200px;
}
.three span{display: block;color: #865859;
}
.three .name{color: hotpink;
}
.three .huan{display: inline;
}5.版權(quán)banquan模塊代碼
HTML代碼：
<!-- banquan begin--><div id="banquan"><p>西式甜品網(wǎng)版權(quán)所有2020-2030京ICP備08001421號(hào) 京公網(wǎng)安備110108007702</p></div>
<!-- banquan end-->CSS代碼：
#banquan{width: 100%;text-align: center;height: 100px;background:url("images/footer.png")repeat-x;
}
#banquan p{padding-top: 50px;color: white;
}四、完整代碼
1.HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="實(shí)驗(yàn)1.css" type="text/css" rel="stylesheet"/>
<title>西式甜品網(wǎng)</title>
</head><body>
<!-- header begin!--><div id="header"><div class="logo"><img src="images/logo.jpg" alt=""> </div> <div class="one"><span>登錄 | 注冊(cè)</span></div></div>
<!-- herder end--><!-- banner begin--><div id="banner"><div class="two"><span>首頁(yè)</span><span>公司簡(jiǎn)介</span><span>美食甜品</span><span>用戶留言</span><span>聯(lián)系我們</span></div><div class="imgg"><img src="images/banner.jpg"></div></div>
<!-- banner end--><!-- classify begin--><div id="classify"><div class="con"><img src="images/list1.png"><p>提拉米蘇</p></div><div class="con"><img src="images/list2.png"><p>甜甜圈</p></div><div class="con"><img src="images/list3.png"><p>芝士蛋糕</p></div><div class="con"><img src="images/list4.png"><p>馬卡龍</p></div><div class="con"><img src="images/list5.png"><p>西式甜點(diǎn)</p></div></div>
<!-- classify end--><!-- show begin--><div id="show"><div class="three"><img src="images/con1.jpg"><span>愛的N次方</span><span class="name">馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con2.jpg"><span>果肉果凍</span><span class="name">雙色馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con3.jpg"><span>芒果味</span><span class="name">布丁馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con4.jpg"><span>果凍荔枝味</span><span class="name">多彩馬卡龍</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con5.jpg"><span>果味巧克力</span><span class="name">西式甜點(diǎn)</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con6.jpg"><span>奶油水果</span><span class="name">提拉米蘇</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con7.jpg"><span>玫瑰花型</span><span class="name">布丁</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div><div class="three"><img src="images/con8.jpg"><span>燕麥奶油</span><span class="name">芝士蛋糕</span><span class="huan">價(jià)格：<span class="huan" style="color:hotpink">30元</span></span></div></div>
<!-- show end--><!-- banquan begin--><div id="banquan"><p>西式甜品網(wǎng)版權(quán)所有2020-2030京ICP備08001421號(hào) 京公網(wǎng)安備110108007702</p></div>
<!-- banquan end-->
</body>
</html>
2.CSS代碼：
@charset "utf-8";
/* CSS Document */
*{margin: 0 auto 0;padding: 0;}
body{font-family: "微軟雅黑";font-size: 16px;width: 980px;} /*頁(yè)面各個(gè)模塊居中顯示*/#header{width: 980px;height: 80px;margin: 0 center;
/* position: absolute; 設(shè)置絕對(duì)定位*/background-color:white;
}.logo{float: left;position: relative; /*設(shè)置相對(duì)定位*/padding-left: 20px; /*設(shè)置內(nèi)邊距*/padding-top: 15px;
}
.one{float: right;text-align: right;padding-right: 30px;padding-top: 35px;position: relative;color: orange;
}#banner{margin: 0 auto 0;width: 100%;height: 390px;
}
.two{width: 980px;margin: 0 auto;background-color: orange;color:brown;float: left;text-align: center;padding-top: 12px;height: 30px;list-style-type: none;
}
.two span{padding: 0 60px;
}
.imgg img{width: 100%;height: 360px;
}#classify{padding: 20px 0;width:980px;height: 140px;background:wheat;
}
.con{width:173px;height: 196px;float: left;margin-left: 23px;display: inline-block;overflow: hidden;white-space: nowrap;position: relative;
}
.con img{border-radius: 50%;left: 20px;top:0;
/*width: 980px;height: 100px;
*/
}
.con p{
/* position: absolute;*/width: 250px;height: 50px;z-index: 2;left: 2px;top:90px;color: #e7bf80;margin: 5px 45px;position: absolute;
}#show{width: 100%;height: 580px;background-color:lightgoldenrodyellow;
}
.three{padding: 17px;float: left;
}
.three img{width: 200px;
}
.three span{display: block;color: #865859;
}
.three .name{color: hotpink;
}
.three .huan{display: inline;
}#banquan{width: 100%;text-align: center;height: 100px;background:url("images/footer.png")repeat-x;
}
#banquan p{padding-top: 50px;color: white;
}