HTML代碼4種范例-網(wǎng)頁設(shè)計(jì)_第1頁
HTML代碼4種范例-網(wǎng)頁設(shè)計(jì)_第2頁
HTML代碼4種范例-網(wǎng)頁設(shè)計(jì)_第3頁
HTML代碼4種范例-網(wǎng)頁設(shè)計(jì)_第4頁
HTML代碼4種范例-網(wǎng)頁設(shè)計(jì)_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

./范例1——Shopping_mall效果圖HTML代碼<!doctypehtml><html><head><metacharset="utf-8"><title>無標(biāo)題文檔</title><linkrel="stylesheet"href="css/Shoppingmall.css"type="text/css"/></head><bodyonselectstart="returnfalse"><!--<divid=Tdivstyle="HEIGHT:45px;LEFT:0px;POSITION:absolute;TOP:0px;WIDTH:45px;Z-INDEX:25"><inputname="image1"type="image"id="image1"src="mrsoft.jpg"width="52"height="249"border="0"></div>--> <!--開始?。?-><divid="Layer1"style="position:absolute;left:0;top:0;width:1500;height:1500;z-index:-1"><divalign="center"><embedsrc="flash3080.swf"width="1500"height="1500"wmode="transparent"></div></div><divid="Layer2"style="left:0;top:0;"> <divid="container"><divclass="header"> <divclass="header_top"> <ul><listyle="padding-left:55px;">您好,歡迎光臨商城！<span><ahref="register.html"onMouseOut="out<>"onMouseOver="over<'此處注冊(cè)新用戶'>">注冊(cè)</a> <ahref="login.html">登錄</a>]</span> 購物車共計(jì)商品 0  件 合計(jì) 0.00</li><li><imgstyle="padding:4px0px0px25px;"src="images/header_top_gif.gif"/></li><li><span><ahref="login.html">信任登錄</a></span></li><liid="showTime"style="padding-left:20px;"></li><listyle="padding-left:20px;"><span><ahref="#"onClick="window.open<'date.html','','width=557,height=280,top=10,left=20'>;">日歷</a></span></li><listyle="padding-left:110px;"class="header_top_small_navigation"><ahref="shoppingCar.html">查看購物車</a></li><li>|</li><liclass="header_top_small_navigation"><ahref="shopSearch.html">訂單查詢</a></li><li>|</li><liclass="header_top_small_navigation"><ahref="#">幫助中心</a></li><li>|</li><liclass="header_top_small_navigation"><ahref="#">優(yōu)惠活動(dòng)</a></li><liid="Tdiv"style="margin-right:0px;"></li> </ul></div><divstyle="position:absolute;padding-left:130px;padding-top:10px;"><imgwidth="50"height="50s"src="images/logo2.gif"></div><divclass="header_mid"> <i><pstyle="padding-left:130px;"class="header_mid_font">咨詢熱線：</p><pclass="header_mid_font2">400–676–5919</p></i><divstyle="clear:both"></div><formaction="#"method="post"><inputclass="search_input"type="text"maxlength="30"/><inputname="search_button"type="image"src="images/header_mid_search_button.jpg"/> </form></div><divclass="navigation"> <p><ahref="#"><imgstyle="margin-left:57px;"src="images/header_navigation_index_button.jpg"/></a></p><ul> <lionMouseOver="Fsubmenu<'精品女裝'>"><aclass="navigation_first_item"href="content.html">精品女裝</a></li><liclass="navigation_bg_border"></li><lionMouseOver="Fsubmenu<'時(shí)尚男裝'>"><ahref="#">時(shí)尚男裝</a></li><liclass="navigation_bg_border"></li><lionMouseOver="Fsubmenu<'童裝'>"><ahref="#">童裝</a></li><liclass="navigation_bg_border"></li><lionMouseOver="Fsubmenu<'睡衣'>"><ahref="#">睡衣</a></li><liclass="navigation_bg_border"></li><lionMouseOver="Fsubmenu<'女士內(nèi)衣'>"><ahref="#">女士內(nèi)衣</a></li><liclass="navigation_bg_border"></li></ul></div></div><!--頭部結(jié)束--><!--正文開始--> <divclass="content"> <!--上邊界開始--><div> <divclass="content_top_wide_boder"> <imgstyle="padding-left:22px;"src="images/content_top_wide_boder_gif.gif"/> <spanid="submenu"></span></div></div><!--上邊界結(jié)束--><spanonMouseOver="Fsubmenu<'隱藏二級(jí)導(dǎo)航'>"><!--左部分開始--><divclass="content_left"> <!--登錄開始--> <divclass="content_left_login"> <imgwidth="213"src="images/content_left_login_title.jpg"/><divclass="content_left_login_bg"> <formaction="#"method="post">用戶名：<inputclass="content_left_login_bg_input"type="text"/><br/>密<pclass="content_left_login_bg_p1"></p>碼：<inputclass="content_left_login_bg_input"type="password"/><pclass="content_left_login_bg_p2"> <inputtype="image"maxlength="20"src="images/login_button.jpg"/> <inputtype="image"maxlength="20"src="images/register.jpg"onClick="javascript:window.open<'register.html','',''>;"/></p></form></div></div><!--登錄結(jié)束--><!--商品分類開始--><divclass="content_left_classification_of_goods"> <ul> <ahref="#">精品女裝</a><ahref="#">時(shí)尚男裝</a><ahref="#">童裝</a><ahref="#">睡衣</a><ahref="#">女士內(nèi)衣</a><ahref="#">查看更多分類裝</a></ul></div><!--商品分類結(jié)束--><!--選擇價(jià)格開始--> <divclass="content_left_suitable_price"> <ul> <li><ahref="#">50元以下</a></li><li><ahref="#">50-100元</a></li><li><ahref="#">100-200元</a></li><li><ahref="#">200-300元</a></li><li><ahref="#">300-400元</a></li><li><ahref="#">500元以上</a></li> </ul></div><!--選擇價(jià)格結(jié)束--><imgstyle="margin-top:10px;"src="images/hot_sale.jpg"/><!--熱銷開始--><divclass="content_left_hot_sale"> <divclass="content_left_hot_sale_border2"> <divclass="content_left_hot_sale_border3"> <ul> <liclass="content_left_hot_sale_redgif">1</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_redgif">2</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_redgif">3</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_orangegif">4</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_orangegif">5</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_orangegif">6</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div> <liclass="content_left_hot_sale_orangegif">7</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_orangegif">8</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_orangegif">9</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div><liclass="content_left_hot_sale_orangegif">10</li><li><ahref="#">2012夏季新款時(shí)尚百搭</a></li><divstyle="clear:both;"></div></ul></div></div></div><!--熱銷結(jié)束--></div><!--左部分結(jié)束--><!--中間部分和右邊部分開始--> <divclass="conten_MidAndRight"> <!--中間部分開始--> <divclass="content_midfloat"> <divstyle="height:300px;"><ahref="#"><imgid="changeable_img"width="540"height="285"class="gray_border"src="images/content_mid_jpg.jpg"/></a><ulid="changeable_box"><liid="changeable_box1"onClick="choose_box<this>">1</li><liid="changeable_box2"onClick="choose_box<this>">2</li><liid="changeable_box3"onClick="choose_box<this>">3</li></ul></div><divclass="content_mid_midgray_border"> <divclass="content_mid_mid_top"> <imgstyle="padding-left:5px;float:left;"src="images/content_mid_mid_logo.jpg"/><pstyle="float:left;text-align:right;width:430px;"><ahref="#">全部品牌>></a></p></div><divclass="content_mid_mid_bottom"><ahref="#"><imgstyle="padding-right:5px;"src="images/changeable_imagges/content_mid_mid_gif1.gif"/></a><ahref="#"><imgsrc="images/changeable_imagges/conten_mid_mid_img1.jpg"/></a><ahref="#"><imgsrc="images/changeable_imagges/conten_mid_mid_img2.jpg"/></a><ahref="#"><imgsrc="images/changeable_imagges/content_mid_mid_img3.gif"/></a><ahref="#"><imgsrc="images/changeable_imagges/content_mid_mid_img4.gif"/></a><ahref="#"><imgsrc="images/changeable_imagges/content_mid_mid_img5.gif"/></a><ahref="#"><imgsrc="images/changeable_imagges/content_mid_mid_img6.gif"/></a><ahref="#"><imgstyle="padding-left:5px;"src="images/changeable_imagges/content_mid_mid_gif2.gif"/></a> </div></div><divclass="content_mid_bottomgray_border"> <ulclass="orange_border"> <liid="classify1"onMouseOver="classificationCheck<this,'1'>"class="content_mid_bottom_classification11"><ahref="#"></a></li><liid="classify2"onMouseOver="classificationCheck<this,'2'>"class="content_mid_bottom_classification2"><ahref="#"></a></li><liid="classify3"onMouseOver="classificationCheck<this,'3'>"class="content_mid_bottom_classification3"><ahref="#"></a></li></ul><divid="content_mid_bottom_classification"><divid="classification1"><divclass="content_mid_bottom_classification_div1dotted_borderfloat"><ahref="#"><imgclass="float"src="images/changeable_imagges/conten_mid_bottom_img1.jpg"/></a><ulclass="float"><li>冬款英國原單</li><listyle="clear:both;"></li><li>fenchurch男</li><listyle="clear:both;"></li><li>零售價(jià)：<span><b><fontsize="2">¥168.00</font></b></span></li><listyle="clear:both;"></li><li>市場價(jià)：<fontsize="2">¥=</font></li><listyle="clear:both;"></li><ahref="#"><li><imgsrc="images/changeable_imagges/conten_mid_bottom_purchase_button.jpg"/></li></a></ul></div><divclass="content_mid_bottom_classification_div1float"><ahref="#"><imgclass="float"src="images/changeable_imagges/conten_mid_bottom_img2.jpg"/></a><ulclass="float"><li>英國原單正品FatFace</li><listyle="clear:both;"></li><li>男</li><listyle="clear:both;"></li><li>零售價(jià)：<span><b><fontsize="2">¥198.00</font></b></span></li><listyle="clear:both;"></li><li>市場價(jià)：<fontsize="2">¥=</font></li><listyle="clear:both;"></li><ahref="#"><li><imgsrc="images/changeable_imagges/conten_mid_bottom_purchase_button.jpg"/></li></a></ul></div></div><divid="classification3"style="display:none;">888888888888888888888888888888888</div></div></div> </div><!--中間部分結(jié)束--><!--右部分開始--><divclass="content_rightfloat"> <divclass="content_right_MallInformation"></div><ahref="#"><imgstyle="margin-top:10px;"src="images/changeable_imagges/content_right_img1.jpg"/></a><ahref="#"><imgstyle="margin-top:2px;"src="images/changeable_imagges/content_right_img2.jpg"/></a></div><!--右部分結(jié)束--> <!--偏右下部分開始--> <divclass="content_bottomfloatgray_border"> <imgstyle="position:absolute;z-index:-1;"src="images/hot_goods.jpg"/><pclass="content_bottom_p"><ahref="#">更多>></a></p><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img1.jpg"/></a><pclass="content_bottom_line_height"><b>2012夏季童裝男</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥55.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥<s>79.00</s></font></p></div><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img2.jpg"/></a><pclass="content_bottom_line_height"><b>2012夏款女大童牛</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥49.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥=</font></p></div><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img3.jpg"/></a><pclass="content_bottom_line_height"><b>2012夏裝新款網(wǎng)紗</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥49.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥<s>69.00</s></font></p></div><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img4.jpg"/></a><pclass="content_bottom_line_height"><b>2012夏季新款男</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥39.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥<s>49.00</s></font></p></div><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img5.jpg"/></a><pclass="content_bottom_line_height"><b>2012夏季韓版</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥38.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥=</font></p></div><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img6.jpg"/></a><pclass="content_bottom_line_height"><b>童裝女童夏裝2012</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥49.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥=</font></p></div><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img7.jpg"/></a><pclass="content_bottom_line_height"><b>2012春秋女嬰兒</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥39.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥=</font></p></div><divclass="content_bottom_hot_goodsfloat"> <ahref="#"><imgsrc="images/changeable_imagges/content_bottom_hot_goods_img8.jpg"/></a><pclass="content_bottom_line_height"><b>1新款時(shí)尚韓版秋裝男</b></p><pclass="content_bottom_line_height2"style="margin-top:8px;">零售價(jià)：<span><b><fontsize="2">¥108.00</font></b></span></p> <pclass="content_bottom_line_height2">市場價(jià)：<fontsize="2">¥<s>138.00</s></font></p></div> </div><!--偏右下部分結(jié)束--></div><!--中間部分和右邊部分結(jié)束--></span> <!--足部開始--> <divclass="footergray_borderfloat"> <divclass="massegefloat"> <divclass="massege_sonfloat"> <h4>配送信息</h4><p><ahref="#">送貨上門</a></p><p><ahref="#">送貨范圍</a></p></div><imgclass="float"src="images/footer_content_border.gif"/><divclass="massege_sonfloat"> <h4>配送信息</h4><p><ahref="#">送貨上門</a></p><p><ahref="#">送貨范圍</a></p></div><imgclass="float"src="images/footer_content_border.gif"/><divclass="massege_sonfloat"> <h4>配送信息</h4><p><ahref="#">送貨上門</a></p><p><ahref="#">送貨范圍</a></p></div><imgclass="float"src="images/footer_content_border.gif"/><divclass="massege_sonfloat"> <h4>配送信息</h4><p><ahref="#">送貨上門</a></p><p><ahref="#">送貨范圍</a></p></div><imgclass="float"src="images/footer_content_border.gif"/><divclass="massege_sonfloat"> <h4>配送信息</h4><p><ahref="#">送貨上門</a></p><p><ahref="#">送貨范圍</a></p></div><imgclass="float"src="images/footer_content_border.gif"/></div><divclass="informationfloat"> <pclass="information_p_type1">全國統(tǒng)一服務(wù)熱線<免長途費(fèi)></p><pclass="information_p_type2">400-676-5919</p><p>會(huì)員服務(wù)lt;/p><p>售后服務(wù)lt;/p><p>服務(wù)服務(wù)7X24小時(shí)</p></div></div><scripttype="text/javascript"src="js/marq.js"/></script><divclass="footer_imgfloat"> <ahref="#"><imgsrc="images/footer_img1.jpg"/></a> <ahref="#"><imgsrc="images/footer_img2.jpg"/></a><ahref="#"><imgsrc="images/footer_img3.jpg"/></a> <ahref="#"><imgsrc="images/footer_img4.jpg"/></a> </div> <!--足部結(jié)束--> <div> <br/> <br/> <pstyle="text-align:center;padding-top:50px;padding-bottom:50px;font:noraml12px/24px'宋體';color:#FF0000;"><imgstyle="padding:3px;margin-left:400px;float:left;"src="images/copy.JPG"/><spanstyle="float:left;">2014 gujianbo 京ICP證052564**號(hào)</span></p> <!--<br/> <br/>--> </div></div><!--正文結(jié)束--></div></div><!--結(jié)束?。?-></body><scripttype="text/javascript"src="js/adv.js"></script><scripttype="text/javascript"src="js/title.js"></script><scripttype="text/javascript"src="js/Fsubmenu.js"></script><scripttype="text/javascript"src="js/changeable_img.js"></script><scripttype="text/javascript"src="js/showTime.js"></script><scripttype="text/javascript"src="js/toolTip.js"></script><scripttype="text/javascript"src="js/classification.js"/></script><scripttype="text/javascript"src="js/sign.js"/></script><scripttype="text/javascript"src="js/adv2.js"/></script></html>CSS代碼@charset"utf-8";/*CSSDocument*/*{margin:0px;padding:0px;}span{color:#CC0003;}body{font:normal12px/24px"宋體";color:#545454;}.float{float:left;}a{color:inherit;text-decoration:none;border-style:none;border-style:none;}img{border:none;}ul{list-style-type:none;}.r{border:1pxsolidred;}#container{margin:0pxauto;width:1084px;height:1600px;}.header{width:100%;height:170px;background:url<../images/header_mid_bg.gif>no-repeat;}.header_top{background:#F5F5F5;width:100%;height:25px;border-bottom:1pxsolid#CCC;}.header_topulli{float:left;color:#656565;}.header_topullia:hover{text-decoration:underline;}.header_top_small_navigation{padding:0px10px0px7px;}.header_top_small_navigationa{display:block;}.header_mid{width:inherit;height:89px;}.header_midp{float:left;padding-top:16px;}.header_midform{margin-left:606px;margin-top:5px;width:422px;height:30px;background:#C30203;}.header_midforminput{float:left;margin-top:2px;}.header_mid_font{font-size:13px;font-family:"黑體";}.header_mid_font2{font-size:20px;font-weight:bold;font-family:"黑體";}.search_input{height:23px;width:341px;margin-left:2px;padding-left:5px;}.navigation{width:inherit;height:55px;background:url<../images/header_navigation_bg.gif>repeat-xbottom;}.navigationp,.navigationpul,.navigationulli{float:left;}.navigationulli{color:white;font:bold15px"宋體";padding-top:16px;display:block;}.navigationullia{padding:10px20px;}.navigation_bg_border{background:url<../images/header_navigation_bg_border.gif>no-repeatbottom;width:3px;height:28px;}.navigation_first_item,.navigationullia:hover{background:url<../images/header_navigation_bg2.gif>repeat-x;}.content{width:990px;height:1150px;margin:0auto;}.content_top_wide_boder{width:980px;height:20px;border:1pxsolid#E4E4E4;border-top-style:none;}.content_top_wide_boder_bg{background:url<../images/content_top_wide_boder_bg.gif>repeat-xbottom;height:14px;width:978px;border:1pxsolidwhite;padding-top:4px;position:absolute;z-index:-1;}.content_left{width:215px;height:90%;float:left;}.content_left_login{width:213px;height:138px;margin-top:10px;}.content_left_loginimg,.content_left_logindiv{float:left;}.content_left_login_bg{background:url<../images/content_left_login_bg.gif>repeat-x;width:211px;height:98px;border:1pxsolid#DAD7AC;border-top-style:none;}.content_left_login_bgform{margin-left:20px;font-weight:bold;}.content_left_login_bg_input{width:115px;height:20px;margin-top:3px;border:1pxsolid#B79D7C;padding-left:5px;}.content_left_login_bg_p1{display:inline;padding-left:13px;}.content_left_login_bg_p2{margin-top:10px;margin-left:20px;}.content_left_classification_of_goods{width:inherit;height:235px;background:url<../images/classification_of_goods.jpg>no-repeat;margin-top:10px;}.content_left_classification_of_goodsul{padding-top:36px;padding-left:8px;}.content_left_classification_of_goodsula{background:url<../images/classification_select_bg.gif>no-repeat0px0px;width:197px;height:30px;display:block;padding-left:10px;margin-top:2px;font:bold15px/30px"宋體";}.content_left_classification_of_goodsula:hover{background-position:0px-30px;}.content_left_suitable_price{width:inherit;height:129px;background:url<../images/suitable_price.jpg>no-repeat;margin-top:10px;}.content_left_suitable_priceul{width:200px;padding-top:28px;padding-left:10px;}.content_left_suitable_priceulli{float:left;width:89px;height:24px;margin-top:5px;margin-left:5px;color:#974607;}.content_left_suitable_priceula{background:url<../images/suitable

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論