基于HTML+CSS+JavaScript制作简单的大学生网页设计——我的家乡湖南
89
6
分享
1016
1036
1003
556
979
818
566
708
718
- 2万+
- 积分
- 2万+
- 粉丝
- 6291
- 获赞
- 182
- 评论
- 1万+
- 收藏
分类专栏
-
html网页设计
1838篇
-
web前端
2篇
-
web前端期末大作业
14篇
-
七夕情人节网页代码html
6篇
-
dw静态网页设计与制作
8篇
-
JavaScript
1篇
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
2401_90065085: <!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"> <!-- 引入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> <!-- userinfo end --> <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> <!-- otherlist结束 --> </div> <!-- dd end 下拉菜单结束 --> </div> <!-- dt end控制左右边距 结束--> </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> <!-- 搜索框BEGIN --> <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> <!-- 头部页面完成 --> <!-- 文字导航开始fs --> <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> <!-- navfloat结束 --> </div> <!-- cate结束 --> </div> <!-- col1结束 --> <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>li.item$*8--> </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> <!-- slider_extent结束 --> </div> <!-- slide结束 --> </div> <!-- col2结束 --> <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> <!-- userinfo结束 --> <div class="user_profit"> <a href="">新人福利</a> <a href="">PLUS会员</a> </div> </div> <!-- user结束 --> <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> <!-- mod_tab_head结束 --> <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> <!-- mod_tab_content结束 --> </div> </div> <!-- news结束 --> <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> <!-- service结束 --> <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> <!-- mobile结束 --> </div> <!-- fs_col3结束 --> </div> <!-- fs_inner结束 --> </div> <!-- fs结束 --> <!-- 右侧楼梯导航开始开始 --> <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> l
2401_85798624: 求码源
CHE_A: 作者大大，想问一下可不可以要一下源代码呀
m0_69660466: 我想问一下这些代码写出来需要什么实力？入门精通还是大神
成田睡懒觉.: 作者大大，想问一下可不可以要一下源代码呀
到【灌水乐园】发言
