HTML代码4种范例——网页设计.doc

资源描述

范例1——Shopping_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="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>

展开阅读全文