位置: IT常识 - 正文

HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站

编辑：rootadmin

推荐整理分享HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

文章目录🌰一、网页介绍📖一、网页效果🌌二、代码展示😈1.HTML结构代码 🧱2.CSS样式代码 🏠三、个人总结😊四、更多干货🚀一、网页介绍📖

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果🌌

二、代码展示😈1.HTML结构代码 🧱

代码如下（示例）：以下仅展示部分代码供参考~

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content="关键词123"> <meta name="Description" content="描述"> <link rel="shortcut icon" href="/picture/1.ico" /> <link rel="stylesheet" type="text/css" href="public/css/base.css">  <link rel="stylesheet" type="text/css" href="css/shortcut.css">  <link rel="stylesheet" type="text/css" href="css/header.css">  <link rel="stylesheet" type="text/css" href="./css/navjd.css" />  <link rel="stylesheet" type="text/css" href="./css/tab.css" />  <script src="public/js/jquery-3.1.1.js"></script> <title>京东(JD.COM)综合网购首选</title> <style type="text/css"></style></head><body> <div id="shortcut"> <div class="w"> <ul class="fl">  <li class="dropdown" id="ttbar-mycity"> <div class="dt cw-icon"> <i class="iconfont"></i> <span>北京</span> </div>  <div class="dd dropdown-layer"> <div class="item"><a class="selected" href="">北京</a></div> <div class="item"><a href="">上海</a></div> <div class="item"><a href="">天津</a></div> <div class="item"><a href="">重庆</a></div> <div class="item"><a href="">河北</a></div> <div class="item"><a href="">山西</a></div> <div class="item"><a href="">河南</a></div> <div class="item"><a href="">辽宁</a></div> <div class="item"><a href="">吉林</a></div> <div class="item"><a href="">黑龙江</a></div> <div class="item"><a href="">内蒙古</a></div> <div class="item"><a href="">江苏</a></div> <div class="item"><a href="">山东</a></div> <div class="item"><a href="">安徽</a></div> <div class="item"><a href="">浙江</a></div> <div class="item"><a href="">福建</a></div> <div class="item"><a href="">湖北</a></div> <div class="item"><a href="">湖南</a></div> <div class="item"><a href="">广东</a></div> <div class="item"><a href="">广西</a></div> <div class="item"><a href="">江西</a></div> <div class="item"><a href="">四川</a></div> <div class="item"><a href="">海南</a></div> <div class="item"><a href="">贵州</a></div> <div class="item"><a href="">云南</a></div> <div class="item"><a href="">西藏</a></div> <div class="item"><a href="">陕西</a></div> <div class="item"><a href="">甘肃</a></div> <div class="item"><a href="">青海</a></div> <div class="item"><a href="">宁夏</a></div> <div class="item"><a href="">新疆</a></div> <div class="item"><a href="">港澳</a></div> <div class="item"><a href="">台湾</a></div> <div class="item"><a href="">钓鱼岛</a></div> <div class="item"><a href="">海外</a></div> </div> </li> </ul>  <ul class="fr"> <li id="ttbar-login"> <a href="" class="link-login">您好 , 请登录 </a> <a href="" class="link-regist">免费注册</a> </li> <li class="spacer"></li> <li> <div class="dt"><a href="">我的订单</a></div> </li> <li class="spacer"></li> <li id="ttbar-myjd" class="dropdown"> <div class="dt cw-icon"> <a href="">我的京东</a> <i class="iconfont"></i>  <div class="dd dropdown-layer"> <div class="userinfo"> <div class="u-pic"> <a href=""> <img src="picture/shortcut/user.jpg" alt="" width="60px" height="60px"> </a> </div> <div class="u-name u-login"> <a href="">你好，请登录</a> </div> <div class="u-extra"> <a href="">优惠券<span></span></a>    |    <a href="">消息<span></span></a> </div> </div>  <div class="otherlist"> <div class="fore1"> <div class="item"><a href="">待处理订单<span></span></a></div> <div class="item"><a href="">我的问答<span></span></a></div> <div class="item"><a href="">降价商品<span></span></a></div> <div class="item"><a href="">返修退换货<span></span></a></div> </div> <div class="fore2"> <div class="item"><a href="">我的关注<span></span></a></div> <div class="item"><a href="">我的京豆<span></span></a></div> <div class="item"><a href="">我的理财<span></span></a></div> <div class="item"><a href="">京东白条<span></span></a></div> </div> </div>  </div>  </div>  </li> <li class="spacer"></li> <li> <div class="dt"><a href="">京东会员</a></div> </li> <li class="spacer"></li> <li> <div class="dt"><a href="">企业采购</a></div> </li> <li class="spacer"></li> <li id="ttbar-serv" class="dropdown"> <div class="dt cw-icon"> <a href="">客户服务</a> <i class="iconfont"></i> <div class="dd dropdown-layer"> <div class="item-client">客户</div> <div class="item"><a href="">帮助中心</a></div> <div class="item"><a href="">售后服务</a></div> <div class="item"><a href="">在线客服</a></div> <div class="item"><a href="">电话客服</a></div> <div class="item"><a href="">意见建议</a></div> <div class="item"><a href="">客服邮箱</a></div> <div class="item fn-clear"><a href="">金融咨询</a></div> <div class="item-business">商户</div> <div class="item"><a href="">京东商学院</a></div> <div class="item"><a href="">商家入驻</a></div> </div> </div> </li> <li class="spacer"></li> <li class="dropdown" id="ttbar-navs"> <div class="dt cw-icon"> <a href="">网站导航</a> <i class="iconfont"></i> <div class="dd dropdown-layer"> <dl class="fore1"> <dt>特色主题</dt> <dd> <div class="item"><a href="">品牌街</a></div> <div class="item"><a href="">好物100</a></div> <div class="item"><a href="">京东预售</a></div> <div class="item"><a href="">尖er货</a></div> <div class="item"><a href="">京东首发</a></div> <div class="item"><a href="">今日团购</a></div> <div class="item"><a href="">优惠券</a></div> <div class="item"><a href="">闪购</a></div> <div class="item"><a href="">京东会员</a></div> <div class="item"><a href="">秒杀</a></div> <div class="item"><a href="">定期送</a></div> <div class="item"><a href="">装机大师</a></div> <div class="item"><a href="">新奇特</a></div> <div class="item"><a href="">京东试用</a></div> <div class="item"><a href="">礼品购</a></div> <div class="item"><a href="">智能馆</a></div> <div class="item"><a href="">奇趣日报</a></div> <div class="item"><a href="">大牌免息</a></div> <div class="item"><a href="">北京老字号</a></div> <div class="item"><a href="">买什么</a></div> </dd> </dl> <dl class="fore2"> <dt>行业频道</dt> <dd> <div class="item"><a href="">服装城</a></div> <div class="item"><a href="">家用电器</a></div> <div class="item"><a href="">电脑办公</a></div> <div class="item"><a href="">手机</a></div> <div class="item"><a href="">美妆馆</a></div> <div class="item"><a href="">食品</a></div> <div class="item"><a href="">数码</a></div> <div class="item"><a href="">母婴</a></div> <div class="item"><a href="">家装城</a></div> <div class="item"><a href="">运动户外</a></div> <div class="item"><a href="">整车</a></div> <div class="item"><a href="">图书</a></div> <div class="item"><a href="">农资频道</a></div> <div class="item"><a href="">京东智能</a></div> <div class="item"><a href="">玩3C</a></div> </dd> </dl> <dl class="fore3"> <dt>生活服务</dt> <dd> <div class="item"><a href="">京东众筹</a></div> <div class="item"><a href="">白条</a></div> <div class="item"><a href="">京东金融APP</a></div> <div class="item"><a href="">京东小金库</a></div> <div class="item"><a href="">理财</a></div> <div class="item"><a href="">话费</a></div> <div class="item"><a href="">旅行</a></div> <div class="item"><a href="">彩票</a></div> <div class="item"><a href="">游戏</a></div> <div class="item"><a href="">机票酒店</a></div> <div class="item"><a href="">电影票</a></div> <div class="item"><a href="">水电煤</a></div> <div class="item"><a href="">京东到家</a></div> <div class="item"><a href="">京东微联</a></div> <div class="item"><a href="">京东众测</a></div> </dd> </dl> <dl class="fore4"> <dt>更多精选</dt> <dd> <div class="item"><a href="">京东社区</a></div> <div class="item"><a href="">京东通信</a></div> <div class="item"><a href="">在线读书</a></div> <div class="item"><a href="">京东E卡</a></div> <div class="item"><a href="">智能社区</a></div> <div class="item"><a href="">游戏社区</a></div> <div class="item"><a href="">京友邦</a></div> <div class="item"><a href="">卖家入驻</a></div> <div class="item"><a href="">企业采购</a></div> <div class="item"><a href="">服务市场</a></div> <div class="item"><a href="">乡村招募</a></div> <div class="item"><a href="">校园加盟</a></div> <div class="item"><a href="">办公生活馆</a></div> <div class="item"><a href="">知识产权维权</a></div> <div class="item"><a href="">English Site</a></div> </dd> </dl> </div> </div> </li> </ul> </div> </div>  <div id="header"> <div class="w"> <div class="logo logo_tit_lk" id="logo"> </div>  <div id="search" class=""> <div class="search-m"> <div class="search_logo"> <a href="" class="search_logo_lk"></a> </div> <div class="form"> <input type="" name="" class="text" style="color: rgb(153,153,153);" value="羽绒服"> <button class="button"> <i class="iconfont"><img src="picture/shortcut/search.png" alt="" width="30px" height="30px"></i> </button> </div> </div> </div>   <div id="settleup" class="dropdown"> <div class="cw-icon"> <i class="ci-right"> </i> <i class="ci-count" id="shopping-amount">0</i> <i class="iconfont"></i> <a href="">我的购物车</a> </div> <div class="dropdown-layer"> <div class="prompt"> <div class="nogoods"> <b></b> "购物车中还没有商品，赶紧选购吧！" </div> </div> </div>  </div>  <div id="hotwords"> <a href="">199减100</a> <a href="">魅蓝Note5</a> <a href="">花肥六折</a> <a href="">每五百减60</a> <a href="">家电爆品</a> <a href="">围巾男</a> <a href="">surface</a> <a href="">5件99元</a> <a href="">儿童羽绒服</a> </div>  <div id="navitems"> <ul> <li><a href="">秒杀</a></li> <li><a href="">优惠券</a></li> <li><a href="">闪购</a></li> <li><a href="">拍卖</a></li> </ul> <div class="spacer"></div> <ul> <li><a href="">服装城</a></li> <li><a href="">京东超市</a></li> <li><a href="">生鲜</a></li> <li><a href="">全球购</a></li> </ul> <div class="spacer"></div> <ul> <li><a href="">京东金融</a></li> </ul> </div>  </div> </div>   <div class="fs"> <div class="fs_inner grid_c1"> <div class="fs_col1"> <div class="cate"> <ul class="cate_menu"> <li class="cate_menu_item"><a href="">家用电器</a></li> <li class="cate_menu_item"><a href="">手机</a><span>/</span><a href="">运营商</a> <span>/</span> <a href="">数码</a></li> <li class="cate_menu_item"><a href="">电脑办公</a></li> <li class="cate_menu_item"><a href="">家居</a><span>/</span><a href="">家具</a><span>/</span> <a href="">家装</a> <span>/</span> <a href="">厨具</a></li> <li class="cate_menu_item"><a href="">男装</a><span>/</span> <a href="">女装 </a><span>/</span><a href="">童装</a> <span>/</span> <a href="">内衣</a></li> <li class="cate_menu_item"><a href="">个护化妆</a> <span>/</span> <a href="">清洁用品</a> <span>/</span> <a href="">宠物</a></li> <li class="cate_menu_item"><a href="">鞋靴</a> <span>/</span> <a href="">箱包</a> <span>/</span> <a href="">珠宝</a> <span>/</span> <a href="">奢侈品</a></li> <li class="cate_menu_item"><a href="">运动</a> <span>/</span> <a href="">户外</a> <span>/</span><a href="">钟表</a> </li> <li class="cate_menu_item"><a href="">汽车</a><span>/</span> <a href="">汽车用品</a> </li> <li class="cate_menu_item"><a href="">母婴</a><span>/</span> <a href="">玩具乐器</a> </li> <li class="cate_menu_item"><a href="">食品</a> <span>/</span> <a href="">酒类</a> <span>/</span> <a href="">生鲜</a><span>/</span> <a href="">特产</a></li> <li class="cate_menu_item"><a href="">医药保健</a></li> <li class="cate_menu_item"><a href="">图书</a><span>/</span> <a href="">音像</a><span>/</span><a href="">电子书</a> </li> <li class="cate_menu_item"><a href="">彩票</a><span>/</span><a href="">旅行</a><span>/</span> <a href="">充值</a> <span>/</span><a href="">票务</a> </li> <li class="cate_menu_item"><a href="">理财</a> <span>/</span> <a href="">众筹 </a><span>/</span> <a href="">白条</a> <span>/</span> <a href="">保险</a></li> </ul> <div class="navfloat"> <ul> <li class="first"><img src="./picture/nav/1.png" alt="以后要专门写的" width="1000px" height="510px"> </li> <li><img src="./picture/nav/2.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/3.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/4.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/5.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/6.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/7.png" alt="" width="1000px" height="530"> </li> <li><img src="./picture/nav/8.png" alt="" width="1000px" height="530"> </li> <li><img src="./picture/nav/9.png" alt="" width="1000px" height="510"> </li> <li><img src="./picture/nav/10.png" alt="" width="1000px" height="510"> </li> <li><img src="./picture/nav/11.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/12.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/13.png" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/14.png" alt="" width="1000px" height="490px"> </li> <li><img src="./picture/nav/15.png" alt="" width="1000px" height="480px"> </li> </ul> </div>  </div>  </div>  <div class="fs_col2"> <div class="slider">  <div class="slider_main"> <ul class="picban"> <li><img src="./picture/nav/b1.jpg" alt="轮播图第一张" width="790px" height="340px"></li> <li><img src="./picture/nav/b2.jpg" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/b3.jpg" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/b4.jpg" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/b5.jpg" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/b6.jpg" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/b7.jpg" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/b8.jpg" alt="" width="790px" height="340px"></li> </ul> <ul class="num_btn">  </ul>  <div class="btnslide left"> </div> <div class="btnslide right"> </div> </div>  <div class="slider_extend"> <div class="slider_bi"> <img class="slider_bi_img" src="./picture/nav/a1.png" alt="" width="390px" height="130px"> </div> <div class="slider_bi"> <img clsss="slider_bi_img" src="./picture/nav/a2.png" alt="" width="390px" height="130px"> </div> </div>  </div>  </div>  <div class="fs_col3"> <div class="user"> <div class="user_info"> <div class="user_info_avatar"> <a href=""><img src="picture/shortcut/user.jpg" alt=""></a> </div> <div class="user_info_show"> <p class="user_info_tip">Hi，欢迎来到京东</p> <p> <a href="" class="user_info_login">登录</a> <a href="" class="user_info_reg">注册</a> </p> </div> </div>  <div class="user_profit"> <a href="">新人福利</a> <a href="">PLUS会员</a> </div> </div>  <div class="news"> <div class="news_tab"> <div class="mod_tab_head"> <a href="" class="mod_tab_head_item">促销</a> <a href="" class="mod_tab_head_item">公告</a> <a href="" class="news_more">更多</a> </div>  <div class="mod_tab_content"> <div class="mod_tab_content_item"> <ul> <li class="news_item"><a href="">12月狂欢，小熊电器大降价</a></li> <li class="news_item"><a href="">年度好货 99元3件抢</a></li> <li class="news_item"><a href="">2016年手机盘点大促销</a></li> </ul> </div> <div class="mod_tab_content_item"> <ul> <li class="news_item"><a href="">京东售后退换无忧服务上线</a></li> <li class="news_item"><a href="">大家电订单超期自动取消公告</a></li> <li class="news_item"><a href="">京东消费扶贫，只卖原生态珍宝</a></li> </ul> </div> </div>  </div> </div>  <div class="service"> <div class="service_entry"> <div class="service_list"> <ul> <li class="service_item"> <a href=""> <span class="service_corner"> <i class="service_corner_txt">券</i> <i class="service_corner_ico"></i> </span> <i class="service_ico service_ico_huafei"></i> <span class="service_txt">话费</span> </a> </li> <li class="service_item"><a href=""><i class="service_ico service_ico_jipiao"></i><span>机票</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_dianying"></i><span>电影票</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_youxi"></i><span>游戏</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_qyg"></i><span>企业购</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_jiayou"></i><span>加油卡</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_jiudian"></i><span>酒店</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_huoche"></i><span>火车票</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_zhongchou"></i><span>众筹</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_licai"></i><span>理财</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_lipin"></i><span>礼品卡</span></a></li> <li class="service_item"><a href=""><i class="service_ico service_ico_baitiao"></i><span>白条</span></a></li> </ul> </div> </div> </div>  <div class="mobile"> <a href="" class="mobile_btn"> <i class="mobile_btn_ico"></i> <span class="mobile_btn_txt">京东无线</span> </a> <div class="mobile_pop"> <div class="mobile_pop_item"> <div><img src="" alt=""></div> <div class="mobile_pop_info"> <h5 class="mobile_pop_txt">京东客户端</h5> <p class="mobile_pop_value">"新人专享188元大<br>>礼包"</p> <p class="mobile_pop_device"> <a href="" class="mobile_pop_device_iso">AppStore</a> <a href="" class="mobile_pop_device_and">安卓市场</a> <a href="" class="mobile_pop_device_pad">App Store</a> </p> </div> </div> <div class="mobile_pop_item"></div> <div class="mobile_pop_item"></div> </div> </div>  </div>  </div>  </div>   <div class="J-global-toobal"> <div class="jdm_toobar_wrap"> <div class="jdm_toobar"> <div class="jdm_toolbar_tabs"> <div id="toolbarvip" class="jdm_toolbar_tab jdm_toolbar_tab_jdvip"> <i class="tab_tip"></i> <i class="tab_ico"></i> <em class="tab_text"><a href="">京东会员</a></em> <span class="tab_sup hide">0</span> <div class="tabs_tip hide"> <span class="ico"></span> <span class="text">成功加入购物车</span> <b></b> </div> </div> <div class="jdm_toolbar_tab jdm_toolbar_tab_cart"> <i class="tab_ico"></i> <em class="tab_text"><a href="">购物车</a></em> </div> <div class="jdm_toolbar_tab jdm_toolbar_tab_follow"> <em class="tab_text"><a href="">我的关注</a></em> <i class="tab_ico"></i> </div> <div class="jdm_toolbar_tab jdm_toolbar_tab_history"> <em class="tab_text"><a href="">我的足迹</a></em> <i class="tab_ico"></i> </div> <div class="jdm_toolbar_tab jdm_toolbar_tab_message"> <em class="tab_text"><a href="">我的消息</a></em> <i class="tab_ico"></i> </div> <div class="jdm_toolbar_tab jdm_toolbar_tab_jimi"> <em class="tab_text"><a href="">咨询JIMI</a></em> <i class="tab_ico"></i> </div> </div> <div class="jdm_toolbar_footer"> <div class="jdm_toolbar_tab jdm_toolbar_tab_top"> <em class="tab_text"><a href="">顶部</a></em> <i class="tab_ico"></i> </div> <div class="jdm_toolbar_tab jdm_toolbar_tab_feedback"> <em class="tab_text"><a href="">反馈</a></em> <i class="tab_ico"></i> </div> <div class=" jdm_toolbar_tab_survey"> <em class="tab_text">有奖<br>活动</em> </div> </div> </div> </div> </div>   <div class="lift"> <ul clsss="lift_list"> <li class="lift_item lift_item_first active"><a href="javascript:;" class="lift_btn"><span>享品质</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>服饰美妆</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>家电手机</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>电脑数码</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>3  C运动</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>爱吃</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>母婴家居</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>图书汽车</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>虚拟</span></a></li> <li class="lift_item"><a href="javascript:;" class="lift_btn"><span>还没逛够</span></a></li> <li class="lift_item lift_item_top"><a href="javascript:;" class="lift_btn"><span>顶部</span><i class="lift_btn_arrow"></i></a></li> </ul> </div>   <style type="text/css"> .jdbody { width: 1190px; margin: 0 auto; } .jdbody ul { padding-bottom: 20px; } </style> <div class="jdbody"> <ul> <li><img src="images/jd1.gif" alt="京东秒杀" width="1190px"></li> <li><img src="images/jd2.gif" alt="发现好货" width="1190px"></li> <li><img src="images/jd3.gif" alt="领券中心" width="1190px"></li> <li><img src="images/jd4.gif" alt="广告" width="1190px"></li> <li class="floor"><img src="images/jd5.gif" alt="1享品质" width="1190px"></li> <li><img src="images/jd6.gif" alt="享品质内容" width="1190px"></li> <li><img src="images/jd7.gif" alt="广告" width="1190px"></li> <li><img src="images/jd8.gif" alt="爱生活" width="1190px"></li> <li class="floor"><img src="images/jd9.gif" alt="2服饰美妆-爱逛" width="1190px"></li> <li class="floor"><img src="images/jd10.gif" alt="3家用电器" width="1190px"></li> <li class="floor"><img src="images/jd11.gif" alt="4电脑数码" width="1190px"></li> <li class="floor"><img src="images/jd12.gif" alt="5玩3C" width="1190px"></li> <li class="floor"><img src="images/jd13.gif" alt="6爱吃" width="1190px"></li> <li class="floor"><img src="images/jd14.gif" alt="7母婴家居" width="1190px"></li> <li class="floor"><img src="images/jd15.gif" alt="8阅读汽车" width="1190px"></li> <li class="floor"><img src="images/jd16.gif" alt="9爱游戏" width="1190px"></li> <li><img src="images/jd17.gif" alt="购特色" width="1190px"></li> <li><img src="images/jd18.gif" alt="购特色内容" width="1190px"></li> <li><img src="images/jd19.gif" alt="广告" width="1190px"></li> <li class="floor"><img src="images/jd20.gif" alt="10还没逛够" width="1190px"></li> <li><img src="images/jd21.gif" alt="其他商品" width="1190px"></li> <li><img src="images/jd22.gif" alt="底部页面" width="1190px"></li> </ul> </div>  <script src="js/shortcut.js"></script> <script src="public/js/banner.js"></script> <script type="text/javascript"> //*****************左侧导航***************// var cate = $(".cate"); var num = $(".cate .cate_menu li").length; var oleftli = $(".cate .cate_menu li"); //显示区块 var ofloatli = $(".navfloat ul li"); //隐藏区块 bannerplay(cate, ofloatli, oleftli, 15, false, 1); //***************中间轮播图************// var slider_main = $(".slider_main"); var picli = $(".slider_main .picban li"); var lilen = picli.length; var leftbtn = $(".slider_main .left"); var rightbtn = $(".slider_main .right"); for (var i = 1; i <= lilen; i++) { //创建图片个数相对应的底部数字个数 var li = "<li>" + i + "</li>"; //创建li标签，并插入到页面中 $(".slider_main .num_btn").append(li); } var numli = $(".slider_main .num_btn li") bannerplay(slider_main, picli, numli, lilen, true, 0, leftbtn, rightbtn); //右侧选项卡 bannerplay($(".mod_tab_head"), $(".mod_tab_content_item"), $(".mod_tab_head_item"), 2, false, 2); //*****************左侧楼梯导航*******************// $(".lift ul li").click(function() { //alert("dianji "); var index = $(this).index(); //让滚动条移动到对应页面位置 var topslide = $(".floor").eq(index).offset().top; $("html,body").animate({ "scrollTop": topslide }, 1000); }) //滚动条事件 $(window).scroll(function() { var topslide = $(window).scrollTop(); $(".floor").each(function(i) { if (topslide >= $(this).offset().top) { $(".lift ul li").eq(i).addClass("active").siblings().removeClass("active"); } }) //显示楼梯导航 if (topslide > 1600) { $(".lift").show(); } else { $(".lift").hide(); } //显示搜索栏 if (topslide > 660) { $("#search").addClass("search-fix"); } else { $("#search").removeClass("search-fix"); } }) // $(document).mousemove(function(e){ //显示鼠标位置 // console.log("X: " + e.pageX + ", Y: " + e.pageY);}); </script></body></html>2.CSS样式代码 🏠#header .w { position: relative; z-index: 11; height: 140px;}#logo { position: absolute; z-index: 2; left: 0; top: -31px; width: 190px; height: 171px; -moz-box-shadow: 0 -12px 10px rgba(0, 0, 0, .2); box-shadow: 0 -12px 10px rgba(0, 0, 0, .2); background-color: #fff;}.logo_tit { position: absolute; width: 100%; height: 100%}.logo_tit_lk { overflow: hidden; display: block; width: 190px; height: 170px; background-image: url(../picture/shortcut/logo.png); background-repeat: no-repeat;}.search-m { position: relative; z-index: 1; height: 60px;}.search-m .search_logo { display: none}.search-m .form { position: absolute; left: 320px; top: 25px; width: 550px; height: 35px;}.search-m .button,.search-m .text { position: absolute; top: 0; outline: none;}.search-m .text { left: 0; padding: 4px; width: 490px; height: 25px; border: 1px solid #f10215; line-height: 25px; font-size: 14px; color: #989898;}.search-m .button { right: 0; width: 50px; height: 35px; line-height: 0px; border: none; background-color: #f10215; font-size: 20px; font-weight: 700; color: #fff;}.search-fix { position: fixed; z-index: 100; left: 0; top: 0; width: 100%; border-bottom: 2px solid #f10214; background-color: #fff; -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, .2); box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);}.cssanimations .search-fix { -webkit-animation: searchTop .5s ease-in-out; -moz-animation: searchTop .5s ease-in-out; animation: searchTop .5s ease-in-out;}.search-fix .search-m { margin: auto; width: 1190px; height: 48px;}.search-fix .search-m .form { top: 6px;}.search-fix .search-m .text { border-color: #efefef; background-color: #efefef;}.search-fix .search-m .search_logo { display: block; position: absolute; left: 0; top: 4px; width: 125px; height: 40px;}.search-fix .search-m .search_logo_lk { overflow: hidden; display: block; width: 125px; height: 40px; background-image: url(../picture/shortcut/search_logo.png); background-repeat: no-repeat; text-indent: -999px;}.search-fix .search-m #shelper { top: 40px;}#search button .iconfont { display: inline-block;}#settleup { position: absolute; right: 0; top: 25px;}#settleup .cw-icon { width: 188px; height: 33px; background-color: #fff; text-align: center; line-height: 33px;}#settleup .cw-icon i { font-style: normal;}#settleup .cw-icon .iconfont { margin-right: 3px; font-size: 16px; color: #f10214;}#settleup .cw-icon a { color: #f10214;}#settleup .ci-count { position: absolute; top: 5px; left: 140px; right: auto; display: inline-block; *zoom: 1; *display: inline; padding: 1px; font-size: 12px; line-height: 12px; color: #fff; background-color: #f10215; -moz-border-radius: 7px; border-radius: 7px; min-width: 12px; text-align: center;}#settleup .dropdown-layer { top: 35px; right: 0; width: 308px;}#settleup .prompt { padding: 10px 15px;}#settleup .nogoods { padding-left: 30px; height: 49px; line-height: 49px; overflow: hidden; color: #999;}#settleup .nogoods b { float: left; width: 56px; height: 49px; background-image: url(../picture/shortcut/nocart.png)/*//img11.360buyimg.com/uba/jfs/t3571/299/131233948/1117/a1196554/58004d6dN2927f0f7.png*/}#hotwords { overflow: hidden; position: absolute; left: 320px; top: 65px; width: 550px; height: 20px; line-height: 20px;}#hotwords a { float: left; margin-right: 10px; white-space: nowrap; color: #999;}#hotwords a:hover { color: #c81623;}#hotwords a.red { color: #f10215;}#navitems { overflow: hidden; position: absolute; left: 200px; bottom: 0; width: 790px; height: 40px；}#navitems .spacer,#navitems li,#navitems ul { float: left;}#navitems li { margin-left: 30px;}#navitems a { position: relative; display: block; height: 40px; line-height: 40px; font-size: 16px; font-weight: 700;}#navitems a:hover { color: #c81623;}#navitems .spacer { overflow: hidden; margin-top: 15px; margin-left: 20px; margin-right: -10px; width: 1px; height: 10px; background-color: #ccc;}.o2_ie7 #navitems .spacer,.o2_ie8 #navitems .spacer { margin-top: 16px;}#navitems .promo,#navitems .symbol { display: none;}三、个人总结😊

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；所有页面相互超链接，可到三级页面，有5-10个页面组成；页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；菜单美观、醒目，二级菜单可正常弹出与跳转；要有JS特效，如定时切换和手动切换图片新闻；页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；页面清爽、美观、大方，不雷同。网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。四、更多干货🚀

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！