Web大学生网页作业成品——在线购物商城网页设计与实现(HTML+CSS+JS)（4个页面）

🎉🎉🎉 常见网页设计作业题材有**汽车、环保、明星、文化、国家、抗疫、景点、人物、体育、植物、公益、图书、节日、游戏、商城、旅游、家乡、学校、电影、动漫、非遗、动物、个人、企业、美食、婚纱、其他**等网页设计题目, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。🎉🎉🎉

---

一、作品介绍 🔥

🏷️本套采用HTML+CSS，使用Javacsript代码实现图片轮播切换，共有4个页面。

二、作品演示 ☁️

三、代码目录 🏠

四、网站代码 👿

HTML部分代码

<div class="header">
		<div class="ww">
			<div class="logo">
				在线购物商城
			</div>
			<div class="search">
				<input type="text" placeholder="请输入要搜索的商品...">
				<button>搜索</button>
			</div>
		</div>
	</div>
	
	
	<div class="nav">
		<div class="ww">
			<ul>
				<li class="ac"><a href="index.html">首页</a></li>
				<li><a href="goods.html">商品列表</a></li>
				<li><a href="business.html">热门商家</a></li>
				<li><a href="login.html">我要登录</a></li>
			</ul>
		</div>
	</div>
	
	
	<div class="imgs">
		<img src="./images/img1.jpg" alt="">
		<img src="./images/img2.png" alt="" class="hide">
	</div>
	
	
	<div class="main">
		<div class="ww">
		<div class="main_item">
			<div class="item_tit">
				新品推荐
			</div>
			<div class="item_list">
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p1.jpg" alt="">
					</div>
					<div class="item_name">
						Apple iPhone14  Pro Max(A2896) 全网通5G手机【晒单赠移动电源】
					</div>
					<div class="item_price">￥9249.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p2.jpg" alt="">
					</div>
					<div class="item_name">
						三星（SAMSUNG）S23 系列手机
					</div>
					<div class="item_price">￥3241.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p3.jpg" alt="">
					</div>
					<div class="item_name">
						索尼（SONY）PlayStation VR2 PS5专用 虚拟现实头盔头戴式设备
					</div>
					<div class="item_price">￥2249.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p4.jpg" alt="">
					</div>
					<div class="item_name">
						戴尔（Dell）灵越5430 14英寸 2.5K轻薄笔记本电脑（银色）
					</div>
					<div class="item_price">￥4249.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p5.jpg" alt="">
					</div>
					<div class="item_name">
						松下（Panasonic）家用全自动意式咖啡机NC-EA801HSQ（灰色）
					</div>
					<div class="item_price">￥4999.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p6.jpg" alt="">
					</div>
					<div class="item_name">
						九阳（Joyoung）家用多功能高速破壁机L18-P771（黑+银）
					</div>
					<div class="item_price">￥1799.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p7.jpg" alt="">
					</div>
					<div class="item_name">
						产地日本 进口日立 （HITACHI）615升 六门冰箱 R-WX650KC(XW)（水晶白）
					</div>
					<div class="item_price">￥29249.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p8.jpg" alt="">
					</div>
					<div class="item_name">
						格力（GREE）冷静王 1匹 变频空调 26GW/(26549)FNhAc-B1(WIFI)（皓雪白）
					</div>
					<div class="item_price">￥3799.00</div>
				</div>
			</div>
		</div>
		<div class="main_item">
			<div class="item_tit">
				热销榜单
			</div>
			<div class="item_list">
				
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p9.jpg" alt="">
					</div>
					<div class="item_name">
						华为（HUAWEI）Mate50 RS 保时捷设计 12+512G 鸿蒙旗舰手机
					</div>
					<div class="item_price">￥12699.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p10.jpg" alt="">
					</div>
					<div class="item_name">
						微软（Microsoft）Xbox Series X 游戏机（国行版）
					</div>
					<div class="item_price">￥4399.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p11.jpg" alt="">
					</div>
					<div class="item_name">
						Apple MacBook Pro 16英寸笔记本 【2023款】
					</div>
					<div class="item_price">￥19249.00</div>
				</div>
				<div class="item_one">
					<div class="item_img">
						<img src="./images/p12.jpg" alt="">
					</div>
					<div class="item_name">
						索尼（SONY）65英寸 QD-OLED 安卓智能电视 XR-65A95K（石板黑）
					</div>
					<div class="item_price">￥23999.00</div>
				</div>
			</div>
		</div>
		</div>
	</div>

五、如何学习网页制作 ❤️

🙋很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深印象，不知道如何提升自己，可以去看一些视频教程，跟着视频一起学习代码，切记一定要自己手动敲一遍代码，不然就算当时看视频学会也会很容易忘记。

六、源码获取 🏫

🥇1、 ~ 关注我，点赞博文~ 每天带你涨知识!
🎁2、看到这里了就[点赞+好评+收藏]三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
💙3、源码获取公众号，点点下方公众号进行获取吧! 网页搜索编号:E0037