版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
制作“時尚前沿”主頁第10章匯報人：***目錄CONTENT創(chuàng)建站點目錄結(jié)構(gòu)分析與基礎(chǔ)樣式定義制作“導(dǎo)航”模塊制作
banner模塊制作“精品展示”模塊制作“潮流前沿”模塊制作“版權(quán)信息”模塊本章導(dǎo)讀隨著網(wǎng)絡(luò)的迅速發(fā)展，電子商務(wù)逐漸被互聯(lián)網(wǎng)用戶接受，電商網(wǎng)站備受青睞，在線購物網(wǎng)站是當(dāng)前比較流行的一類網(wǎng)站，隨著網(wǎng)絡(luò)購物、互聯(lián)網(wǎng)交易的普及，如淘寶、京東、亞馬孫等類型的在線網(wǎng)站近幾年的風(fēng)靡，越來越多的公司和企業(yè)都已經(jīng)著手架設(shè)在線購物網(wǎng)站。在本章中，我們將使用
DIV+CSS的布局模式，制作“時尚前沿”主頁，學(xué)習(xí)綜合應(yīng)用盒子模型和書寫
CSS樣式屬性。第一節(jié)PART.01創(chuàng)建站點目錄在進(jìn)行具體的“時尚前沿”主頁制作前，先創(chuàng)建好站點文件夾，其目錄結(jié)構(gòu)如圖10-1所示。圖10-1站點目錄結(jié)構(gòu)第二節(jié)PART.02結(jié)構(gòu)分析與基礎(chǔ)樣式定義1.HTML結(jié)構(gòu)分析與布局“時尚前沿”主頁從上到下可以分為“導(dǎo)航”“主體”和“版權(quán)信息”3個模塊，其中主體部分又包含
banner模塊、精品展示模塊、潮流前沿模塊，如圖10-2所示。圖10-2“時尚前沿”頁面布局1.HTML結(jié)構(gòu)分析與布局下面對“時尚前沿”頁面進(jìn)行整體布局，打開
index.html，然后使用
div標(biāo)記對頁面進(jìn)行整體布局，其代碼如下：<!DOCTYPEhtml><html><head>
<metacharset="UTF-8">
<title>時尚前沿</title></head><body>1.HTML結(jié)構(gòu)分析與布局
<!--頭部開始-->
<divclass="header"></div>
<!--頭部結(jié)束-->
<!—主體內(nèi)容開始-->
<divclass="container"></div>
<!—主體內(nèi)容結(jié)束-->
<!—版權(quán)區(qū)開始-->
<divclass="footer"></div>
<!—版權(quán)區(qū)結(jié)束-->1.HTML結(jié)構(gòu)分析與布局</body></html>上述代碼中，定義了類名
header、container、footer的3個
<div>標(biāo)記，分別用來搭建“導(dǎo)航”“主體”和“版權(quán)信息”3大模塊的結(jié)構(gòu)，將頁面整體上分為3個部分。2.定義基礎(chǔ)
CSS樣式在站點目錄的
CSS文件夾下新建樣式表文件
index.css，在index.html頁面使用外部樣式表導(dǎo)入
main.css，然后定義基礎(chǔ)樣式，其代碼如下：/*重置瀏覽器默認(rèn)樣式*/*{
margin:0;
padding:0;list-style:none;}2.定義基礎(chǔ)
CSS樣式/*全局控制樣式*//*網(wǎng)頁通用樣式*/body{
background:#fff9ed;
font-family:"MicrosoftYaHei";
font-size:14px;
color:#fff;}/*設(shè)置超鏈接樣式*/2.定義基礎(chǔ)
CSS樣式a:link,a:visited{
text-decoration:none;
color:#fff;
font-size:16px;}/*設(shè)置偽類，用于清除浮動*/.clearfix:after{
content:''";2.定義基礎(chǔ)
CSS樣式
display:table;
clear:both;
height:0;}/*版心*/.main{
width:980px;
margin:auto;}第三節(jié)PART.03制作“導(dǎo)航”模塊1.結(jié)構(gòu)分析“導(dǎo)航”模塊背景通欄布局，在最外層嵌套一個大盒子。另外，導(dǎo)航由
logo和6個子欄目構(gòu)成，可以通過無序列表
<ul>嵌套
<li>標(biāo)記定義。此外，每個導(dǎo)航都是可以點擊的鏈接，所以需要在
<li>標(biāo)記中嵌套超鏈接
<a>標(biāo)記，其具體結(jié)構(gòu)如圖10-3所示。圖10-3“導(dǎo)航”模塊結(jié)構(gòu)1.結(jié)構(gòu)分析接下來搭建結(jié)構(gòu)，其代碼如下，其中類名
main為頁面版心。<divclass="header">
<ulclass="navmain">
<liclass="logo"><imgsrc="images/logo.png"alt="logo"></li>
<li><ahref="#">首頁</a></li>
<li><ahref="#">時尚大片</a></li>
<li><ahref="#">穿著速遞</a></li>
<li><ahref="#">時尚圈</a></li>
<li><ahref="#">時尚專欄</a></li>1.結(jié)構(gòu)分析
<li><ahref="#">注冊/登錄</a></li>
</ul></div>2.書寫
CSS樣式/*header頭部開始*/.header{
height:128px;
background:url(../images/head_bg.jpg)repeat-x;
border-bottom:3pxsolid#d5d5d5;}.header.navli{
float:left;}.header.navlia{
display:inline-block;
width:114px;
height:91px;
text-align:center;
line-height:70px;}.header.navlia:hover{
background:url(../images/xuanfu.png)no-repeat;}2.書寫
CSS樣式設(shè)置好樣式后，保存網(wǎng)頁，其效果如圖10-4所示。圖10-4“導(dǎo)航”模塊效果第四節(jié)PART.04制作
banner模塊1.結(jié)構(gòu)分析banner模塊結(jié)構(gòu)非常簡單，一個
div標(biāo)簽，如圖10-5所示。圖10-5banner模塊結(jié)構(gòu)1.結(jié)構(gòu)分析接下來搭建結(jié)構(gòu)，其代碼如下：<divclass="banner"></div>2.書寫
CSS樣式.banner{
height:373px;
background:url(../images/banner.png);}第五節(jié)PART.05制作“精品展示”模塊1.結(jié)構(gòu)分析“精品展示”模塊由三部分內(nèi)容構(gòu)成，在這里使用定義列表
<dl>標(biāo)記搭建結(jié)構(gòu)，另外內(nèi)容部分的說明文字可以通過
<a>標(biāo)記定義，具體結(jié)構(gòu)如圖10-6所示。圖10-6“精品展示”模塊結(jié)構(gòu)1.結(jié)構(gòu)分析接下來搭建結(jié)構(gòu)，其代碼如下：<!--精品展示模塊開始--><divclass="content">
<divclass="bg">
<dlclass="left">
<dtclass="left1"><imgsrc="images/pic01.jpg"></dt>
<ddclass="left2"><ahref="#">明星風(fēng)尚</a></dd>
<dtclass="left3"><imgsrc="images/pic02.jpg"alt="">
<ddclass="left4"><ahref="#">時尚博主</a></dd>
</dl>
<dlclass="center">
<dtclass="center1"><imgsrc="images/pic03.jpg"></dt>
<ddclass="center2"><ahref="#">流行搭配</a></dd>
<dtclass="center3"><imgsrc="images/pic04.jpg"alt=""></dt>
<ddclass="center4"><ahref="#">精選秀場</a></dd>
</dl>
<dlclass="right">
<dtclass="right1"><imgsrc="images/pic05.jpg"lt=""></dt>
<ddclass="right2"><ahref="#">環(huán)球街拍</a></dd>
</dl>
</div></div><!--精品展示模塊結(jié)束-->2.書寫
CSS樣式/*精品模塊開始*/.content{
height:345px;
background-color:#ec6e47;
padding:10px35px5px;}.content.bg{
width:908px;
height:335px;
background-color:#fff;}.left,.center,.right{
float:left;
width:280px;
height:314px;
margin-top:10px;}.right{
width:320px;
background-color:#f60;}.left{
margin-left:8px;}.center{
margin:10px5px;}.left1,.left3{
float:left;}.left1{
height:169px;
width:162px;
margin-bottom:8px;}.left3{
height:137px;
width:162px;}.left2{
float:right;
width:118px;
text-align:center;
line-height:169px;
background-color:#000;
margin-bottom:8px;}.left4{
width:118px;
float:right;
text-align:center;
line-height:137px;
background-color:#000;}.left2:hover,.left4:hover{
background-color:#ec6e47;}/*中間*/.center1,.center3{
float:left;}.center1{
width:162px;
height:117px;
margin-bottom:10px;}.center3{
width:162px;
height:188px;}.center2,.center4{
width:118px;
float:right;
background-color:#000;
text-align:center;}.center2{
height:117px;
line-height:117px;}.center4{
height:188px;
line-height:188px;}.center2:hover,.center4:hover{
background-color:#ec6e47;}/*右側(cè)*/.right1{float:left;}.right2{
height:315px;
line-height:314px;
text-align:center;
background-color:#000;}.right2:hover{
background-color:#ec6e47;}第六節(jié)PART.06制作“潮流前沿”模塊1.結(jié)構(gòu)分析“潮流前沿”模塊分為標(biāo)題和潮流商品列表兩部分。其中標(biāo)題由<h2>標(biāo)記定義，潮流商品列表由四個
<dl>標(biāo)記搭建，包含在一個大的div盒子中，<dt>定義列表圖片，<dd>
定義列表商品信息和快速通道，其具體結(jié)構(gòu)如圖10-7所示。圖10-7“潮流前沿”模塊結(jié)構(gòu)1.結(jié)構(gòu)分析接下來搭建結(jié)構(gòu)，其代碼如下：<divclass="currentclearfix">
<h2>潮流前沿/Tidalcurrent</h2>
<divclass="box">
<dlclass="match_1">
<dt></dt>
<ddclass="current1">潮流飾品</dd>
<ddclass="current2">快速購買通道</dd>
</dl>1.結(jié)構(gòu)分析
<dlclass="match_2">
<dt></dt>
<ddclass="current1">時尚女鞋</dd>
<ddclass="current2">快速購買通道</dd>
</dl>
<dlclass="match_3">
<dt></dt>
<ddclass="current1">精品包包</dd>
<ddclass="current2">快速購買通道</dd>1.結(jié)構(gòu)分析
</dl>
<dlclass="match_4">
<dt></dt>
<ddclass="current1">百搭衣帽</dd>
<ddclass="current2">快速購買通道</dd>
</dl>
</div></div><!--潮流前沿模塊結(jié)束-->2.書寫
CSS樣式在
index.html中書寫
CSS樣式用于控制“潮流前沿”模塊，其具體代碼如下：/*潮流前沿開始*/.current{
margin-top:80px;}.currenth2{
width:259px;
height:45px;2.書寫
CSS樣式
line-height:45px;
color:#fff;
font-size:20px;
font-weight:100;
background-color:#ea6c46;
text-align:center;}.current.box{
width:944px;2.書寫
CSS樣式
height:342px;
border:1pxsolid#dcd2ba;
padding:13px20px;}.current.boxdl{
float:left;
width:229px;
height:330px;
border:1pxsolid#DCD2BA;2.書寫
CSS樣式
margin-right:5px;}.currentdt{
height:212px;
border-bottom:1pxsolid#dcd2ba;}.current1{
height:66px;
line-height:66px;2.書寫
CSS樣式
text-align:center;
font-size:22px;
color:#7a7a7a;
background-color:#fff;}.current.current2{
width:140px;
height:38px;2.書寫
CSS樣式
background:#f3734eurl(../images/gouwu.jpg)leftcenterno-repeat;
line-height:38px;
color:#fff;
padding-left:60px;
margin:014px;}.match_1dt{2.書寫
CSS樣式
background:url(../images/match01.jpg)no-repeatcentercenter
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 物探技能考試試題及答案
- 防災(zāi)減災(zāi)救災(zāi)答題知識競賽附答案
- 2026年中藥學(xué)類之中藥學(xué)（士）題庫與答案
- 口腔執(zhí)業(yè)醫(yī)師練習(xí)題及答案
- 基礎(chǔ)護(hù)理期末考試題及答案
- 中醫(yī)專業(yè)測試題及答案
- 民勤縣輔警招聘公安基礎(chǔ)知識考試題庫及答案
- 2025行政執(zhí)法人員考試題庫(附答案)
- 實時開發(fā)面試題庫及答案
- 2025年食品安全管理員考試題庫及參考答案大全
- 造口常用護(hù)理用品介紹
- 小米銷售新人培訓(xùn)
- (新教材)2025年秋期部編人教版二年級上冊語文第七單元復(fù)習(xí)課件
- T-CAPC 019-2025 零售藥店常見輕微病癥健康管理規(guī)范
- 康定情歌音樂鑒賞
- 2025年四川省解除（終止）勞動合同證明書模板
- 2025年焊工證考試模擬試題含答案
- 銀行安全保衛(wèi)基礎(chǔ)知識考試試題及答案
- 項目競價文件
- 人工智能技術(shù)在精算數(shù)據(jù)分析中的應(yīng)用研究-洞察及研究
- 木工安全操作教育培訓(xùn)課件
評論
0/150
提交評論