項(xiàng)目13-芙蓉商城制作

芙蓉商城制作項(xiàng)目要點(diǎn)div-ul-li實(shí)現(xiàn)導(dǎo)航菜單 01.02.div-dl-dt-dd實(shí)現(xiàn)圖文混編03.偽類樣式控制超鏈接樣式技能目標(biāo)使用div-ul-li實(shí)現(xiàn)導(dǎo)航菜單局部布局01.02.使用div-dl-dt-dd實(shí)現(xiàn)圖文混編03.使用偽類樣式控制超鏈接樣式6.1分塊制作商城網(wǎng)站首頁6.1.2制作商城網(wǎng)站首頁的總體布局首先書寫首頁的總體頁面組織結(jié)構(gòu)6.1.2制作商城網(wǎng)站首頁的總體布局首先書寫首頁的總體頁面組織結(jié)構(gòu)6.1.2制作商城網(wǎng)站首頁的總體布局然后增加首頁的總體頁面組織結(jié)構(gòu)的樣式在樣式表中首先設(shè)置全局的屬性，使用全局選擇器設(shè)置內(nèi)外邊距為0，整個(gè)網(wǎng)頁的超鏈接為不帶下劃線；列表默認(rèn)為不帶列表符號，代碼如下：/*設(shè)置整個(gè)網(wǎng)頁的通用默認(rèn)樣式*/*{margin:0px;padding:0px;}a{text-decoration:none;}ul{list-style:none;}6.1.2制作商城網(wǎng)站首頁的總體布局樣式分析：一、總體布局1）container需要一個(gè)自適應(yīng)的高度，container寬度設(shè)置為980px，水平居中。2）header、main、footer的寬度和外層的container寬度一致：width:100%；3）header高度由背景圖片確定是150px，添加背景圖片，分別量取效果圖得到main和footer的高度是400px和100px；4)分別為header、main、footer加背景顏色。6.1.2制作商城網(wǎng)站首頁的總體布局6.1.2制作商城網(wǎng)站首頁的總體布局二、主體main部分

