范例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=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></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"><divclass="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>市场价：<fontsize="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><divclass="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><div id="classification2" style="display:none;">111111111111111111111111111111111</div><div id="classification3" style="display:none;">888888888888888888888888888888888</div></div></div></div><!--中间部分结束--><!--右部分开始--><div class="content_right float"><div class="content_right_MallInformation"></div><a href="#"><img style="margin-top:10px;" src="images/changeable_imagges/content_right_img1.jpg"/></a><a href="#"><img style="margin-top:2px;" src="images/changeable_imagges/content_right_img2.jpg"/></a></div><!--右部分结束--><!--偏右下部分开始--><div class="content_bottom float gray_border"><img style="position:absolute;z-index:-1;" src="images/hot_goods.jpg"/><p class="content_bottom_p"><a href="#">更多>></a></p><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img1.jpg"/></a><p class="content_bottom_line_height"><b>2012夏季童装男</b></p><p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥55.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥<s>79.00</s></font></p></div><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img2.jpg"/></a><p class="content_bottom_line_height"><b>2012夏款女大童牛</b></p><p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥49.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p></div><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img3.jpg"/></a><p class="content_bottom_line_height"><b>2012夏装新款网纱</b></p><p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥49.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥<s>69.00</s></font></p></div><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img4.jpg"/></a><p class="content_bottom_line_height"><b>2012夏季新款男</b></p><p class="content_bottom_line_height2"style="margin-top:8px;">零售价：<span><b><font size="2">¥39.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥<s>49.00</s></font></p></div><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img5.jpg"/></a><p class="content_bottom_line_height"><b>2012夏季韩版</b></p><p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥38.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p></div><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img6.jpg"/></a><p class="content_bottom_line_height"><b>童装女童夏装2012</b></p><p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥49.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p></div><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img7.jpg"/></a><p class="content_bottom_line_height"><b>2012春秋女婴儿</b></p><p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥39.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥=</font></p></div><div class="content_bottom_hot_goods float"><a href="#"><img src="images/changeable_imagges/content_bottom_hot_goods_img8.jpg"/></a><p class="content_bottom_line_height"><b>1新款时尚韩版秋装男</b></p><p class="content_bottom_line_height2" style="margin-top:8px;">零售价：<span><b><font size="2">¥108.00</font></b></span></p><p class="content_bottom_line_height2">市场价：<font size="2">¥<s>138.00</s></font></p></div></div><!--偏右下部分结束--></div><!--中间部分和右边部分结束--></span><!--足部开始--><div class="footer gray_border float"><div class="massege float"><div class="massege_son float"><h4>配送信息</h4><p><a href="#">送货上门</a></p><p><a href="#">送货范围</a></p></div><img class="float" src="images/footer_content_border.gif"/><div class="massege_son float"><h4>配送信息</h4><p><a href="#">送货上门</a></p><p><a href="#">送货范围</a></p></div><img class="float" src="images/footer_content_border.gif"/><div class="massege_son float"><h4>配送信息</h4><p><a href="#">送货上门</a></p><p><a href="#">送货范围</a></p></div><img class="float" src="images/footer_content_border.gif"/><div class="massege_son float"><h4>配送信息</h4><p><a href="#">送货上门</a></p><p><a href="#">送货范围</a></p></div><img class="float" src="images/footer_content_border.gif"/><div class="massege_son float"><h4>配送信息</h4><p><a href="#">送货上门</a></p><p><a href="#">送货范围</a></p></div><img class="float" src="images/footer_content_border.gif"/></div><div class="information float"><p class="information_p_type1">全国统一服务热线(免长途费)</p><p class="information_p_type2">400-676-5919</p><p>会员服务：************</p><p>售后服务：************</p><p>服务服务7X24小时</p></div></div><script type="text/javascript" src="js/marq.js"/></script><div class="footer_img float"><a href="#"><img src="images/footer_img1.jpg"/></a><a href="#"><img src="images/footer_img2.jpg"/></a><a href="#"><img src="images/footer_img3.jpg"/></a><a href="#"><img src="images/footer_img4.jpg"/></a></div><!--足部结束--><div><br/><br/><p style="text-align:center; padding-top:50px; padding-bottom:50px; font:noraml 12px/24px '宋体'; color:#FF0000;"><img style=" padding:3px; margin-left:400px; float:left;" src="images/copy.JPG"/><span style="float:left;">2014 gujianbo 京ICP证052564**号</span></p><!--<br/><br/>--></div></div><!--正文结束--></div></div><!--结束！！--></body><script type="text/javascript" src="js/adv.js"></script><script type="text/javascript" src="js/title.js"></script><script type="text/javascript" src="js/Fsubmenu.js"></script><script type="text/javascript" src="js/changeable_img.js"></script><script type="text/javascript" src="js/showTime.js"></script><script type="text/javascript" src="js/toolTip.js"></script><script type="text/javascript" src="js/classification.js"/></script><script type="text/javascript" src="js/sign.js"/></script><script type="text/javascript" src="js/adv2.js"/></script></html>CSS代码@charset "utf-8";/* CSS Document */*{margin:0px; padding:0px;}span{color:#CC0003;}body{font:normal 12px/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:1px solid red;}#container{margin:0px auto;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:1px solid #CCC;}.header_top ul li{float:left; color:#656565;}.header_top ul li a:hover{text-decoration:underline;}.header_top_small_navigation{padding:0px 10px 0px 7px;}.header_top_small_navigation a{display:block;}.header_mid{width:inherit; height:89px; }.header_mid p{float:left;padding-top:16px;}.header_mid form{margin-left:606px; margin-top:5px;width:422px;height:30px; background: #C30203;}.header_mid form input{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-x bottom;}.navigation p,.navigation p ul,.navigation ul li{ float:left;}.navigation ul li{color:white; font:bold 15px "宋体";padding-top:16px;display:block;}.navigation ul li a{padding:10px 20px;}.navigation_bg_border{background:url(../images/header_navigation_bg_border.gif) no-repeat bottom; width:3px; height:28px;}.navigation_first_item,.navigation ul li a:hover{background:url(../images/header_navigation_bg2.gif) repeat-x;}.content{width:990px;height:1150px; margin:0 auto;}.content_top_wide_boder{width:980px;height:20px; border:1px solid #E4E4E4; border-top-style:none; }.content_top_wide_boder_bg{background:url(../images/content_top_wide_boder_bg.gif) repeat-x bottom; height:14px; width:978px;border:1px solid white;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_login img,.content_left_login div{float:left;}.content_left_login_bg{background:url(../images/content_left_login_bg.gif) repeat-x; width:211px; height:98px; border:1px solid #DAD7AC; border-top-style:none;}.content_left_login_bg form{ margin-left:20px; font-weight:bold;}.content_left_login_bg_input{ width:115px; height:20px; margin-top:3px; border:1px solid #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_goods ul{padding-top:36px; padding-left:8px;}.content_left_classification_of_goods ul a{background:url(../images/classification_select_bg.gif) no-repeat 0px 0px; width:197px; height:30px; display:block; padding-left:10px; margin-top:2px; font:bold 15px/30px "宋体";}.content_left_classification_of_goods ul a: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_price ul{ width:200px;padding-top:28px; padding-left:10px;}.content_left_suitable_price ul li{float:left;width:89px; height:24px;margin-top:5px; margin-left:5px; color:#974607;}.content_left_suitable_price ul a{background:url(../images/suitable_price_select.gif) no-repeat 0px 0px; width:89px; height:24px;padding-left:21px; margin-top:2px; display:block;font:bold 12px/24px "宋体";}.content_left_suitable_price ul a:hover{background-position:0px -24px;}.content_left_hot_sale{width:210px;height:230px; border:1px solid #DBDBDB;padding:1px;}.content_left_hot_sale_border2{background:#F1F1F1;width:208px; height:228px;padding:1px;} .content_left_hot_sale_border3{background:white;height:inherit;}.content_left_hot_sale_border3 ul{padding-left:2px;}.content_left_hot_sale_border3 ul a:hover{ font-weight:bold;}.content_left_hot_sale_border3 ul li{ font-size:11px;float:left;line-height:13px; margin-top:9px; margin-left:5px;overflow:hidden;}.content_left_hot_sale_redgif,.content_left_hot_sale_orangegif{background-repeat:no-repeat; width:13px; height:13px; text-align:center; font:bold 8px/13px "宋体";color:white;}.content_left_hot_sale_redgif{ background-image:url(../images/hot_sale_redgif.gif);}.content_left_hot_sale_orangegif{ background-image:url(../images/hot_sale_orangegif.gif);}.conten_MidAndRight{width:760px;height:1115px;float:left; margin-left:10px; padding-top:10px;} .gray_border{border:1px solid #CCC;}.content_mid{width:540px;}.content_mid_mid{height:88px;padding:1px;}.content_mid_mid_top{width:537px;。