360商城页面练习（html+css+js）

实现效果如下：

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>360商城</title><link rel="shortcut icon" href=" /favicon.ico" /><link href="./css/style.css" rel="stylesheet" /><link href="./css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" /></head> <body style="background:#F0F0F0;"><div class="top"><div class="tiaofu"><img src="./img/tiaofu.png"></div></div><div class="denglu"><div class="dengluk"><div align="left" class="left"><a href="http://mall.360.cn/help">帮助中心</a><a href="">收藏</a><a href="https://www.360.cn/">360官网</a></div><div align="right" class="right"><a href="https://i.360.cn/login/?src=mpw_iotmall&destUrl=https%3A%2F%2Fmall.360.cn%2F%2Fshop%2Fshopcart">登录</a><a href="https://i.360.cn/reg?src=mpw_iotmall&destUrl=https%3A%2F%2Fmall.360.cn%2F%2Fshop%2Fshopcart">注册</a><a href="http://mall.360.cn/download">360手机商城</a><a href="https://i.360.cn/login/?src=mpw_iotmall&destUrl=https%3A%2F%2Fmall.360.cn%2F%2Fshop%2Fshopcart"><i class="fa fa-shopping-bag"></i></a></div></div></div><div class="sousu"><div class="sousuk"><div class="logo"><img src="./img/logo.png"></div><div class="word"><a href="https://mall.360.cn/coupon/centerpage?track=PCLQ">领劵中心</a><a href="https://bbs.360.cn/?track=PCSQ">社区</a></div><div class="search"><input type="text" name="search" align="middle" size="80" maxlength="100" placeholder="请输入关键字"><button align="middle">搜索</button></div><div class="tuijian"><a href="https://mall.360.cn/ac/dqyr?utm_source=">3.28店庆</a><a href="https://mall.360.cn/search/?q=%E6%91%84%E5%83%8F%E6%9C%BA&track=PCSS01">摄像机</a><a href="https://mall.360.cn/search/?q=%E8%B7%AF%E7%94%B1%E5%99%A8&track=PCSS02">路由器</a><a href="https://mall.360.cn/search/?q=%E6%89%8B%E8%A1%A8&track=PCSS03">手表</a><a href="https://mall.360.cn/search/?q=%E8%AE%B0%E5%BD%95%E4%BB%AA&track=PCSS04">记录仪</a><a href="https://mall.360.cn/search/?q=%E6%89%AB%E5%9C%B0%E6%9C%BA&track=PCSS05">扫地机</a><a href="https://mall.360.cn/search/?q=%E6%B4%97%E6%89%8B%E6%B6%B2&track=PCSS07">洗手液</a></div></div></div><div class="banner" id="banner"><div class="banners" id="banners"><ul class="img" id="imglist"><li><a href=""><img src="./img/banner1.png"></a></li><li><a href=""><img src="./img/banner2.png"></a></li><li><a href=""><img src="./img/banner3.png"></a></li><li><a href=""><img src="./img/banner1.png"></a></li></ul><ul class="icon" id="iconlist"><li>1</li><li>2</li><li>3</li></ul><ul class="btn" id="btn"><span class="btnleft" id="btnleft"><</span><span class="btnright" id="btnright">></span></ul></div><div class="fenlei"><div class="tab" id="tab"><ul type="none"><p class="color"><a href=""><i class="fa fa-th-large fa-lg"></i>全部分类</a></p><li><a href="javascript:;"><i class="fa fa-github-alt fa-lg"></i>智能设备</a></li><li><a href="javascript:;"><i class="fa fa-bath fa-lg"></i>洗护专区/宠物用品</a></li><li><a href="javascript:;"><i class="fa fa-glass fa-lg"></i>食品/酒水/茗茶</a></li><li><a href="javascript:;"><i class="fa fa-volume-control-phone fa-lg"></i>家用电器</a></li><li><a href="javascript:;"><i class="fa fa-desktop fa-lg"></i>手机/数码/电脑办公</a></li><li><a href="javascript:;"><i class="fa fa-camera-retro fa-lg"></i>运动户外</a></li><li><a href="javascript:;"><i class="fa fa-automobile fa-lg"></i>汽车用品</a></li><li><a href="javascript:;"><i class="fa fa-support fa-lg"></i>儿童玩具</a></li><li><a href="javascript:;"><i class="fa fa-cutlery fa-lg"></i>家居家纺</a></li><li><a href="javascript:;"><i class="fa fa-suitcase fa-lg"></i>服饰/箱包/珠宝</a></li></ul></div><div class="tab_list" id="tab_list"><div class="item watch"><div>智能家居<div>摄像机 扫地机 台灯 音箱 可视门铃</div></div><div>智能手表<div>儿童手表 健康手表 运动手表 iPhone watch</div></div></div><div class="item mei"><div>洗护用品<div>洗衣液 洗发水 护发素 洗面奶 面膜 套装 乳/霜 洗护用品 洗衣粉</div></div><div>纸品清洁<div>抽纸 卫生纸 湿巾纸 包纸 卷纸</div></div><div>宠物用品<div>猫粮 狗粮 宠物零食</div></div></div><div class="item food"><div>休闲零食<div>牛肉干 饼干 辣条 酸奶 牛奶 薯片 方便面 面包 坚果</div></div><div>当季美食<div>小龙虾 自嗨锅 粽子 蛋类 香蕉 苹果 芒果 草莓 樱桃 桃子</div></div><div>饮料冲剂<div>咖啡 奶茶 红糖 冲饮谷物 蜂蜜 牛奶</div></div><div>茗茶<div>铁观音 红茶 绿茶 龙井茶 乌龙茶</div></div></div><div class="item goods"><div>厨房家电<div>冰箱 洗衣机 电饭煲  烤箱 烧水壶 电壶 电烤箱 电饼铛 高压锅 电火锅 豆浆机 榨汁机 微波炉</div></div><div>生活家电<div>扫地机器人 电风扇 加湿器 吸尘器 挂烫机</div></div></div><div class="item iphone"><div>手机<div>魅族 华为 vivo 三星 小米 iphone</div></div><div>潮流数码<div>照相机 无人机 游戏机 拍立得 音箱 电纸书</div></div><div>电脑/外设<div>笔记本电脑 平板电脑 台式电脑 鼠标 键盘 耳机 U盘 移动硬盘</div></div></div><div class="item movement"><div>健身器材<div>跑步机 哑铃 仰卧板</div></div><div>体育用品<div>篮球 足球 跳绳 羽毛球拍 网球拍 网球 乒乓球 排球</div></div></div><div class="item car"><div>车载电器<div>行车记录仪 车载吸尘器 车载配件 安全座椅 车载音响</div></div><div>汽车装饰<div>靠垫 车载香薰 车载摆件</div></div></div><div class="item baby"><div>玩具精选<div>芭比娃娃 变形金刚 毛绒玩具 手办模型 积木 乐高 早教/智能玩具</div></div></div><div class="item home"><div>床上用品<div>四件套 枕头 杯子 毛巾 浴巾</div></div><div>家具<div>床 沙发 茶几 电脑桌 书架 书桌 电视柜</div></div><div>布艺软饰<div>窗帘 地毯 桌布 沙发套 装饰画</div></div></div><div class="item coloths"><div>服饰内衣<div>家居服 男装 女装 内衣 袜子</div></div><div>箱包<div>女士包 男士包 旅行箱 双肩包 儿童箱包</div></div><div>珠宝首饰<div>项链 戒指 耳钉 手链 脚链 隐形眼镜 眼镜框 太阳镜 墨镜</div></div></div></div></div></div><div class="kuang1"><div class="word"><strong>热门活动</strong></div><div class="goods"><div class="test goods1"><a href="https://mall.360.cn/ac/360PPR?track=RM02"><img src="./img/goods1.png"></a></div><div class="test goods2"><a href="https://mall.360.cn/ac/msj?track=RM01"><img src="./img/goods2.png"></a></div><div class="test goods3"><a href="https://mall.360.cn/ac/shuma?track=RM04"><img src="./img/goods3.png"></a></div><div class="test goods4"><a href="https://mall.360.cn/ac/czth?track=RM03"><img src="./img/goods4.png"></a></div></div><div class="haibao"><img src="./img/haibao1.png"></div></div><div class="kuang2"><div class="words"><strong>限时购 00:00场 距离结束 06:51:57</strong></div><div class="shangpin"><div class="good"><a href="https://mall.360.cn/shop/seckill?track=PCXSG"><img src="./img/goods5.png"></a></div><div class="goods"><div class="text goods6"><div class="img"><a href="https://mall.360.cn/shop/seckill?track=PCXSG"><img src="./img/goods6.png"></a></div><div class="words"><div class="goods-title"><p>【3/24 0点抢半价】360家庭防火墙路由器5Pro</p></div><div class="goods-price"><p>&yen;99.5 &nbsp; <s style="font-size:15px; color:#9B9B9B;">&yen;199</s></p></div><div class="goods-miaosha"><p style="background-color:#9B9B9B; border-radius:10px;">已抢光</p></div></div></div><div class="text goods7"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5e464ffcad4cd55beded48ae"><img src="./img/goods7.png"></a></div><div class="words"><div class="goods-title"><p>德国博朗男士电动剃须刀MG系列MG5010充电往复式水洗刮胡须刀 黑色</p></div><div class="goods-price"><p>&yen;99.5 &nbsp; <s style="font-size:15px; color:#9B9B9B;">&yen;199</s></p></div><div class="goods-miaosha"><p>马上抢</p></div></div></div><div class="text goods8"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=59355161215ea051fc7e8ad9"><img src="./img/goods8.png"></a></div><div class="words"><div class="goods-title"><p>360 智能摄像机云台版1080P D706</p></div><div class="goods-price"><p>&yen;99.5 &nbsp; <s style="font-size:15px; color:#9B9B9B;">&yen;199</s></p></div><div class="goods-miaosha"><p>马上抢</p></div></div></div><div class="text goods9"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5dd7824ef759f122d2ad0be5"><img src="./img/goods9.png"></a></div><div class="words"><div class="goods-title"><p>花仙子除湿桶吸水除湿盒除湿剂干燥剂衣柜防潮宿舍除湿神器 橱柜专用 6盒</p></div><div class="goods-price"><p>&yen;99.5 &nbsp; <s style="font-size:15px; color:#9B9B9B;">&yen;199</s></p></div><div class="goods-miaosha"><p>马上抢</p></div></div></div></div></div></div><div class="kuang3"><div class="word1"><strong>新品推荐</strong></div><div class="goods"><div class="text goods10"><a href="https://mall.360.cn/shop/item?item_id=5d80a23ca7d03166ae3afa8e&track=PXP01"><img src="./img/goods10.png"></a></div><div class="text goods11"><a href="https://mall.360.cn/shop/item?item_id=5dfb7c99ad4cd523a8aa59a6&track=PXP02"><img src="./img/goods11.png"></a></div><div class="text goods12"><a href="https://mall.360.cn/shop/item?item_id=5e689696ad4cd55beded5f5a&track=PXP03"><img src="./img/goods12.png"></a></div><div class="text goods13"><a href="https://mall.360.cn/shop/item?item_id=5dc4d272f759f122d2ad0b54&track=PXP04"><img src="./img/goods13.png"></a></div></div><div class="haibao2"><img src="./img/goods14.png"></div></div><div class="kuang4"><div class="word2"><strong>家庭安防</strong><a href="" class="more1">全部>></a></div><div class="shangpin"><div class="good"><a href="https://mall.360.cn/search/?q=%E6%91%84%E5%83%8F%E6%9C%BA&track=PCsxjhb"><img src="./img/goods15.png"></a></div><div class="goods"><div class="text goods16"><div class="top"><p>爆款</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5d80a23ca7d03166ae3afa8e"><img src="./img/goods16.png"></a></div><div class="big-title">360 智能摄像机小水滴AI版D903</div><div class="small-title">智慧升级 看家看店更灵活</div><div class="price"><p>&yen;149 <s style="font-size:15px; color:#9B9B9B">&yen;169</s> </p></div></div><div class="text goods17"><div class="top"><p>爆款</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=59355161215ea051fc7e8ad9"><img src="./img/goods17.png"></a></div><div class="big-title">360 智能摄像机云台版1080P D706</div><div class="small-title">360度全景 双向通话</div><div class="price"><p>&yen;149 <s style="font-size:15px; color:#9B9B9B">&yen;199 </s></p></div></div><div class="text goods18"><div class="top"><p>卷后价179</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5d9048386792c55ec2264197"><img src="./img/goods18.png"></a></div><div class="big-title">360 智能摄像机红色警戒标准版AW2L 【券后价179元】</div><div class="small-title">暴雨级防水 增强红外夜视</div><div class="price"><p>&yen;189 <s style="font-size:15px; color:#9B9B9B">&yen;199</s> </p></div></div><div class="text goods19"><div class="top"><p> </p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5b9b55a5534b7f6295a9d3b8"><img src="./img/goods19.png"></a></div><div class="big-title">360 可视门铃D819 赠送两天循环永久云录</div><div class="small-title">有人逗留徘徊警报/远程可视通话</div><div class="price"><p>&yen;319 <s style="font-size:15px; color:#9B9B9B">&yen;349</s> </p></div></div><div class="text goods20"><div class="top"><p>  </p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5b6abdd2215ea051fc7e8d90"><img src="./img/goods20.png"></a></div><div class="big-title">360 智能摄像机 云台版1080P-标准款 D806</div><div class="small-title">广角镜头 智能追踪</div><div class="price"><p>&yen;179 <strong style="font-size:15px; color:#333333;">&yen;199</strong> <i class="fa fa-vimeo" style="color:#FBC24F;"></i> </p></div></div><div class="text goods21"><div class="top"><p>卷后价199</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5d15930bf759f133c63c1f8f"><img src="./img/goods21.png"></a></div><div class="big-title">360 智能摄像机云台AI版D916 【券后价199元】</div><div class="small-title">智慧升级 看家看店更灵活</div><div class="price"><p>&yen;249 <strong style="font-size:15px; color:#333333;">&yen;248</strong> <i class="fa fa-vimeo" style="color:#FBC24F;"></i> </p></div></div></div></div><div class="haibao3"><a href="https://mall.360.cn/ac/DCYCJ?track=TLdc"><img src="./img/haibao3.png"></a></div></div><div class="kuang4"><div class="word2"><strong>安全路由</strong><a href="" class="more2"> 全部>> </a></div><div class="shangpin"><div class="good"><a href="https://mall.360.cn/search/?q=%E6%91%84%E5%83%8F%E6%9C%BA&track=PCsxjhb"><img src="./img/goods22.png"></a></div><div class="goods"><div class="text goods16"><div class="top"><p>爆款</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5dc4d272f759f122d2ad0b54"><img src="./img/goods23.png"></a></div><div class="big-title">双母装 360全屋路由Mesh 路由器V5M</div><div class="small-title">全屋满速上网 wifi无死角</div><div class="price"><p>&yen;499 <s style="font-size:15px; color:#9B9B9B">&yen;549</s> </p></div></div><div class="text goods17"><div class="top"><p>爆款</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5d036135f759f165ded4a670"><img src="./img/goods24.png"></a></div><div class="big-title">360 家庭防火墙路由器5Pro</div><div class="small-title">高增益六天线 双频CPU</div><div class="price"><p>&yen;179 <s style="font-size:15px; color:#9B9B9B">&yen;199 </s></p></div></div><div class="text goods18"><div class="top"><p>卷后价179</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5c0f69016792c523598e8738"><img src="./img/goods25.png"></a></div><div class="big-title">360 家庭防火墙路由器 5</div><div class="small-title">千兆双频 超强覆盖</div><div class="price"><p>&yen;85 <s style="font-size:15px; color:#9B9B9B">&yen;119</s> </p></div></div><div class="text goods19"><div class="top"><p> </p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5d512fab6792c554c2c738b2"><img src="./img/goods26.png"></a></div><div class="big-title">360 家庭防火墙路由器V5S 安盾系列</div><div class="small-title">AC1200全千兆</div><div class="price"><p>&yen;129 <s style="font-size:15px; color:#9B9B9B">&yen;159</s> </p></div></div><div class="text goods20"><div class="top"><p>  </p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=54b8ca0958d4a6452500004f"><img src="./img/goods27.png"></a></div><div class="big-title">360 随身WiFi 3 黑色</div><div class="small-title">双天线设计 信号双保险</div><div class="price"><p>&yen;24.9  </p></div></div><div class="text goods21"><div class="top"><p>卷后价199</p></div><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5797063d4ae38d2fa0ac5e60"><img src="./img/goods28.png"></a></div><div class="big-title">360 WiFi扩展器 R1</div><div class="small-title">增强信号覆盖 扫除信号死角</div><div class="price"><p>&yen;49 </p></div></div></div></div><div class="haibao3"><a href=""><img src="./img/haibao4.png"></a></div></div><div class="kuang6"><div class="word4"><strong>视频</strong></div><div class="goods"><div class="text goods29"><div class="img"><a href="https://mall.360.cn/shop/item?item_id=5d8b50f66792c554c2c73d2f"><img src="./img/goods29.png"></a></div><div class="big-title">360 扫地机器人X90</div><div class="small-title">性能全升级 更干净一步</div><div class="price"><p>&yen;2099</p></div><div class="goumai"><p>立即购买</p></div></div><div class="text goods30"><div class="img"><a href="https://mall.360.cn/shop/item?item_id=5d15930bf759f133c63c1f8f"><img src="./img/goods30.png"></a></div><div class="big-title">360 智能摄像机云台AI版D916</div><div class="small-title">一键通话 微光全彩 360°全景视野 人脸检索 人形侦测</div><div class="price"><p>&yen;249</p></div><div class="goumai"><p>立即购买</p></div></div><div class="text goods31"><div class="img"><a href="https://mall.360.cn/shop/item?item_id=5d47fedaa7d0311ae6fcaa6a"><img src="./img/goods31.png"></a></div><div class="big-title">360 行车记录仪K600</div><div class="small-title">小巧身材 大有眼界</div><div class="price"><p>&yen;369</p></div><div class="goumai"><p>立即购买</p></div></div></div></div><div class="kuang7"><div class="word5"><strong>社区</strong></div><div class="goods"><div class="text goods32"><div class="img"><a href="https://bbs.360.cn/forum.php?mod=viewthread&tid=15796877"><img src="./img/goods32.png"></a></div><div class="big-title">短小精悍，大眼睛——360记录仪K600开箱体验</div><div class="small-title">当今，很多车主都会给自己爱车装配上行车记录仪，对交通事故责任判定、防碰瓷起到非常重要的作用。近日，360推出了全新的行车记录仪K600，它采用无屏设计，使得体积小巧，不会遮挡视野，还内置GPS电子狗功能，功能十分强大。下面我们就开箱体验一下吧。</div></div><div class="text goods33"><div class="img"><a href="https://bbs.360.cn/forum.php?mod=viewthread&tid=15798285"><img src="./img/goods33.png"></a></div><div class="big-title">注重颜值与工艺细节 360扫地机器人X90开箱图赏</div><div class="small-title">随着科技和智能家居行业的不断发展，诸如扫地机器人这样的智能家庭清洁设备逐渐走进千家万户，产品覆盖人群也逐渐从年轻一族覆盖到父母等老一辈的用户。有很多传统做家居清洁设备的品牌开始向扫地机器人领域发力，也有一些新晋的互联网创业品牌瞄准了这一势头。而Ai人工智能领域在近几年的火热，也的确给一些新兴品牌在产品设计和功能层面注入了新鲜的血液，依靠强大的处理芯片和先进的激光雷达导航技术，使扫地机器人更加聪明。</div></div><div class="text goods34"><div class="img"><a href="https://bbs.360.cn/thread-15802703-1-1.html"><img src="./img/goods34.png"></a></div><div class="big-title">安全好用的家庭防火墙路由，360路由V5S体验</div><div class="small-title">随着智能家居产品越来越丰富，家庭生活中需要网络支持的终端越来越多，所以对于路由的选择也愈加重要。不仅要考虑网络质量，还要考虑网络安全，真是操碎了心。360最近推出了新品家庭防火墙产品360 V5S，一起看看其表现如何。</div></div><div class="text goods35"><div class="img"><a href="https://bbs.360.cn/thread-15790876-1-1.html"><img src="./img/goods35.png"></a></div><div class="big-title">具有安全守护功能的智能手表，360健康手表体验</div><div class="small-title">近年来儿童手表相当的普及，这样的产品对于孩子的安全，与家长的沟通等方面都有很大的帮助。其实除了孩子以外，老人甚至成人，也都可以用到这样的功能。这次我要体验的就是360健康手表，这是一款专为成人而生的智能手表。</div></div></div></div><div class="kuang8"><div class="word6"><strong>更多商品</strong></div><div class="goods"><div class="text goods36"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5e7c2a73ad4cd55beded6cca"><img src="./img/goods36.png"></a></div><div class="title">Pilot-M配件/车载USB-TypeC数据线</div><div class="price"><p>&yen;99</p></div></div><div class="text goods37"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5e79c44dad4cd55beded6c43"><img src="./img/goods37.png"></a></div><div class="title">霍尼韦尔杀菌除味机家车两用MSE-U0银色/玫瑰金</div><div class="price"><p>&yen;319</p></div></div><div class="text goods38"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5e79c325ad4cd55beded6c42"><img src="./img/goods38.png"></a></div><div class="title">霍尼韦尔车家两用空气净化器MSE-U2星空灰</div><div class="price"><p>&yen;699</p></div></div><div class="text goods39"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5e79be9ead4cd55beded6c40"><img src="./img/goods39.png"></a></div><div class="title">霍尼韦尔车家两用空气净化器MSE-U1星空灰</div><div class="price"><p>&yen;599</p></div></div><div class="text goods40"><div class="img"><a href="http://mall.360.cn/shop/item?item_id=5e79b8161e53353565a398fe"><img src="./img/goods40.png"></a></div><div class="title">霍尼韦尔除味净化盒MSA-H1银黑</div><div class="price"><p>&yen;149</p></div></div></div></div><div class="kuang10"><p>————我们已经陪你到底了————</p></div><div class="kuang9"><div class="word7"><div class="text about"><strong>关于商城</strong><p>360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验</p><hr><p style="margin-top:20px;">关于我们 <i class="fa fa-weixin fa-1g"></i> <i class="fa fa-qq fa-1g"></i> <i class="fa fa-weibo fa-1g"></i></p></div><div class="text server"><strong>售后服务</strong><p>7日无理由退货</p><p>质量问题15日内换货</p><p>保修条款</p><p>服务流程</p><p>许可协议</p><p>隐私政策</p></div><div class="text help"><strong>帮助中心</strong><p>用户注册</p><p>会员说明</p><p>登录与密码找回</p><p>购买指南</p><p>支付方式</p><p>配送与说明</p><p>招商合作</p></div><div class="text download"><strong>扫码下载APP</strong><img src="./img/download.png"></div><div class="text call"><strong>联系我们</strong><p>400-1555-360</p><p>周一至周日 9:00-21:00（仅收市话费）</p></div></div></div><div class="kuang11"><div class="bottom"><div class="message"><a href=""><i class="fa fa-reply fa-2x">7天无理由退货</i></a><a href=""><i class="fa fa-exchange fa-2x">15天免费换货</i></a><a href=""><i class="fa fa-shopping-basket fa-2x">满99包邮</i></a></div><div class="ur"><hr></div><div class="uers"><p style="color:#fff;">©2019-2020 mall.360.cn版权所有</p><p style="color:#fff;">京ICP备08010314号-43 营业执照 京公网安备11000002000006号</p><p>公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证</p><p>公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-1555-360</p></div></div></div><script src="./JS/360.js"></script></body>
</html>

