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

最新推荐文章于 2024-05-14 02:32:05 发布
置顶 最新推荐文章于 2024-05-14 02:32:05 发布
阅读量2.3k 收藏 6
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45624653/article/details/106493729
版权
本文介绍了如何使用HTML、CSS和JavaScript实现360商城页面的制作过程，包括页面布局、样式设计和交互功能的实现。通过这段实战，读者可以提升前端开发技能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

实现效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
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元/天 解锁文章
大学生HTML期末大作业——HTML+CSS+JavaScript购物商城（品优购）
...
04-15 2607
HTML+CSS+JS【购物商城】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站
最新发布
...
05-05 6331
HTML+CSS+JS【旅游网站】网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
360商城模版
qq_41912366的博客
12-20 534
看到360的商场界面感觉360的商城模版不难,所以决定做出一个类似的网页出来: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360商城</title> </head> <style> body{ margin: 0 auto;/*去掉body外边框的距离*/ }
html+css+js电商网页
12-06
html+css+js电商网页
HTML5期末大作业：商城网站设计——男女装商城-功能齐全(40页) HTML+CSS+JavaScript 大学生网店作品 商城网页设计作业模板 学生网页制作源代码下载
11-22 483
HTML5期末大作业：商城网站设计——男女装商城-功能齐全(40页) HTML+CSS+JavaScript 大学生网店作品 商城网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网
网上商城练习项目（包括数据库）
02-01
该项目适用于java初学者练习使用，本项目采用jsp+servlet+javabean+mysql数据库开发的网上商城系统，包含了数据库。该项目可以在eclipse配合tomcat1.7服务器mysql数据库。包含购物车系统+订单系统+结算系统。
大学生影视主题网页制作 HTML+CSS+JS仿360影视网站 dreamweaver电影HTML网站制作
08-10
通过对这份源码的学习与实践，不仅可以帮助大学生完成期末作业的要求，还能加深对HTML、CSS和JavaScript的理解与掌握，对于想要进一步提升自己前端开发技能的学生来说是非常有价值的参考资料。此外，项目中涉及的...
【网页设计】基于HTML+CSS旅游网站网页作业制作郴州
卡拉米
05-14 1277
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
html网页设计期末大作业：学校教育网站设计——卡通风格在线职业教育(14页) HTML+CSS+JavaScript
qq_365392777
09-28 1284
HTML5期末大作业：学校教育网站设计——卡通风格在线职业教育(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
纯 js + css 实现非常漂亮的网页电子时钟
05-29
- **代码组织**：在项目中，`simpleClock.css` 用于存储所有 CSS 样式，`simpleClock.js` 存储 JavaScript 逻辑，而 `H5 时钟.html` 是包含 HTML 结构和引入 CSS、JS 文件的主文件。 - **调试与优化**：开发者工具...
html5+javascript+css商城（模拟联想）购物系统
06-26
可以实现商城中信息的动态浏览与检索，实现用户的注册登录与增删改，商品信息增删改。下载后先打开命名为“软化工程”的word文档，阅读中间部分的运行配置说明
js+html+css实现简易商城项目
12-25
这是一个商城小项目，内含电子时钟、轮播图、表单验证、验证码等功能，包含注册、登录、设计说明、问卷调查、网上投票等页面！
html+css+javascript 电商网站web+mobile实战项目
12-28
html css javascript jquery实战演练项目 包含文本页面和移动页面 适合初学者学习 电商项目典型案列 web页面开发 移动端自适应页面开发 ！
java源码 仿360buy京东商城源码 京东JavaWeb项目源代码.zip
09-14
java源码 仿360buy京东商城源码 京东JavaWeb项目源代码.zip
【html模板】360安全卫士官网完整html源码，图片+js+css
04-16
360安全卫士官网，手动扒下，完整html源码，包含所需图片+js+css+html
电子商城《食品销售》HTML静态页面
04-16
这是一个食品商城的Html静态网页模型，其中包括的技术有：HTML5、JavaScript、css3等web网页开发技术。 其中有着完善的js技术与css样式，商城页面优美，可做一般食品商城系统开发使用！
H5+css : 360商城的首页布局模拟
GeiWo_YunCheYao的博客
12-19 417
H5+css : 360商城的首页布局模拟 因为360商城页面过长，商品分类页面只选择了一个页面做一下实现。且只做了基本的布局和鼠标悬停效果
360 启用java_GitHub - Yangyc07/360mall: java使用servlet实现360商城，Java using servlet to achieve 360 mall...
weixin_35282782的博客
02-27 186
360malljava使用纯servlet实现360商城开发语言：JAVA开发工具：Eclipse数据库：Mysql后台技术：纯Servlet+JDBC前台技术：Jsp+Css+Js如果本项目对您有帮助的话，请方便给我个Star简介这是我上大学期间写的第一个相对较完善的学习项目了，项目中所有css和js都是自己边摸索、边学习画出来的，自我感觉对于我当时的水平还算可以了。此项目适合javaweb初学...
HTML--网页练习--（360导航首页的一部分）
weixin_30593443的博客
12-23 317
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head&...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值