html+css+简单的js制作的超市页面_htmlcssjs制作个人介绍页面资源-CSDN文库

共44个文件

jpg：27个

png：12个

js：3个

3 浏览量 2023-09-12 14:17:10 上传评论 3 收藏 453KB RAR 举报

在本项目中，“html+css+简单的js制作的超市页面”是一个典型的Web前端开发实例，主要涉及HTML（超文本标记语言）、CSS（层叠样式表）和JavaScript这三种核心技术。这些技术是构建交互式网页的基础，下面将详细介绍它们在创建超市界面设计中的应用。 HTML（HyperText Markup Language）是网页内容的结构框架。在这个超市页面中，HTML用于定义不同的元素，如商品的标题、描述、价格、图片等。例如，`<div>`标签可以创建一个区域来展示商品，`<img>`标签插入商品图片，`<h1>`至`<h6>`定义不同级别的标题，`<p>`用于添加商品描述，`<a>`创建可点击的链接，可能是用于跳转到商品详情页或加入购物车功能。接着，CSS（Cascading Style Sheets）是用于美化HTML元素的样式规则。在超市页面设计中，CSS可以用来设定页面的整体布局，如设置背景色、字体风格、大小和颜色，以及商品展示的网格系统。例如，通过使用`display: flex`或`grid`布局，可以实现商品卡片的整齐排列。利用`margin`和`padding`调整元素间距，`border`设置边框，`box-shadow`添加阴影效果，以增强视觉层次感。此外，CSS还能够实现响应式设计，使页面在不同设备上显示效果良好，比如通过媒体查询(`media queries`)针对手机和平板等小屏幕进行适配。再者，JavaScript（JS）是让网页具有动态功能的关键。在超市页面中，JavaScript可能用于实现以下功能： 1. 商品的动态加载：通过AJAX（异步JavaScript和XML）请求服务器获取数据，实时更新页面内容。 2. 购物车功能：用户点击“添加到购物车”按钮时，JavaScript可以增加商品数量，并可能弹出提示信息，同时更新页面上的购物车总数。 3. 滚动加载：当用户滚动到页面底部时，自动加载更多商品。 4. 鼠标悬停效果：显示商品的更多信息，如预览图、简短评价等。 5. 表单验证：在用户提交购买信息前，检查输入的有效性，如邮箱格式、数量范围等。在这个项目中，开发者可能使用了像jQuery这样的JavaScript库来简化DOM操作，或者使用Vue、React或Angular等现代前端框架来组织代码和提高性能。此外，可能还用到了一些JavaScript库或插件，如Bootstrap的JS组件，来快速实现交互效果。这个“超市页面”项目展示了HTML、CSS和JavaScript在构建交互式Web应用中的协同工作。HTML提供结构，CSS负责样式，JavaScript则赋予页面动态交互性。通过对这些技术的熟练掌握和灵活运用，开发者可以创建出各种复杂且用户体验优秀的网页应用。

展开

资源推荐

资源详情

资源评论

收起资源包目录

超市模仿.rar （44个子文件）

超市模仿

menu.js 617B

banner.js 454B

jquery.min.js 91KB

img

bottom2.jpg 2KB

bottom10.png 619B

2.jpg 60KB

bottom9.png 931B

47.jpg 14KB

13.jpg 8KB

46.jpg 13KB

01.jpg 9KB

xsq.png 2KB

14.jpg 3KB

pic2.png 112B

1.jpg 81KB

152110718068231844.jpg 4KB

new-down-img.png 4KB

sptt_a.png 7KB

sptt.png 10KB

p4.jpg 10KB

p6.jpg 11KB

bottom8.jpg 4KB

bottom4.jpg 3KB

bottom5.jpg 2KB

12.jpg 8KB

index.png 11KB

20.jpg 14KB

11.jpg 12KB

bottom1.jpg 2KB

logo.jpg 5KB

29.jpg 16KB

p2.jpg 8KB

chaoshi.png 13KB

p3.jpg 8KB

38.jpg 15KB

bottom3.jpg 2KB

152480985414096131.jpg 23KB

p5.jpg 11KB

bottom7.png 951B

h5.png 4KB

bottom6.png 1017B

p1.jpg 37KB

css

style.css 12KB

index.html 9KB

      <!DOCTYPE html>