css代码

*{margin: 0; padding: 0; list-style: none;}
a{text-decoration:none;}.top{width: 100%; height: 90px;}
.top .tiaofu{min-width:1200px; height: 90px; margin:0 auto; max-width:1920px}
.top .tiaofu img{width: 100%; height: 90px;}.denglu{width: 100%; height: 40px; background: black;}
.denglu .dengluk{width: 1200px; height: 40px; margin: 0 auto; padding-top: 10px;}
.denglu .dengluk .left{position: absolute; margin: 0 auto;}
.denglu .dengluk .right{margin: 0 auto;}
.denglu .dengluk a{color: white;font-size:14px; margin-right: 20px;}.sousu{width: 100%; height: 110px;}
.sousuk{width: 1200px; height: 102px; margin: 0 auto; position: relative;}
.sousuk .logo{width:230px; height: 102px; display: inline-block; position: absolute;}
.sousuk .logo img{left: 0; margin-top: 30px;}
.sousuk .word{width: 200px; height: 102px;position: absolute; left: 230px; line-height: 100px;}
.sousuk .word a{font-size: 20px; color: black;  margin-right: 20px;}
.sousuk .search{display: inline-block; margin: 0 auto; position: absolute; right: 0; top: 30px; border: 1px solid gray; border-radius: 30px; overflow: hidden;}
.sousuk .search input{width: 370px; height: 35px; border: 0 none; padding:0 0 0 5px ; outline: none;}
.sousuk .search button{width: 60px; height: 35px; border: 0 none; outline: none;}
.sousuk .tuijian{width: 380px; height: 20px; position: absolute;right: 0; bottom:10px;}
.sousuk .tuijian a{font-size: 14px; color: black;  margin-right: 8px;}.banner{width: 100%; height: 530px; position: relative; margin:0 auto;}.banner .banners{width: 1920px; height: 530px; position: absolute;}
.banner .banners .img{width: 7680px; height: 530px; overflow: hidden;}
.banner .banners .img li{width:1920px; float: left;}
.banner .banners .img img{width: 100%; height: 100%;}
.banner .banners .icon{position: absolute; bottom: 5px; left: 50%;}
.banner .banners .icon li{width: 35px; height: 35px; border:1px solid black; float: left; margin-left: 5px; text-align: center; line-height: 35px; border-radius: 18px; cursor: pointer;}
.banner .banners .btn{float: left; font-size: 35px; font-weight: bold; cursor: pointer;}
.banner .banners .btn .btnleft{position: absolute; top: 50%; left: 10%;}
.banner .banners .btn .btnright{position: absolute; top: 50%; right: 10%;}.banner .fenlei{width:230px; height: 100%; position: absolute; left: 350px;}
.banner .fenlei .tab{width: 230px; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.5);}
.banner .fenlei .tab a{line-height: 48px; color: #fff; position: relative; left: 24px;}
.banner .fenlei .tab ul li{float: center; line-height: 48px;}
.banner .fenlei .tab ul li a{font-size: 16px; color: white; position: relative; left: 25px;}
.banner .fenlei .tab i{margin-right: 5px;}
.banner .fenlei .tab .color{background: #666;}
.banner .tab_list{position: relative; left: 230px;}
.banner .tab_list .item{width: 973px; height: 530px; text-align: center; background: #fff; font-size: 16px; line-height: 50px; display: none;}.kuang1{width: 100%; height: 464px;}
.kuang1 .word{width: 1200px; height: 44px; margin:0 auto;}
.kuang1 .word strong{font-size: 22px; color: black; line-height: 44px;}
.kuang1 .goods{width: 1200px; height: 300px; margin:0 auto;}
.kuang1 .goods .test{width: 280px; float: left; margin:0 26px 0 0;}
.kuang1 .goods img{width: 100%; height: 100%;}
.kuang1 .goods .goods4{margin-right: 0;}
.kuang1 .haibao{width: 1200px; margin: 0 auto;}
.kuang1 .haibao img{width: 100%}.kuang2{width: 100%; height: 444px;}
.kuang2 .words{width: 1200px; height: 44px; margin:0 auto;}
.kuang2 .words strong{font-size: 22px; line-height: 44px;}
.kuang2 .shangpin{width: 1200px; height: 400px; margin:0 auto;}
.kuang2 .shangpin .good{width:240px; height:400px; position: absolute;}
.kuang2 .shangpin .goods{width: 940px;height: 400px; position: absolute; left: 600px;}
.kuang2 .shangpin .goods .text{float: left;width: 400px; height: 180px; display: inline-block; margin:0 20px; padding: 10px; position: relative; border:1px solid #FFFFFF;}
.kuang2 .shangpin .goods .text:hover{border:1px solid #800040;}
.kuang2 .shangpin .goods img{width:160px; height:160px; position: absolute;}
.kuang2 .shangpin .goods .text .words{width: 200px; position: absolute; left: 190px;}
.kuang2 .shangpin .goods .text .words .goods-title{width:230px; height: 60px; font-size: 18px; line-height: 28px; overflow: hidden;}
.kuang2 .shangpin .goods .text .words .goods-price{font-size: 18px; font-weight: bold; color: #dd0e00; margin: 10px 0;}
.kuang2 .shangpin .goods .text .words .goods-miaosha{width: 135px; height: 35px; line-height: 35px; text-align: center; background:#333333; color: white; border-radius: 10px; margin: 10px 0;}
.kuang2 .shangpin .goods .goods7,.kuang2 .shangpin .goods .goods9{margin-right: 0;}.kuang3{width: 100%; height: 464px;}
.kuang3 .word1{width: 1200px; height: 44px; margin: 0 auto;}
.kuang3 .word1 strong{font-size: 24px; line-height: 44px;}
.kuang3 .goods{width: 1200px; height: 300px; margin: 0 auto;}
.kuang3 .goods .text{width: 280px; float: left; margin: 0 26px 0 0;}
.kuang3 .goods .text img{width: 100%; height: 100%;}
.kuang3 .goods .goods13{margin-right: 0px;}
.kuang3 .haibao2{width: 1200px; margin: 0 auto;}
.kuang3 .haibao2 img{width: 100%; height: 100%;}.kuang4{width: 100%; height: 1124px;}
.kuang4 .word2{width: 1200px; height: 44px; margin: 0 auto;}
.kuang4 .word2 strong{font-size: 24px; line-height: 44px;}
.kuang4 .word2 a{margin-left: 10px; color: black;}
.kuang4 .shangpin{width: 1200px; height: 960px; margin: 0 auto;}
.kuang4 .shangpin .good{width: 580px; height: 460px; float: left; margin-right: 20px;}
.kuang4 .shangpin .good img{width: 580px; height: 460px;}
.kuang4 .shangpin .goods{width: 1200px; height: 460px;}
.kuang4 .shangpin .goods .text{width: 280px; height: 460px; float: left; margin:0 20px 10px 0;  text-align: center; display: inline-block; overflow: hidden; border:1px solid #FFFFFF;}
.kuang4 .shangpin .goods .text:hover{border:1px solid #800040;}
.kuang4 .shangpin .goods .top{width: 80px; height: 20px; margin: 15px auto 0;}
.kuang4 .shangpin .goods .top p{color: #fff; font-size: 16px; background: #F17F38;}
.kuang4 .shangpin .goods img{width: 240px; height: 240px; margin:20px;}
.kuang4 .shangpin .goods .goods17,.kuang4 .shangpin .goods .goods21{margin-right: 0;}
.kuang4 .shangpin .goods .text .big-title{width:240px; height: 25px; font-size: 18px; line-height: 24px; overflow: hidden; margin:10px 10px 0 10px;}
.kuang4 .shangpin .goods .text .small-title{height: 20px; font-size: 16px; line-height: 20px; color: gray;}
.kuang4 .shangpin .goods .text .price{width:240px; height: 20px; font-size: 20px; line-height: 28px; color: #dd0e00; margin: 10px 0;}
.kuang4 .haibao3{width: 1200px; height: 120px; margin:0 auto;}
.kuang4 .haibao3 img{width: 100%; height: 100%;}.kuang4 .word2 .more1{color: red}
.kuang4 .word2 .more2{color: blue;}.kuang6{width: 100%; height: 464px;}
.kuang6 .word4{width: 1200px; height: 44px; margin: 0 auto;}
.kuang6 .word4 strong{font-size: 24px; line-height: 44px;}
.kuang6 .goods{width: 1200px; height: 420px; margin: 0 auto;}
.kuang6 .goods .text{width: 380px; height: 400px; float: left; margin: 10px 20px 10px 0; text-align: center; border:1px solid #FFFFFF;}
.kuang6 .goods .text:hover{border:1px solid #800040;}
.kuang6 .goods .img img{width: 380px; height: 200px; margin-bottom: 20px;}
.kuang6 .goods .goods31{margin-right: 0;}
.kuang6 .goods .big-title{font-size: 18px; line-height: 25px; overflow: hidden; margin: 10px 10px 0 10px;}
.kuang6 .goods .small-title{font-size: 16px; line-height: 20px; color: gray;}
.kuang6 .goods .price{font-size: 20px; line-height: 30px; color: #dd0e00; margin: 10px;}
.kuang6 .goods .goumai{width: 100px; height: 24px; background: #333333; color: white; border-radius: 15px; margin: 0 auto;}.kuang7{width: 100%; height: 464px;}
.kuang7 .word5{width: 1200px; height: 44px; margin: 0 auto;}
.kuang7 .word5 strong{font-size: 24px; line-height: 44px;}
.kuang7 .goods{width: 1200px; height: 420px; margin: 0 auto;}
.kuang7 .goods .text{width:280px ; height: 400px; float: left; margin:10px 15px 10px 0; overflow: hidden; border:1px solid #FFFFFF;}
.kuang7 .goods .text:hover{border:1px solid #800040;}
.kuang7 .goods .text .img img{width: 280px; height: 200px;}
.kuang7 .goods .big-title{width: 240px; height: 50px; font-size: 18px; line-height: 25px; margin: 20px;}
.kuang7 .goods .small-title{width: 240px; height: 60px; font-size: 14px; line-height: 20px; overflow: hidden; color: #999; margin: 15px;}
.kuang7 .goods .text .goods35{margin-right: 0;}.kuang8{width: 100%; height: 389px;}
.kuang8 .word6{width: 1200px; height: 44px; margin: 0 auto;}
.kuang8 .word6 strong{font-size: 24px; line-height: 44px;}
.kuang8 .goods{width: 1200px; height: 345px; margin: 0 auto;}
.kuang8 .goods .text{width:220px ; height: 345px; float: left; margin:10px 15px 10px 0; overflow: hidden; border:1px solid #FFFFFF;}
.kuang8 .goods .text:hover{border:1px solid #800040;}
.kuang8 .goods .text .img img{width: 180px; height: 180px; margin:20px; }
.kuang8 .goods .title{font-size: 16px; line-height: 25px; margin: 10px 20px;}
.kuang8 .goods .price{font-size: 20x; line-height: 20px;color: #dd0e00; text-align: center; font-weight: bold;}
.kuang8 .goods .text .goods40{margin-right: 0;}.kuang9{width: 100%; height: 381px; background: #FFFFFF;}
.kuang9 .word7{width: 1200px; height: 381px; margin: 0 auto; padding-top: 50px;}
.kuang9 .word7 .text{width: 220px; height: 381px; float: left;}
.kuang9 .word7 .text strong{font-size: 18px; line-height: 30px; display: inline-block; margin-bottom: 25px;}
.kuang9 .word7 .text p{font-size: 14px; line-height: 24px; margin-bottom: 10px;}
.kuang9 .word7 .about{width:264px;height: 247px; margin-right: 80px;}
.kuang9 .word7 .server{width:128px;height: 231px; margin-right: 80px;}
.kuang9 .word7 .help{width:98px;height: 261px; margin-right: 80px;}
.kuang9 .word7 .download{width:128px;height: 285px; margin-right: 80px;}
.kuang9 .word7 .call{width:301x;height: 230px;}.kuang10{width:100%; height: 60px;}
.kuang10 p{width: 1200px; height: 34px; margin:0 auto; font-size: 20px; line-height: 24px; text-align: center; color: #999;}.kuang11{width: 100%; height: 200px; background-color: #333333;}
.kuang11 .bottom{width: 1200px; height: 200px; margin: 0 auto; color: #fff; text-align: center;}
.kuang11 .uers{padding-top: 20px;}
.kuang11 .bottom a{font-size: 12px; line-height: 80px; color: #fff; margin-right: 100px;}
.kuang11 .bottom p{font-size: 14px; line-height: 20px; color: #999999;}

js代码

var banner = document.getElementById("banner");
var banners = document.getElementById("banners");
var imgs = document.getElementById("imglist").getElementsByTagName("li");
var icons = document.getElementById("iconlist").getElementsByTagName("li");var left1 = document.getElementById("btnleft");
var right1 = document.getElementById("btnright");var left = 0;
var timer;run();
function run(){if(left == -5760){left = 0;}var n = (left % 1920 == 0) ? 1000 : 10;changeimg();var m = Math.floor(-left / 1920);changeicon(m);left -= 10;timer = setTimeout(run,n);
}function changeimg(){imglist.style.marginLeft = left + "px";
}function changeicon(m){for(var i = 0; i < icons.length; i++){icons[i].style.backgroundColor = "";}icons[m].style.backgroundColor = "red";
}for(var i = 0; i < imgs.length; i++){(function(i){imgs[i].onmousemove = function(){clearTimeout(timer);left = -i * 1920;changeimg();changeicon(i);}imgs[i].onmouseout = function(){run();}})(i)
}for(var i = 0; i < icons.length; i++){(function(i){icons[i].onmousemove = function(){clearTimeout(timer);left = -i * 1920;changeimg();changeicon(i);}icons[i].onmouseout = function(){run();}})(i)
}left1.onclick=function(){var m = Math.floor(-left/1920);clearTimeout(timer);if(m==0){left = -3*1920;changeimg();changeicon(m);}left = (-m+1)*1920;changeimg();changeicon(m);
}right1.onclick=function(){var m = Math.floor(-left/1920);clearTimeout(timer);if(m==3){left = 0;changeimg();changeicon(m);}left = (-m-1)*1920;changeimg();changeicon(m);
}var tabs = document.getElementById('tab').getElementsByTagName('li');
var item = document.getElementById('tab_list').getElementsByClassName('item');for(var i = 0; i < tabs.length; i++){tabs[i].index = i;tabs[i].onmousemove = function(){for(var i = 0; i < tabs.length; i++){tabs[i].className = '';}tabs[this.index].className = 'color';for(var i = 0; i < item.length; i++){item[i].style.display = 'none';}item[this.index].style.display = 'block';}
}

360商城页面练习（html+css+js）相关推荐

大学web基础期末大作业~仿品优购商城页面制作(HTML+CSS+JavaScript)
HTML网页设计期末课程大作业~~仿品优购页面制作(HTML+CSS+JavaScript) 关于HTML期末网页制作,大作业A+水平 ~仿品优购网页作业HTML+CSS+JavaScript实现,共 ...
【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）
项目源码已上传至码云仓库:云南农业职业技术学院/HTML响应式成人教育官网前端页面(HTML+CSS+JS实现) 项目演示地址:成人教育网 AAP端下载地址:成人教育网APP端.apk-互联网文档类资 ...
HTML5七夕情人节表白网页_飘落蒲公英动画超酷炫的HTML5页面_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册
HTML5七夕情人节表白网页❤飘落蒲公英动画超酷炫的HTML5页面❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 ...
美团html页面代码,html+css+js制作美团官网
[实例简介] 该美团官网用html+css+js实现,对于前端新手来说,也可以去找类似的官网练练手,对自己帮助还是很大的,其中的很多细节错误都可以在锻炼中修改.希望该项目对大家有帮助,下载了的朋友顺便 ...
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
超级可爱的登录页面（html+css+js）
ps:前端嫩牛,技术肯定不如大牛,如果有什么不足的地方,请您提出宝贵的意见,感谢! 一.作品介绍本作品是我独立完成的一个个人网站的登录页面,实现了动态透明输入框.背景图自适应浏览器窗口.模拟登录验 ...
html日历页面节假日_html+css+js实现一个简易日历
0.效果预览简易只实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. 1.HTML部分 < > 日一二三四五六 2.CSS部分 #cldFrame ...
《个人相册》项目相册页面（HTML+CSS+JS）
CSS部分 body {margin: 0px; }#title {width: 100%;height: 50px;background: #000; }#title1 {float: left;c ...
H5+css : 360商城的首页布局模拟
H5+css : 360商城的首页布局模拟因为360商城页面过长,商品分类页面只选择了一个页面做一下实现.且只做了基本的布局和鼠标悬停效果 <!DOCTYPE html> <htm ...
基于HTML+CSS+JS+JSP+Mysql的书城购书商城设计与实现文档+项目源码及数据库文件
资源下载地址:https://download.csdn.net/download/sheziqiong/85723200 资源下载地址:https://download.csdn.net/downl ...

360商城页面练习（html+css+js）

360商城页面练习（html+css+js）相关推荐

最新文章

热门文章