一个超好看的音乐网站设计与实现(HTML+CSS)

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/" /> <link rel="stylesheet" type="text/css" href="public/css/">  <link rel="stylesheet" type="text/css" href="css/">  <link rel="stylesheet" type="text/css" href="css/">  <link rel="stylesheet" type="text/css" href="./css/" />  <link rel="stylesheet" type="text/css" href="./css/" />  <script src="public/js/jquery-3.1."></script> <title>京东()综合网购首选</title> <style type="text/css"> </style> </head> <body> <div > <div class="w"> <ul class="fl">  <li class="dropdown" > <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 > <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 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/" 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 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" > <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 > <div class="w"> <div class="logo logo_tit_lk" > </div>  <div 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/" alt="" width="30px" height="30px"></i> </button> </div> </div> </div>   <div class="dropdown"> <div class="cw-icon"> <i class="ci-right"> </i> <i class="ci-count" >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 > <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 > <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/" alt="以后要专门写的" width="1000px" height="510px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="530"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="530"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="510"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="510"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="480px"> </li> <li><img src="./picture/nav/" alt="" width="1000px" height="490px"> </li> <li><img src="./picture/nav/" 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/" alt="轮播图第一张" width="790px" height="340px"></li> <li><img src="./picture/nav/" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/" alt="" width="790px" height="340px"></li> <li><img src="./picture/nav/" 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/" alt="" width="390px" height="130px"> </div> <div class="slider_bi"> <img clsss="slider_bi_img" src="./picture/nav/" 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/" 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 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/" alt="京东秒杀" width="1190px"></li> <li><img src="images/" alt="发现好货" width="1190px"></li> <li><img src="images/" alt="领券中心" width="1190px"></li> <li><img src="images/" alt="广告" width="1190px"></li> <li class="floor"><img src="images/" alt="1享品质" width="1190px"></li> <li><img src="images/" alt="享品质内容" width="1190px"></li> <li><img src="images/" alt="广告" width="1190px"></li> <li><img src="images/" alt="爱生活" width="1190px"></li> <li class="floor"><img src="images/" alt="2服饰美妆-爱逛" width="1190px"></li> <li class="floor"><img src="images/" alt="3家用电器" width="1190px"></li> <li class="floor"><img src="images/" alt="4电脑数码" width="1190px"></li> <li class="floor"><img src="images/" alt="5玩3C" width="1190px"></li> <li class="floor"><img src="images/" alt="6爱吃" width="1190px"></li> <li class="floor"><img src="images/" alt="7母婴家居" width="1190px"></li> <li class="floor"><img src="images/" alt="8阅读汽车" width="1190px"></li> <li class="floor"><img src="images/" alt="9爱游戏" width="1190px"></li> <li><img src="images/" alt="购特色" width="1190px"></li> <li><img src="images/" alt="购特色内容" width="1190px"></li> <li><img src="images/" alt="广告" width="1190px"></li> <li class="floor"><img src="images/" alt="10还没逛够" width="1190px"></li> <li><img src="images/" alt="其他商品" width="1190px"></li> <li><img src="images/" alt="底部页面" width="1190px"></li> </ul> </div>  <script src="js/"></script> <script src="public/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 = ; 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){ //显示鼠标位置 // ("X: " + + ", Y: " + );}); </script> </body> </html> l

秒客网

一个超好看的音乐网站设计与实现(HTML+CSS)

相关文章