HTML代码4种范例网页设计

范例1——Shopping_mall效果图HTML代码!doctypehtmlhtmlheadmetacharset=utf-8title无标题文档/titlelinkrel=stylesheethref=css/Shoppingmall.csstype=text/css//headbodyonselectstart=returnfalse!--divid=Tdivstyle=HEIGHT:45px;LEFT:0px;POSITION:absolute;TOP:0px;WIDTH:45px;Z-INDEX:25inputname=image1type=imageid=image1src=mrsoft.jpgwidth=52height=249border=0/div--!--开始！！--divid=Layer1style=position:absolute;left:0;top:0;width:1500;height:1500;z-index:-1divalign=centerembedsrc=flash3080.swfwidth=1500height=1500wmode=transparent/div/divdivid=Layer2style=left:0;top:0;divid=containerdivclass=headerdivclass=header_topullistyle=padding-left:55px;您好，欢迎光临商城！spanahref=register.htmlonMouseOut=out()onMouseOver=over('此处注册新用户')注册/a ahref=login.html登录/a]/span 购物车共计商品 0  件 合计 0.00/liliimgstyle=padding:4px0px0px25px;src=images/header_top_gif.gif//lilispanahref=login.html信任登录/a/span/liliid=showTimestyle=padding-left:20px;/lilistyle=padding-left:20px;spanahref=#onClick=window.open('date.html','','width=557,height=280,top=10,left=20');日历/a/span/lilistyle=padding-left:110px;class=header_top_small_navigationahref=shoppingCar.html查看购物车/a/lili|/liliclass=header_top_small_navigationahref=shopSearch.html订单查询/a/lili|/liliclass=header_top_small_navigationahref=#帮助中心/a/lili|/liliclass=header_top_small_navigationahref=#优惠活动/a/liliid=Tdivstyle=margin-right:0px;/li/ul/divdivstyle=position:absolute;padding-left:130px;padding-top:10px;imgwidth=50height=50ssrc=images/logo2.gif/divdivclass=header_midipstyle=padding-left:130px;class=header_mid_font咨询热线：/ppclass=header_mid_font2400–676–5919/p/idivstyle=clear:both/divformaction=#method=postinputclass=search_inputtype=textmaxlength=30/inputname=search_buttontype=imagesrc=images/header_mid_search_button.jpg//form/divdivclass=navigationpahref=#imgstyle=margin-left:57px;src=images/header_navigation_index_button.jpg//a/pullionMouseOver=Fsubmenu('精品女装')aclass=navigation_first_itemhref=content.html精品女装/a/liliclass=navigation_bg_border/lilionMouseOver=Fsubmenu('时尚男装')ahref=#时尚男装/a/liliclass=navigation_bg_border/lilionMouseOver=Fsubmenu('童装')ahref=#童装/a/liliclass=navigation_bg_border/lilionMouseOver=Fsubmenu('睡衣')ahref=#睡衣/a/liliclass=navigation_bg_border/lilionMouseOver=Fsubmenu('女士内衣')ahref=#女士内衣/a/liliclass=navigation_bg_border/li/ul/div/div!--头部结束--!--正文开始--divclass=content!--上边界开始--divdivclass=content_top_wide_boderimgstyle=padding-left:22px;src=images/content_top_wide_boder_gif.gif/spanid=submenu/span/div/div!--上边界结束--spanonMouseOver=Fsubmenu('隐藏二级导航')!--左部分开始--divclass=content_left!--登录开始--divclass=content_left_loginimgwidth=213src=images/content_left_login_title.jpg/divclass=content_left_login_bgformaction=#method=post用户名：inputclass=content_left_login_bg_inputtype=text/br/密pclass=content_left_login_bg_p1/p码：inputclass=content_left_login_bg_inputtype=password/pclass=content_left_login_bg_p2inputtype=imagemaxlength=20src=images/login_button.jpg/inputtype=imagemaxlength=20src=images/register.jpgonClick=javascript:window.open('register.html','','');//p/form/div/div!--登录结束--!--商品分类开始--divclass=content_left_classification_of_goodsulahref=#精品女装/aahref=#时尚男装/aahref=#童装/aahref=#睡衣/aahref=#女士内衣/aahref=#查看更多分类装/a/ul/div!--商品分类结束--!--选择价格开始--divclass=content_left_suitable_priceulliahref=#50元以下/a/liliahref=#50-100元/a/liliahref=#100-200元/a/liliahref=#200-300元/a/liliahref=#300-400元/a/liliahref=#500元以上/a/li/ul/div!--选择价格结束--imgstyle=margin-top:10px;src=images/hot_sale.jpg/!--热销开始--divclass=content_left_hot_saledivclass=content_left_hot_sale_border2divclass=content_left_hot_sale_border3ulliclass=content_left_hot_sale_redgif1/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_redgif2/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_redgif3/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_orangegif4/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_orangegif5/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_orangegif6/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_orangegif7/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_orangegif8/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_hot_sale_orangegif9/liliahref=#2012夏季新款时尚百搭/a/lidivstyle=clear:both;/divliclass=content_left_