HTML代码4种范例——网页设计.doc
范例1Shopping_mall效果图HTML代码<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><link rel="stylesheet" href="css/Shopping mall.css" type="text/css"/></head><body onselectstart="return false"><!-<div id=Tdiv style="HEIGHT: 45px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 45px; Z-INDEX: 25"><input name="image1" type="image" id="image1" src="mrsoft.jpg" width="52" height="249" border="0"></div>-><!-开始！-><div id="Layer1" style="position:absolute; left:0; top:0; width:1500; height:1500; z-index:-1"> <div align="center"> <embed src="flash3080.swf" width="1500" height="1500" wmode="transparent"> </div></div><div id="Layer2" style="left:0; top:0;"><div id="container"> <div class="header"> <div class="header_top"> <ul> <li style="padding-left:55px;">您好，欢迎光临商城！<span><a href="register.html" onMouseOut="out()" onMouseOver="over(此处注册新用户)">注册</a> <a href="login.html">登录</a></span> 购物车共计商品 0 件 合计 0.00</li> <li><img style="padding:4px 0px 0px 25px;" src="images/header_top_gif.gif"/></li> <li><span><a href="login.html">信任登录</a></span></li> <li id="showTime" style="padding-left:20px;"></li> <li style="padding-left:20px;"><span><a href="#" onClick=" window.open(date.html,width=557,height=280,top=10,left=20);">日历</a></span></li> <li style="padding-left:110px;" class="header_top_small_navigation"><a href="shoppingCar.html" >查看购物车</a></li> <li>|</li> <li class="header_top_small_navigation"><a href="shopSearch.html">订单查询</a></li> <li>|</li> <li class="header_top_small_navigation"><a href="#">帮助中心</a></li> <li>|</li> <li class="header_top_small_navigation"><a href="#">优惠活动</a></li> <li id="Tdiv" style=" margin-right:0px;"></li></ul> </div> <div style=" position:absolute; padding-left:130px; padding-top:10px;"><img width="50" height="50s" src="images/logo2.gif"></div> <div class="header_mid"> <i><p style=" padding-left:130px;" class="header_mid_font">咨询热线：</p><p class="header_mid_font2">400–676–5919</p></i> <div style="clear:both"></div> <form action="#" method="post"> <input class="search_input"type="text" maxlength="30"/> <input name="search_button" type="image" src="images/header_mid_search_button.jpg"/></form> </div> <div class="navigation"> <p><a href="#"><img style="margin-left:57px;" src="images/header_navigation_index_button.jpg"/></a></p> <ul> <li onMouseOver="Fsubmenu(精品女装)"><a class="navigation_first_item" href="content.html">精品女装</a></li> <li class="navigation_bg_border"></li> <li onMouseOver="Fsubmenu(时尚男装)"><a href="#">时尚男装</a></li> <li class="navigation_bg_border"></li> <li onMouseOver="Fsubmenu(童装)"><a href="#">童装</a></li> <li class="navigation_bg_border"></li> <li onMouseOver="Fsubmenu(睡衣)"><a href="#">睡衣</a></li> <li class="navigation_bg_border"></li> <li onMouseOver="Fsubmenu(女士内衣)"><a href="#">女士内衣</a></li> <li class="navigation_bg_border"></li> </ul> </div> </div> <!-头部结束-> <!-正文开始-> <div class="content" > <!-上边界开始-> <div> <div class="content_top_wide_boder"> <img style="padding-left:22px;" src="images/content_top_wide_boder_gif.gif"/> <span id="submenu"></span> </div> </div> <!-上边界结束-> <span onMouseOver="Fsubmenu(隐藏二级导航)"> <!-左部分开始-> <div class="content_left"> <!-登录开始-> <div class="content_left_login"> <img width="213" src="images/content_left_login_title.jpg"/> <div class="content_left_login_bg"> <form action="#" method="post"> 用户名：<input class="content_left_login_bg_input" type="text"/><br/> 密<p class="content_left_login_bg_p1"></p>码：<input class="content_left_login_bg_input" type="password"/> <p class="content_left_login_bg_p2"> <input type="image" maxlength="20" src="images/login_button.jpg"/><input type="image" maxlength="20" src="images/register.jpg" onClick="javascript:window.open(register.html,);"/> </p> </form> </div> </div> <!-登录结束-> <!-商品分类开始-> <div class="content_left_classification_of_goods"> <ul> <a href="#">精品女装</a> <a href="#">时尚男装</a> <a href="#">童装</a> <a href="#">睡衣</a> <a href="#">女士内衣</a> <a href="#">查看更多分类装</a> </ul> </div> <!-商品分类结束-> <!-选择价格开始-> <div class="content_left_suitable_price"><ul><li><a href="#">50元以下</a></li> <li><a href="#">50-100元</a></li> <li><a href="#">100-200元</a></li> <li><a href="#">200-300元</a></li> <li><a href="#">300-400元</a></li> <li><a href="#">500元以上</a></li></ul> </div> <!-选择价格结束-> <img style="margin-top:10px;"src="images/hot_sale.jpg"/> <!-热销开始-> <div class="content_left_hot_sale"> <div class="content_left_hot_sale_border2"> <div class="content_left_hot_sale_border3"> <ul> <li class="content_left_hot_sale_redgif">1</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_redgif">2</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_redgif">3</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_orangegif">4</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_orangegif">5</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_orangegif">6</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_orangegif">7</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_orangegif">8</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_orangegif">9</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> <li class="content_left_hot_sale_orangegif">10</li> <li><a href="#">2012夏季新款时尚百搭</a></li> <div style="clear:both;"></div> </ul> </div> </div> </div> <!-热销结束-> </div> <!-左部分结束-> <!-中间部分和右边部分开始-> <div class="conten_MidAndRight"> <!-中间部分开始-> <div class="content_mid float"> <div style="height:300px;"> <a href="#"><img id="changeable_img" width="540" height="285" class="gray_border" src="images/content_mid_jpg.jpg"/></a> <ul id="changeable_box"> <li id="changeable_box1" onClick="choose_box(this)">1</li> <li id="changeable_box2" onClick="choose_box(this)">2</li> <li id="changeable_box3" onClick="choose_box(this)">3</li> </ul> </div> <div class="content_mid_mid gray_border"> <div class="content_mid_mid_top"> <img style="padding-left:5px;float:left;" src="images/content_mid_mid_logo.jpg"/> <p style="float:left;text-align:right; width:430px;"><a href="#">全部品牌>></a></p> </div> <div class="content_mid_mid_bottom"> <a href="#"><img style="padding-right:5px;" src="images/changeable_imagges/content_mid_mid_gif1.gif"/></a> <a href="#"><img src="images/changeable_imagges/conten_mid_mid_img1.jpg"/></a> <a href="#"><img src="images/changeable_imagges/conten_mid_mid_img2.jpg"/></a> <a href="#"><img src="images/changeable_imagges/content_mid_mid_img3.gif"/></a> <a href="#"><img src="images/changeable_imagges/content_mid_mid_img4.gif"/></a> <a href="#"><img src="images/changeable_imagges/content_mid_mid_img5.gif"/></a> <a href="#"><img src="images/changeable_imagges/content_mid_mid_img6.gif"/></a> <a href="#"><img style="padding-left:5px;" src="images/changeable_imagges/content_mid_mid_gif2.gif"/></a></div> </div> <div class="content_mid_bottom gray_border"> <ul class="orange_border"> <li id="classify1" onMouseOver="classificationCheck(this,1)" class="content_mid_bottom_classification11"><a href="#"></a></li> <li id="classify2" onMouseOver="classificationCheck(this,2)" class="content_mid_bottom_classification2"><a href="#"></a></li> <li id="classify3" onMouseOver="classificationCheck(this,3)" class="content_mid_bottom_classification3"><a href="#"></a></li> </ul> <div id="content_mid_bottom_classification"> <div id="classification1"> <div class="content_mid_bottom_classification_div1 dotted_border float"> <a href="#"><img class="float" src="images/changeable_imagges/conten_mid_bottom_img1.jpg"/></a> <ul class="float"> <li>冬款英国原单</li> <li style="clear:both;"></li> <li>fenchurch男</li> <li style="clear:both;"></li> <li>零售价：<span><b><font size="2">¥168.00</font></b></span></li> <li style="clear:both;"></li> <li>市场价：<font size="2">¥=</font></li> <li style="clear:both;"></li> <a href="#"><li><img src="images/changeable_imagges/conten_mid_bottom_purchase_button.jpg"/></li></a> </ul> </div> <div class="content_mid_bottom_classification_div1 float"> <a href="#"><img class="float" src="images/changeable_imagges/conten_mid_bottom_img2.jpg"/></a> <ul class="float"> <li>英国原单正品Fat Face</li> <li style="clear:both;"></li> <li>男</li> <li style="clear:both;"></li> <li>零售价：<span><b><font size="2">¥198.00</font></b></span></li> <li style="clear:both;"></li> <li>市场价：<font size="2">¥=</font></li> <li style="clear:both;"></li> <a href="#"><li><img src="images/changeable_imagges/conten_mid_bottom_purchase_button.jpg"/></li></a> </ul> </div> </div>