.leftcategory{background:#666;width:20%}.rightsidebar{background:blue;width:20%}.midcontent{background:red;width:60%;}6.1.2制作商城網(wǎng)站首頁的總體布局6.1.2制作商城網(wǎng)站首頁的總體布局二、主體main部分

.leftcategory,.midcontent,.rightsidebar{float:left;width:20%;height:100%}/*相同屬性集體聲明*/6.1.2制作商城網(wǎng)站首頁的總體布局6.1.3實(shí)現(xiàn)頂部布局6.1.3實(shí)現(xiàn)頂部布局6.1.3實(shí)現(xiàn)頂部布局1、首先書寫首頁的頂部組織結(jié)構(gòu)6.1.3實(shí)現(xiàn)頂部布局瀏覽效果6.1.3實(shí)現(xiàn)頂部布局2、然后增加首頁的頂部的組織結(jié)構(gòu)的樣式logo的width和height:根據(jù)logo圖片大小進(jìn)行設(shè)置up_right_menu的寬width為header的40%，高h(yuǎn)eight:40pxup_right_hello寬度稍大為70%，高h(yuǎn)eight:30px；nav的寬100%，高h(yuǎn)eight:30px可以為各部分區(qū)塊增加背景顏色6.1.3實(shí)現(xiàn)頂部布局樣式6.1.3實(shí)現(xiàn)頂部布局樣式整個(gè)頂部header，使用一張背景圖片，注意圖片的background-position屬性的設(shè)置。logo、up_right_menu、up_right_hello設(shè)置浮動(dòng)nav設(shè)置成？6.1.3實(shí)現(xiàn)頂部布局樣式6.1.3實(shí)現(xiàn)頂部布局樣式6.1.3實(shí)現(xiàn)頂部布局樣式6.1.3實(shí)現(xiàn)頂部布局6.1.4實(shí)現(xiàn)頂部制作-logo+頂部菜單6.1.4實(shí)現(xiàn)頂部制作-logo+頂部菜單6.1.4實(shí)現(xiàn)頂部制作-logo+頂部菜單1、首先將logo圖片呈現(xiàn)出來，替代背景顏色6.1.4實(shí)現(xiàn)頂部制作-logo+頂部菜單2、右上部菜單的組織結(jié)構(gòu)（內(nèi)容）6.1.4實(shí)現(xiàn)頂部制作-logo+頂部菜單2、右上部菜單的組織結(jié)構(gòu)（內(nèi)容）6.1.4實(shí)現(xiàn)頂部制作-logo+頂部菜單6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航歡迎詞的字體設(shè)置成：白色、24px6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航設(shè)置nav導(dǎo)航菜單，導(dǎo)航菜單分成左右兩部分：nav_left和nav_right，具體組織代碼如下：6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航1、左半部nav_left用表單，具體組織代碼如下：6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航、左半部nav_left樣式設(shè)置如下：

padding-left:20px;字體顏色color:#FFFFFF;float:left;6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航、將左右兩部分分別設(shè)置不同的背景顏色

6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航、導(dǎo)航條右半部分nav_right組織結(jié)構(gòu)代碼如下：

6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航、將左右兩部分分別設(shè)置不同的背景顏色，并且都設(shè)置為左浮動(dòng)

6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航、設(shè)置左右兩部分的寬度：通過測量背景圖片左寬：495px?右寬:485px;

6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航、設(shè)置左右兩部分的寬度：通過測量背景圖片左寬：495px右寬:485px;

6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航在圖像處理工具中量得每一個(gè)菜單項(xiàng)的寬度是121px，這樣設(shè)置每個(gè)li寬度121px，取消右部和整個(gè)nav的背景顏色。6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航

設(shè)置網(wǎng)站統(tǒng)一的超鏈接形式a{text-decoration:none;color:#000000;}調(diào)整li是其基本居中6.1.5實(shí)現(xiàn)頂部制作-歡迎詞+底部導(dǎo)航

去掉左部的背景色6.2.1實(shí)現(xiàn)中部商品分類制作6.2.1實(shí)現(xiàn)中部商品分類制作6.2.1實(shí)現(xiàn)中部商品分類制作首先完成左部商品分類leftcategory的組織結(jié)構(gòu)，具體組織代碼如下：6.2.1實(shí)現(xiàn)中部商品分類制作樣式分析如下：1、背景圖片寬203，高6416.2.1實(shí)現(xiàn)中部商品分類制作2、內(nèi)容部分占據(jù)的寬是203-20=183，高是641-35=6083、內(nèi)容與塊邊緣的距離用填充padding設(shè)置左右各10px，上填充356.2.1實(shí)現(xiàn)中部商品分類制作4、設(shè)置h1：加粗，14px,宋體行高27px5、每個(gè)項(xiàng)目li都左浮動(dòng)，寬度占據(jù)183/3=61,字體14px6、每個(gè)無序列表所占高度是608/4=152，列表項(xiàng)共5行，每行的高度（152-27）/5=125/5=25px可以設(shè)置為li的行高。6.2.1實(shí)現(xiàn)中部商品分類制作7、調(diào)整中部的midcontent和sidebar的寬度高度左邊：203/980=20.7%查看中間圖片的寬524px,524/980=59.3%20.7%+59.3%=80%因此右邊剩下20%整理所有的超鏈接,設(shè)置超鏈接的統(tǒng)一樣式。6.2.2實(shí)現(xiàn)中部主題制作6.2.2實(shí)現(xiàn)中部主題制作6.2.1實(shí)現(xiàn)中部主題制作首先完成中部midcontent的組織結(jié)構(gòu)1、分成上下兩塊<divclass="midcontent_top"></div><divclass="midcontent_list"></div>2、上塊是一張圖片3、下塊是9個(gè)dl-dt-dd圖文結(jié)構(gòu)6.2.2實(shí)現(xiàn)中部主題制作思考樣式：header與main之間隔開3px6.2.2實(shí)現(xiàn)中部主題制作思考樣式：1、顯示出上部圖片和下邊背景1）設(shè)置midcontent、midcontent_top、midcontent_list的寬度是527px2）設(shè)置midcontent_top的高度是190px3）設(shè)置midcontent_list的高度440：塊高h(yuǎn)eight:403px;填充padding:37px0px0px0px;6.2.2實(shí)現(xiàn)中部主題制作思考樣式：2、設(shè)置中部midcontent與左邊分類leftcategory留有一定空隙3、midcontent_top與midcontent_list之間要隔開一定距離6.2.2實(shí)現(xiàn)中部主題制作思考樣式：4、設(shè)置midcontent_list水平居中6.2.2實(shí)現(xiàn)中部主題制作思考樣式：5、注意dt中圖片的寬和高？midcontent_list塊的內(nèi)容部分的寬和高？midcontent_list塊中有3行3列的dl

每個(gè)dl的寬度：527/3=175每個(gè)dl的高度：403/3=134每個(gè)dl都設(shè)置左浮動(dòng)6.2.2實(shí)現(xiàn)中部主題制作思考樣式：6、dd中文字大小14pxImg圖片大??？圖片加邊框6.2.3實(shí)現(xiàn)中部右邊制作6.2.3實(shí)現(xiàn)中部右邊制作main部分的右部rightsidebar分成上、中、下三部分，分別以rightsidebar_top、rightsidebar_center、rightsidebar_foot命名。6.2.3實(shí)現(xiàn)中部右邊制作6.2.3實(shí)現(xiàn)中部右邊制作思考樣式：1、midcontent與rightsidebar留2px空隙2、rightsidebar最大可以設(shè)置的寬度？6.2.3實(shí)現(xiàn)中部右邊制作思考樣式：1、midcontent與rightsidebar留2px空隙leftcategory：183+10+10+2=205midcontent：527+2=5292、rightsidebar：980-205-529=2466.2.3實(shí)現(xiàn)中部右邊制作rightsidebar_top的組織結(jié)構(gòu)：圖文dl-dt-dd6.2.3實(shí)現(xiàn)中部右邊制作rightsidebar_top的樣式：1)寬、高2）dt?3)img?4)dd?6.2.3實(shí)現(xiàn)中部右邊制作rightsidebar_center的組織結(jié)構(gòu)：圖文dl-dt-dd6.2.3實(shí)現(xiàn)中部右邊制作rightsidebar_center的樣式：1)寬、高、背景，其他？2）dt?3)img?4)dd?？6.2.3實(shí)現(xiàn)中部右邊制作調(diào)整rightsidebar_center的樣式使其更美觀6.3實(shí)現(xiàn)首頁footer制作6.3實(shí)現(xiàn)首頁footer制作6.3實(shí)現(xiàn)首頁footer制作首先：書寫內(nèi)容6.3實(shí)現(xiàn)首頁footer制作然后：樣式設(shè)置與main之間留空隙水平居中取消原來footer的高度；消一些過度使用的背景實(shí)現(xiàn)注冊頁register.html的制作注冊頁的頂部和底部可以復(fù)用首頁的頂部和底部。使用<iframe>實(shí)現(xiàn)首頂部和底部的復(fù)用。分離首頁頂部為單獨(dú)的頁面文件，存為header.html分離底部為單獨(dú)的頁面文件，存為footer.html實(shí)現(xiàn)注冊頁register.html的制作header.html的內(nèi)容結(jié)構(gòu)<body><divid="container">

