本文介绍了如何使用HTML、CSS和JavaScript实现360商城页面的制作过程，包括页面布局、样式设计和交互功能的实现。通过这段实战，读者可以提升前端开发技能。
实现效果如下：
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&
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