<html lang="en">
	
	<head>
		<meta charset="UTF-8">
		<title>小唐超市</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	
	<!--从上到下 分模块进行设计-->
	
	<body>
		<!--1.顶部导航栏设计-->
		<!--分为左右两部分-->
		<div class="nav">
			<div class="typearea">
				<div class="nav_left"> 
				<a href="#"> 返回首页</a>
				<a href="#">网站导航</a>
				<a href="#">商家入驻</a>
				<a href="#">客户服务</a>
				</div>
				<div class="nav_right">
					<a href="#"> 请登录</a>
					<a href="#"> 注册有礼</a>
					<a href="#"> 我的订单</a>
					<a href="#"> 我的易购</a>
					<a href="#"> 小唐会员</a>
					<a href="#"> 购物车</a>
					<a href="#"> 易付宝</a>
					<a href="#"> 企业采购</a>
					<a href="#"> 手机小唐</a>
				</div>
			</div>
		</div>
		<!--2.搜索框那一行-->
		<!-- 搜索框那一行 -->
		<div class="content_top">
			<div class="typearea">
				<div class="logo">
					<img src="img/logo.jpg" alt="" />
				</div>
				<div class="content_top_center">
					<div class="search">
						<span><i class="iconfont icon-search"></i></span><input type="text" id="placehold"/><a href="javascript:;" class="submit">搜索</a>
						<ul id="ss_uo">
						</ul>
					</div>
					<div class="search_ul">
						<ul>
							<li><a href="javascript:;">啤酒</a></li><img src="img/pic2.png" alt="" />
							<li class="horange"><a href="javascript:;">小罐茶</a></li><img src="img/pic2.png" alt="" />
							<li><a href="javascript:;">阿胶糕</a></li><img src="img/pic2.png" alt="" />
							<li class="horange"><a href="javascript:;">怡宝</a></li><img src="img/pic2.png" alt="" />
							<li class="horange"><a href="javascript:;">维达</a></li><img src="img/pic2.png" alt="" />
							<li><a href="javascript:;">松露巧克力</a></li><img src="img/pic2.png" alt="" />
							<li><a href="javascript:;">胡姬花</a></li><img src="img/pic2.png" alt="" />
							<li><a href="javascript:;">防晒霜</a></li><img src="img/pic2.png" alt="" />
							<li><a href="javascript:;">伊萨狗粮</a></li><img src="img/pic2.png" alt="" />
							<li><a href="javascript:;">清扬</a></li>
						</ul>
					</div>
				</div>
				<div class="code">
					<img src="img/new-down-img.png" alt="" />
				</div>
			</div>
		</div>
		
		<!-- 表头 -->
		<div class="sort">
			<div class="sort_pop">
				<div class="sort_tit">
					<i class="iconfont icon-caidan"></i>
					<a href="javascript:;">苏苏超市频道分类</a>
				</div>
				<div class="sort_ul">
					<ul>
						<li><a href="javascript:;">超值抢购</a></li><span></span>
						<li><a href="javascript:;">量贩巨惠</a></li><span></span>
						<li><a href="javascript:;">苏苏生鲜</a></li><span></span>
						<li><a href="javascript:;">医药保健</a></li><span></span>
						<li><a href="javascript:;">特色馆</a></li><span></span>
					</ul>
				</div>
			</div>
		</div>
		
		
		<div class="content">
			<!-- 导航开始 -->
			<div class="content_nav">
				<ul>
					<li><i class=" c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">苏苏生鲜</a></span><span class="c_n_s2"><a href="javascript:;">水果</a><a href="javascript:;">海鲜水产</a></span></li>
					<li><i class="c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">酒水饮料</a></span><span class="c_n_s2"><a href="javascript:;">红酒</a><a href="javascript:;">酸奶</a><a href="javascript:;">咖啡</a></span></li>
					<li><i class="c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">粮油干货零食</a></span><span class="c_n_s2"><a href="javascript:;">食用油</a><a href="javascript:;">坚果蜜饯</a></span></li>
					<li><i class="c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">纸品清洁</a></span><span class="c_n_s2"><a href="javascript:;">抽纸</a><a href="javascript:;">洗衣液</a><a href="javascript:;">卷纸</a><a href="javascript:;">柔顺剂</a></span></li>
					<li><i class="c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">美妆个护</a></span><span class="c_n_s2"><a href="javascript:;">洗面奶</a><a href="javascript:;">洗护</a><a href="javascript:;">面膜</a><a href="javascript:;">姨妈巾</a></span></li>
					<li><i class="c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">医药保健</a></span><span class="c_n_s2"><a href="javascript:;">血压计</a><a href="javascript:;">成人用品</a></span></li>
				</ul>
			</div>
			<!-- 右侧活动部分 -->
			<div class="content_nav_r">
				<div class="c_n_r_t">
					<ul>
						<li><a href="javascript:;"><em></em><p>牛奶的妙用</p></a></li>
						<li><a href="javascript:;"><em></em><p>小龙虾千万别吃头</p></a></li>
						<li><a href="javascript:;"><em></em><p>1克干燕窝等于40颗蛋</p></a></li>
					</ul>
				</div>
				<div class="c_n_r_b">
					<a href="javascript:;"><img src="img/sptt_a.png" alt=""></a>
				</div>
			</div>
			<!-- 轮播图 -->
			<div id="container">
		        <ul >
		            <li><a href="javascript:;"><img src="img/1.jpg" ></a></li>
		            
		        </ul>
		        
		    </div>
		</div>
		
		<!-- 抢购部分 -->
		<div class="buy_tit">
			<p>限/时/抢/购</p>
			<p>FLASH SALE</p>
		</div>
		
		
		<!-- 抢购商品 -->
		<div class="buy">
			<p class="buy_p" >距离本场结束还有</p>
			<div class="buy_time">
				<em>00</em>
				<em>00</em>
				<em>00</em>
			</div>
			<div class="buy_nav">
				<ul>
					<li class="active">
						
						<a href="javascript:;">今日必抢</a>
					</li>
					<li>
						<a href="javascript:;">明日预告</a>
					</li>
				</ul>
			</div>
			
			
			<div class="lazy">
				<div class="lazy_t">
					<ul class="lazy_t_ul active">
						<li><a href="javascript:;"><p class="lazy_t_p1">￥79.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">金龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li>
						<li><a href="javascript:;"><p class="lazy_t_p1">￥69.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">木龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li>
						<li><a href="javascript:;"><p class="lazy_t_p1">￥59.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">水龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li>
						<li><a href="javascript:;"><p class="lazy_t_p1">￥49.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">火龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li>
						<li><a href="javascript:;"><p class="lazy_t_p1">￥39.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">土龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li>
					</ul>
					<ul class="lazy_t_ul" >
						<li><a href="javascript:;"><p class="lazy_t_p1">￥149.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">天龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li>
						<li><a href="javascript:;"><p class="lazy_t_p1">￥139.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">地龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li>
						<li><a href="javascript:;"><p class="lazy_t_p1">￥129.90</p><img src="img/01.jpg" alt=""><p clas