<divid="header"><divclass="logo">……</div><!--logo結(jié)束-->……

</div><!--頂部(header)結(jié)束-->

</div><!--id="container"結(jié)束--></body>實(shí)現(xiàn)注冊頁register.html的制作footer.html的內(nèi)容結(jié)構(gòu)<body><divid="container"><divid="footer"><p></p><hr/><p></p><p></p><p></p>

</div><!--底部(footer)結(jié)束--></div><!--整個(gè)容器(container)結(jié)束--></body>實(shí)現(xiàn)注冊頁register.html的制作<iframe>內(nèi)嵌框架的基本語法如下：<iframesrc="引用的頁面地址"width=""height=""scrolling="是否顯示滾動(dòng)條"frameborder="邊框"></iframe>src：為被嵌入網(wǎng)頁的地址；scrolling：是否有滾動(dòng)條，yes有，no無，auto是根據(jù)被顯示的HTML自動(dòng)顯示或隱藏；width：寬度；height：高度，高度、寬度可以為百分比，可以為具體高寬數(shù)值，不需要跟單位。實(shí)現(xiàn)注冊頁register.html的制作在網(wǎng)站register.html頁面的頂部、底部位置，引用上述分離的header.html和footer.html最初的register.html對應(yīng)的代碼：<body><iframeid="header"src="header.html"width="980"height="150"frameborder="0"scrolling="no"></iframe><divid="registermain"></div><!--registermain結(jié)束--><iframeid="footer"src="footer.html"width="980"height="120"frameborder="0"scrolling="no"></iframe></body>實(shí)現(xiàn)注冊頁register.html的制作register.html引用應(yīng)用的樣式實(shí)現(xiàn)注冊頁register.html的制作最初的register.html頁面效果：實(shí)現(xiàn)注冊頁register.html的制作register.html頁面主體部分的位置空間：根據(jù)背景圖片大小確定：width:980px;height:520px;實(shí)現(xiàn)注冊頁register.html的制作修改register.html的頁面組織結(jié)構(gòu)實(shí)現(xiàn)注冊頁register.html的制作背景圖片替換register.html背景顏色：實(shí)現(xiàn)注冊頁register.html的制作register.html頁面內(nèi)容可以用表格來布局，使用4行3列的表格，左邊提示文字在第一列，第二列是文本框、密碼框以及圖片按鈕，第三列是協(xié)議部分，協(xié)議跨4行。實(shí)現(xiàn)注冊頁register.html的制作實(shí)現(xiàn)注冊頁register.html的制作分析register頁面的樣式1）查看頁面效果圖，內(nèi)容占據(jù)的寬高？內(nèi)填充？實(shí)現(xiàn)注冊頁register.html的制作分析register頁面的樣式2）4行總高度？每一行的高度？3）最左邊文字提示列的寬度？文字右對齊4）中間列的寬度？居中顯示5）input的寬高？border的設(shè)置？實(shí)現(xiàn)登錄頁login.html的制作登錄頁的頂部和底部可以復(fù)用首頁的頂部和底部。使用<iframe>實(shí)現(xiàn)首頂部和底部的復(fù)用。實(shí)現(xiàn)登錄頁login.html的制作login.html引用應(yīng)用的樣式實(shí)現(xiàn)