首页 前端知识 HTML静态网页成品作业(HTML CSS JS)——在线购物商城网页设计制作(4个页面)

HTML静态网页成品作业(HTML CSS JS)——在线购物商城网页设计制作(4个页面)

2024-05-30 10:05:58 前端知识 前端哥 874 666 我要收藏

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用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.想要获取本文源码,点击前往吧

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10101.html
标签
评论
发布的文章

用点jquery实现的登录页面

2024-06-06 00:06:07

echarts-锥型柱状图

2024-06-06 00:06:05

echarts的使用

2024-06-06 00:06:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!