文档介绍：该【HTML代码4种范例——网页设计 】是由【小s】上传分享，文档一共【38】页，该文档可以免费在线阅读，需要了解更多关于【HTML代码4种范例——网页设计 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。:.
范例1——Shopping_mall
效果图
:.
HTML代码
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<linkrel="stylesheet"href="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=""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=""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><a
href=""onMouseOut="out()"onMouseOver="over('此处注册新用户')">注册
</a>&nbsp;<ahref="">登录</a>]</span>&nbsp;购物车共计商品
&nbsp;0&nbsp;&nbsp;件&nbsp;合计&nbsp;</li>
<li><imgstyle="padding:4px0px0px25px;"
src="images/"/></li>
<li><span><ahref="">信任登录</a></span></li>
<liid="showTime"style="padding-left:20px;"></li>
<listyle="padding-left:20px;"><span><ahref="#"onClick="
('','','width=557,height=280,top=10,left=20');">日历</a></span></li>
<listyle="padding-left:110px;"class="header_top_small_navigation"><a
href="">查看购物车</a></li>:.
<li>|</li>
<liclass="header_top_small_navigation"><ahref="">订
单查询</a></li>
<li>|</li>
<liclass="header_top_small_navigation"><ahref="#">帮助中心
</a></li>
<li>|</li>
<liclass="header_top_small_navigation"><ahref="#">优惠活动
</a></li>
<liid="Tdiv"style="margin-right:0px;"></li>
</ul>
</div>
<divstyle="position:absolute;padding-left:130px;padding-top:10px;"><img
width="50"height="50s"src="images/"></div>
<divclass="header_mid">
<i><pstyle="padding-left:130px;"class="header_mid_font">咨询热线:
</p><pclass="header_mid_font2">400&ndash;676&ndash;5919</p></i>
<divstyle="clear:both"></div>
<formaction="#"method="post">
<inputclass="search_input"type="text"maxlength="30"/>
<inputname="search_button"type="image"
src="images/"/>
</form>
</div>
<divclass="navigation">
<p><ahref="#"><imgstyle="margin-left:57px;"
src="images/"/></a></p>
<ul>
<lionMouseOver="Fsubmenu('精品女装')"><a
class="navigation_first_item"href="">精品女装</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('睡衣')"><ahref="#">睡衣</a></li>
<liclass="navigation_bg_border"></li>
<lionMouseOver="Fsubmenu('女士内衣')"><ahref="#">女士内衣
</a></li>
<liclass="navigation_bg_border"></li>:.
</ul>
</div>
</div>
<!--头部结束-->
<!--正文开始-->
<divclass="content">
<!--上边界开始-->
<div>
<divclass="content_top_wide_boder">
<imgstyle="padding-left:22px;"
src="images/"/>
<spanid="submenu"></span>
</div>
</div>
<!--上边界结束-->
<spanonMouseOver="Fsubmenu('隐藏二级导航')">
<!--左部分开始-->
<divclass="content_left">
<!--登录开始-->
<divclass="content_left_login">
<imgwidth="213"src="images/"/>
<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/"/>
<inputtype="image"maxlength="20"
src="images/"onClick="javascript:('','','');"/>
</p>
</form>
</div>
</div>
<!--登录结束-->
<!--商品分类开始-->
<divclass="content_left_classification_of_goods">
<ul>
<ahref="#">精品女装</a>
<ahref="#">时尚男装</a>:.
<ahref="#">童装</a>
<ahref="#">睡衣</a>
<ahref="#">女士内衣</a>
<ahref="#">查看更多分类装</a>
</ul>
</div>
<!--商品分类结束-->
<!--选择价格开始-->
<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>
<!--选择价格结束-->
<imgstyle="margin-top:10px;"src="images/"/>
<!--热销开始-->
<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夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_redgif">2</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_redgif">3</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_orangegif">4</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_orangegif">5</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_orangegif">6</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_orangegif">7</li>:.
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_orangegif">8</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_orangegif">9</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
<liclass="content_left_hot_sale_orangegif">10</li>
<li><ahref="#">2012夏季新款时尚百搭</a></li>
<divstyle="clear:both;"></div>
</ul>
</div>
</div>
</div>
<!--热销结束-->
</div>
<!--左部分结束-->
<!--中间部分和右边部分开始-->
<divclass="conten_MidAndRight">
<!--中间部分开始-->
<divclass="content_midfloat">
<divstyle="height:300px;">
<ahref="#"><imgid="changeable_img"width="540"
height="285"class="gray_border"src="images/"/></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/"/>
<pstyle="float:left;text-align:right;width:430px;"><a
href="#">全部品牌&gt;&gt;</a></p>
</div>
<divclass="content_mid_mid_bottom">
<ahref="#"><imgstyle="padding-right:5px;"
src="images/changeable_imagges/"/></a>:.
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<ahref="#"><imgstyle="padding-left:5px;"
src="images/changeable_imagges/"/></a>
</div>
</div>
<divclass="content_mid_bottomgray_border">
<ulclass="orange_border">
<liid="classify1"
onMouseOver="classificationCheck(this,'1')"class="content_mid_bottom_classification11"><a
href="#"></a></li>
<liid="classify2"
onMouseOver="classificationCheck(this,'2')"class="content_mid_bottom_classification2"><a
href="#"></a></li>
<liid="classify3"
onMouseOver="classificationCheck(this,'3')"class="content_mid_bottom_classification3"><a
href="#"></a></li>
</ul>
<divid="content_mid_bottom_classification">
<divid="classification1">
<div
class="content_mid_bottom_classification_div1dotted_borderfloat">
<ahref="#"><imgclass="float"
src="images/changeable_imagges/"/></a>
<ulclass="float">
<li>冬款英国原单</li>
<listyle="clear:both;"></li>
<li>fenchurch男</li>
<listyle="clear:both;"></li>
<li>零售价:<span><b><font
size="2">&yen;</font></b></span></li>
<listyle="clear:both;"></li>
<li>市场价:<font:.
size="2">&yen;=</font></li>
<listyle="clear:both;"></li>
<ahref="#"><li><img
src="images/changeable_imagges/"/></li></a>
</ul>
</div>
<div
class="content_mid_bottom_classification_div1float">
<ahref="#"><imgclass="float"
src="images/changeable_imagges/"/></a>
<ulclass="float">
<li>英国原单正品FatFace</li>
<listyle="clear:both;"></li>
<li>男</li>
<listyle="clear:both;"></li>
<li>零售价:<span><b><font
size="2">&yen;</font></b></span></li>
<listyle="clear:both;"></li>
<li>市场价:<font
size="2">&yen;=</font></li>
<listyle="clear:both;"></li>
<ahref="#"><li><img
src="images/changeable_imagges/"/></li></a>
</ul>
</div>
</div>
<divid="classification2"
style="display:none;">1111111111111111111111**********</div>
<divid="classification3"
style="display:none;">888888888888888888888888888888888</div>
</div>
</div>
</div>
<!--中间部分结束-->
<!--右部分开始-->
<divclass="content_rightfloat">
<divclass="content_right_MallInformation">
</div>
<ahref="#"><imgstyle="margin-top:10px;"
src="images/changeable_imagges/"/></a>
<ahref="#"><imgstyle="margin-top:2px;"
src="images/changeable_imagges/"/></a>
</div>:.
<!--右部分结束-->
<!--偏右下部分开始-->
<divclass="content_bottomfloatgray_border">
<imgstyle="position:absolute;z-index:-1;"
src="images/"/>
<pclass="content_bottom_p"><ahref="#">更多
&gt;&gt;</a></p>
<divclass="content_bottom_hot_goodsfloat">
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<pclass="content_bottom_line_height"><b>2012夏季童
装男</b></p>
<pclass="content_bottom_line_height2"
style="margin-top:8px;">零售价:<span><b><fontsize="2">&yen;</font></b></span></p>
<pclass="content_bottom_line_height2">市场价:<font
size="2">&yen;<s></s></font></p>
</div>
<divclass="content_bottom_hot_goodsfloat">
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<pclass="content_bottom_line_height"><b>2012夏款女
大童牛</b></p>
<pclass="content_bottom_line_height2"
style="margin-top:8px;">零售价:<span><b><fontsize="2">&yen;</font></b></span></p>
<pclass="content_bottom_line_height2">市场价:<font
size="2">&yen;=</font></p>
</div>
<divclass="content_bottom_hot_goodsfloat">
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<pclass="content_bottom_line_height"><b>2012夏装新
款网纱</b></p>
<pclass="content_bottom_line_height2"
style="margin-top:8px;">零售价:<span><b><fontsize="2">&yen;</font></b></span></p>
<pclass="content_bottom_line_height2">市场价:<font
size="2">&yen;<s></s></font></p>
</div>
<divclass="content_bottom_hot_goodsfloat">
<ahref="#"><img
src="images/changeable_imagges/"/></a>
<pclass="content_bottom_line_height"><b>2012夏季新
款男</b></p>
<pclass="content_bottom_line_height2":.
style="margin-top:8px;">零售价:<span><b><fontsize="2">&yen;</font></b></span></p>
<pclass="content_bottom_line_height2">市场价:<font
size="2">&yen;<s></s></font></p>
</div>
<divclass="content_bottom_