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

上传人：快乐****生活

文档编号：4758895

上传时间：2024-10-12

格式：DOC

页数：37

大小：2.81MB

《HTML代码4种范例——网页设计.doc》由会员分享，可在线阅读，更多相关《HTML代码4种范例——网页设计.doc（37页珍藏版）》请在咨信网上搜索。

范例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>

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档保存到电脑，查找使用更方便

12 金币

申诉本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请申请举报、认领或删除 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: HTML 代码范例网页设计

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前自行私信或留言给上传者【快乐****生活】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时私信或留言给本站上传会员【快乐****生活】，需本站解决可联系【微信客服】、【 QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”（推荐），意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：4008-655-100；投诉/维权电话：4009-655-100。

关于本文

本文标题：HTML代码4种范例——网页设计.doc
链接地址：https://www.zixin.com.cn/doc/4758895.html

快乐****生活

内容提供者

实名认证

查看上传人更多文档

部分上传会员的收益排行 01、路***（￥15400+），
02、曲****（￥15300+），
03、wei****016（￥13200+）,
04、大***流（￥12600+），
05、Fis****915（￥4200+），
06、h****i（￥4100+），
07、Q**（￥3400+），
08、自******点（￥2400+），
09、h*****x（￥1400+），
10、c****e（￥1100+）,
11、be*****ha（￥800+），
12、13********8（￥800+）。

相似文档

自信AI助手