html--京东秒杀模块图的静态模块的制作

最新推荐文章于 2024-04-14 15:22:35 发布
最新推荐文章于 2024-04-14 15:22:35 发布
阅读量1k 收藏 12
点赞数
分类专栏： 笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/125761269
版权

分析：

五个模块 div

处在同一行：float浮动效果

盒子的大小是：190*260

首先用一个大容器 -包含五个小容器 

 

开始小容器编写样式

 

 

让大容器可以撑起整个容器的大小（BFC----防止父容器崩塌）  使用了overflow

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东秒杀静态模块的搭建</title>
	<style type="text/css">
		.container{
			border: red solid 1px;
			overflow: hidden;

			
		}
		.item{
			float: left;
			width: 190px;
			height: 260px;
			border: #188EF0 solid 1px;
				
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	
</body>
</html>

 

 设置第一个模块

分析结构：

主标题h2.title

图标i.icon

文字p.desc（段落）

时间div.clock---里面右span(着色区域)

 

 发现存在默认边距，所以需要使用通用选择器进行样式的清除

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东秒杀静态模块的搭建</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			font: 12px/1.5 Tahoma, Arial, Harrington, "微软雅黑" /*给标签一个初始大小 12像素 1.5倍行距 管理字体*/
		}
		.container{
			border: red solid 1px;
			overflow: hidden;	
		}
		.item{
			float: left;
			width: 190px;
			height: 260px;
			border: #188EF0 solid 1px;			
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="item">
			<h2 class="title">京东秒杀</h2>
			<i class="icon"></i>
			<p class="desc"></p>
			<div class="clock">
				<span class="hour"></span>
				<span class="minute"></span>
				<span class="second"></span>
			</div>
			
		</div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	
</body>
</html>

副标题，图标的设置 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东秒杀静态模块的搭建</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			font: 12px/1.5 Tahoma, Arial, Harrington, "微软雅黑" /*给标签一个初始大小 12像素 1.5倍行距 管理字体*/
		}
		.container{
			border: red solid 1px;
			overflow: hidden;	
		}
		.item{
			float: left;
			width: 190px;
			height: 260px;
			border: #188EF0 solid 1px;			
		}
		.ms{/*秒杀模块拥有单独的背景色 且模块的字体是白色*/
			background-color: #D90D0D;
			color: white;
			text-align: center;/*表示里面所有的模块是居中的*/
		}
		.ms .title{/*秒杀模块的字体*/
			font-size: 30px;
			margin: 15px;/*距头顶*/
		}
		.ms .subtitle{
			font-size: 20px;
			color: rgba(255,255,255,0.5);/*含有透明色*/
			margin-bottom: 10px;/*和下一个模块保持距离*/
		}
		.ms .icon{/*那个闪电描述 这个盒子*/
			width: 30px;
			height:57px;/*此时没有显示 */
			display: block;/*i元素通过这个显示属性*/
			background-image: url(../images/3.jpg);/*此时只显示了一小部分 需要移动*/
			background-position: -130px -102px;
			margin:0 auto;/*块状模块的居中*/
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="item ms">
			<h2 class="title">
				京东秒杀
			</h2>
			<h3 class="subtitle">
				FLASH DEALS
			</h3>
			<i class="icon">
				
			</i>
			<p class="desc"></p>
			<div class="clock">
				<span class="hour"></span>
				<span class="minute"></span>
				<span class="second"></span>
			</div>
			
		</div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	
</body>
</html>

 效果

 时间的设置

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东秒杀静态模块的搭建</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			font: 12px/1.5 Tahoma, Arial, Harrington, "微软雅黑" /*给标签一个初始大小 12像素 1.5倍行距 管理字体*/
		}
		.container{
			border: red solid 1px;
			overflow: hidden;	
		}
		.item{
			float: left;
			width: 190px;
			height: 260px;
			border: #188EF0 solid 1px;			
		}
		.ms{/*秒杀模块拥有单独的背景色 且模块的字体是白色*/
			background-color: #D90D0D;
			color: white;
			text-align: center;/*表示里面所有的模块是居中的*/
		}
		.ms .title{/*秒杀模块的字体*/
			font-size: 30px;
			margin: 15px;/*距头顶*/
		}
		.ms .subtitle{
			font-size: 20px;
			color: rgba(255,255,255,0.5);/*含有透明色*/
			margin-bottom: 10px;/*和下一个模块保持距离*/
		}
		.ms .icon{/*那个闪电描述 这个盒子*/
			width: 30px;
			height:57px;/*此时没有显示 */
			display: block;/*i元素通过这个显示属性*/
			background-image: url(../images/3.jpg);/*此时只显示了一小部分 需要移动*/
			background-position: -130px -102px;
			margin:0 auto 15px;/*块状模块的居中*/ /*和下一个模块保持距离*/
			
		}
		.ms .desc{
			font-size: 16px;
			margin: 5px;
			
		}
		/*后代选择器*/
		.ms .clock span.second,span.hour,span.minute{
			display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
			width: 40px;
			height: 40px;
			background-color: black;
			font-size: 20px;
			line-height: 40px;/*让字体的显示在中间按*/	
		}
		.ms .clock span.point{
			display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
			width: 10px;
			height: 40px;
		
			font-size: 20px;
			line-height: 40px;/*让字体的显示在中间按*/
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="item ms">
			<h2 class="title">
				京东秒杀
			</h2>
			
			<h3 class="subtitle">
				FLASH DEALS
			</h3>
			
			<i class="icon">
			</i>
			
			<p class="desc">
				本场距离结束时间
			</p>
			<div class="clock">
				<span class="hour">23</span>
				<span class="point">:</span>
				<span class="minute">33</span>
				<span class="point">:</span>
				<span class="second">38</span>
			</div>
			
		</div>
		
		
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	
</body>
</html>

实现效果

 

第二个模块--里面的整个模块都是一个链接 （如何将链接的行状元素变成块状元素）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东秒杀静态模块的搭建</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			font: 12px/1.5 Tahoma, Arial, Harrington, "微软雅黑" /*给标签一个初始大小 12像素 1.5倍行距 管理字体*/
		}
		a{
			text-decoration: none;/*去掉默认链接的下划线*/
			color: black;
		}
		a:hover{
			color: red;/*实现鼠标上去变色*/
		}
		.container{
			border: red solid 1px;
			overflow: hidden;	
		}
		.item{
			float: left;
			width: 190px;
			height: 260px;
			border: #188EF0 solid 1px;			
		}
		.ms{/*秒杀模块拥有单独的背景色 且模块的字体是白色*/
			background-color: #D90D0D;
			color: white;
			text-align: center;/*表示里面所有的模块是居中的*/
		}
		.ms .title{/*秒杀模块的字体*/
			font-size: 30px;
			margin: 15px;/*距头顶*/
		}
		.ms .subtitle{
			font-size: 20px;
			color: rgba(255,255,255,0.5);/*含有透明色*/
			margin-bottom: 10px;/*和下一个模块保持距离*/
		}
		.ms .icon{/*那个闪电描述 这个盒子*/
			width: 30px;
			height:57px;/*此时没有显示 */
			display: block;/*i元素通过这个显示属性*/
			background-image: url(../images/3.jpg);/*此时只显示了一小部分 需要移动*/
			background-position: -130px -102px;
			margin:0 auto 15px;/*块状模块的居中*/ /*和下一个模块保持距离*/
			
		}
		.ms .desc{
			font-size: 16px;
			margin: 5px;
			
		}
		/*后代选择器*/
		.ms .clock span.second,span.hour,span.minute{
			display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
			width: 40px;
			height: 40px;
			background-color: black;
			font-size: 20px;
			line-height: 40px;/*让字体的显示在中间按*/	
		}
		.ms .clock span.point{
			display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
			width: 10px;
			height: 40px;
		
			font-size: 20px;
			line-height: 40px;/*让字体的显示在中间按*/
		}
		.product-link{
			display: block;
			height: 100%;
			text-align: center;
			padding-top: 39px;
		}
		.product-desc{/*文字显示在一行并且没显示的用...代替*/
			white-space: nowrap;/*文字不换行*/
			width: 160px;
			overflow: hidden;
			text-overflow: ellipsis;/*超出部分使用..代替*/
			margin: 0 auto 20px;	
			
		}
		.price{
			width: 160px;
			height: 20px;
			background-color: red;
			margin: 0 auto;
			padding:1px;
		}
		.price span{
		
			width: 78px;
			height: 20px;
			font-size: 14px;
			display: inline-block;
		}
		.price .price-new{
			line-height: 20px;
			color: antiquewhite;
			
		}
		.price .price-old{
		
			color: white;
			background-color: #766364;
			
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="item ms">
			<h2 class="title">
				京东秒杀
			</h2>
			
			<h3 class="subtitle">
				FLASH DEALS
			</h3>
			
			<i class="icon">
			</i>
	
			<p class="desc">
				本场距离结束时间
			</p>
			<div class="clock">
				<span class="hour">23</span>
				<span class="point">:</span>
				<span class="minute">33</span>
				<span class="point">:</span>
				<span class="second">38</span>
			</div>
			
		</div>
		
		
		<div class="item">
			<a href="#" class="product-link">
				<img src="https://img20.360buyimg.com/seckillcms/s280x280_jfs/t28882/109/582315249/52026/e4ff99b9/5bf7cb37N98f8ac82.jpg.webp" alt="商品" height="130">
				<p class="product-desc">
					3M 节气门清洗剂【不伤镀层|多功能除油泥除积碳|8866升级】汽车金属件润滑节流阀去油污非化清剂PN18066
				</p>
				<div class="price">
					<span class="price-new">
						134.00
					</span>
					<span class="price-old">
						208.00
					</span>
				</div>
			</a>
		</div>
		
		<div class="item">
			
		</div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
	
</body>
</html>

 

其他几个于其类似 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东秒杀静态模块的搭建</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			font: 12px/1.5 Tahoma, Arial, Harrington, "微软雅黑" /*给标签一个初始大小 12像素 1.5倍行距 管理字体*/
		}
		a{
			text-decoration: none;/*去掉默认链接的下划线*/
			color: black;
		}
		a:hover{
			color: red;/*实现鼠标上去变色*/
		}
		.container{
			/*border: red solid 1px;*/
			overflow: hidden;	
		}
		.item{
			float: left;
			width: 190px;
			height: 260px;
			border: #877D7D solid 1px;			
		}
		.ms{/*秒杀模块拥有单独的背景色 且模块的字体是白色*/
			background-color: #D90D0D;
			color: white;
			text-align: center;/*表示里面所有的模块是居中的*/
		}
		.ms .title{/*秒杀模块的字体*/
			font-size: 30px;
			margin: 15px;/*距头顶*/
		}
		.ms .subtitle{
			font-size: 20px;
			color: rgba(255,255,255,0.5);/*含有透明色*/
			margin-bottom: 10px;/*和下一个模块保持距离*/
		}
		.ms .icon{/*那个闪电描述 这个盒子*/
			width: 30px;
			height:57px;/*此时没有显示 */
			display: block;/*i元素通过这个显示属性*/
			background-image: url(../images/3.jpg);/*此时只显示了一小部分 需要移动*/
			background-position: -130px -102px;
			margin:0 auto 15px;/*块状模块的居中*/ /*和下一个模块保持距离*/
			
		}
		.ms .desc{
			font-size: 16px;
			margin: 5px;
			
		}
		/*后代选择器*/
		.ms .clock span.second,span.hour,span.minute{
			display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
			width: 40px;
			height: 40px;
			background-color: black;
			font-size: 20px;
			line-height: 40px;/*让字体的显示在中间按*/	
		}
		.ms .clock span.point{
			display: inline-block;/*并排显示 更是为了可以人为指定宽度*/
			width: 10px;
			height: 40px;
		
			font-size: 20px;
			line-height: 40px;/*让字体的显示在中间按*/
		}
		.product-link{
			display: block;
			height: 100%;
			text-align: center;
			padding-top: 39px;
		}
		.product-desc{/*文字显示在一行并且没显示的用...代替*/
			white-space: nowrap;/*文字不换行*/
			width: 160px;
			overflow: hidden;
			text-overflow: ellipsis;/*超出部分使用..代替*/
			margin: 0 auto 20px;	
			
		}
		.price{
			width: 160px;
			height: 20px;
			background-color: red;
			margin: 0 auto;
			padding:1px;
		}
		.price span{
		
			width: 78px;
			height: 20px;
			font-size: 14px;
			display: inline-block;
		}
		.price .price-new{
			line-height: 20px;
			color: antiquewhite;
			
		}
		.price .price-old{
		
			color: white;
			background-color: #766364;
			
		}
	</style>
	
</head>
<body>
	<div class="container">
		<div class="item ms">
			<h2 class="title">
				京东秒杀
			</h2>
			
			<h3 class="subtitle">
				FLASH DEALS
			</h3>
			
			<i class="icon">
			</i>
	
			<p class="desc">
				本场距离结束时间
			</p>
			<div class="clock">
				<span class="hour">23</span>
				<span class="point">:</span>
				<span class="minute">33</span>
				<span class="point">:</span>
				<span class="second">38</span>
			</div>
			
		</div>
		
		
		<div class="item">
			<a href="#" class="product-link">
				<img src="https://img20.360buyimg.com/seckillcms/s280x280_jfs/t28882/109/582315249/52026/e4ff99b9/5bf7cb37N98f8ac82.jpg.webp" alt="商品" height="130">
				<p class="product-desc">
					3M 节气门清洗剂【不伤镀层|多功能除油泥除积碳|8866升级】汽车金属件润滑节流阀去油污非化清剂PN18066
				</p>
				<div class="price">
					<span class="price-new">
						134.00
					</span>
					<span class="price-old">
						208.00
					</span>
				</div>
			</a>
		</div>
		
		<div class="item">
			<a href="#" class="product-link">
				<img src="//img12.360buyimg.com/seckillcms/s280x280_jfs/t1/116581/22/13747/111761/5f2373f5E2f543b8f/8a64bb1f2303930b.jpg.webp" alt="商品" height="130">
				<p class="product-desc">
				华为nova7 SE 5G手机【12期免息可选/送碎屏险】 全网通 幻夜黑 8G+128G
				</p>
				<div class="price">
					<span class="price-new">
						1324.00
					</span>
					<span class="price-old">
						4208.00
					</span>
				</div>
			</a>
		</div>
		<div class="item">
			<a href="#" class="product-link">
				<img src="//img12.360buyimg.com/seckillcms/s280x280_jfs/t1/144957/21/3917/192269/5f1fcf99E314ac8a7/75a2d6a7cabc3d72.jpg.webp" alt="商品" height="130">
				<p class="product-desc">
				雷公馆 毛呢大衣女秋冬新品毛呢外套羊毛呢宽松显瘦呢子大衣中长款单排扣品牌上衣 米白色 M
				</p>
				<div class="price">
					<span class="price-new">
						324.00
					</span>
					<span class="price-old">
						908.00
					</span>
				</div>
			</a>
		</div>
		<div class="item">
			<a href="#" class="product-link">
				<img src="//img11.360buyimg.com/seckillcms/s260x260_jfs/t1/103508/30/18755/139160/5e95de23E4fbce6aa/b6e6d20f2857803d.jpg.webp" alt="商品" height="130">
				<p class="product-desc">
				爆品手机秒杀专场ddddddd
				</p>
				<div class="price">
					<span class="price-new">
						924.00
					</span>
					<span class="price-old">
						2908.00
					</span>
				</div>
			</a>
		</div>
	</div>
	
</body>
</html>

 

¡Venceremo
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东抢购商品秒杀脚本.txt
11-29
这是一篇关于京东秒杀的脚本，复制在控制台即可使用，操作简单，只需要修改两处的时间，精确到秒，回车即可
html5京东秒杀页面代码,静态页面（一）：原生JS模拟京东秒杀专场倒计时
weixin_32803887的博客
06-03 2851
最近将BOM重新复习了一遍，本想使用定时器给女朋友做一个生日倒计时，奈何canvas都忘了。所以模拟了一个京东的秒杀专场倒计时。各位小伙伴有什么建议和意见，请不吝赐教。下面是京东首页的截图：利用BOM提供的setInterval()方法可以实现这样的一个小功能。HTML代码：京东秒杀000000CSS样式表：/*清除默认内外边距*/*{padding:0;margin:0;}/*设置超链接的样式*...
京东秒杀价布局
m0_63019813的博客
04-14 284
css直角三角的制作
html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
weixin_32160507的博客
06-23 1045
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。仿京东秒杀倒计时html代码秒杀倒计时::css样式代码*{margin: 0;padding: 0;}#box{width: 200px;height:300px;margin: 200px 200px;background: red;position:...
html+css实战169-css精灵-使用
geyaoisnice的博客
06-20 216
html
京东网站页面编写(HTML、CSS、JS)，包括京东秒杀的倒计时、轮播图等功能
热门推荐
m0_54585610的博客
10-21 1万+
仿真京东动态网站，包括京东秒杀的倒计时、轮播图等功能
SysML精粹-内部模块图
02-24
内部模块图(InternalBlockDiagram,IBD)和BDD的关系非常密切。你可以在IBD中显示各种元素来说明系统结构的各个方面，那会对BDD中表达的内容做补充。IBD还有其独特的能力，它是建模工具箱中的重要部分。你创建IBD是...
nginx中使用nginx-http-concat模块合并静态资源文件
09-30
主要介绍了nginx中使用nginx-http-concat模块合并静态资源文件,用以加速网站的CSS、JS等静态资源载入速度,需要的朋友可以参考下
webpack—-js的静态模块打包器
01-08
当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle，默认webpack只能理解javascript文件。 官方文档 ...
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip
最新发布
04-17
大学生静态网页设计期末作业-HTML+CSS制作咖啡介绍静态网页设计.zip 95分以上必过项目，下载即用，无需修改。小白也可实战。包括字体、背景颜色和内边距等。它还为各个区域设置了特定的背景颜色。 一个基本的网页...
android京东秒杀倒计时,jQuery仿京东每日秒杀倒计时代码
weixin_30750349的博客
05-26 283
使用方法：1、head引入css文件2、head引入js文件3、body引入HTML代码倒计时COUNT DOWN距离结束还剩000000$(document).ready(function () {var oDate = new Date();var nowTime = oDate.getTime(); //现在的毫秒数oDate.setDate(oDate.getDate() + 1); //...
jd秒抢购物车的代码.html
10-18
jd秒抢购物车的代码.html
京东HTML静态模板页面全套.zip
08-08
京东HTML静态模板页面全套.zip
关于静态页面HTML的框架
07-30
描述了HTML静态页面下的基础框架，对于学习使用HTML的同学有很大帮助。（自己总结的笔记，不喜勿喷，谢谢）
一个纯js写的秒杀页面
09-20
一个纯js写的秒杀页面 三个过程：秒杀倒计时 秒杀进行时 秒杀结束
淘宝整点秒杀html5前段
06-25
99%接近淘宝限时抢购
小猿圈Python之实现京东秒杀功能代码
weixin_33847182的博客
05-17 1240
现在电商产业的多种多样，从最早的阿里巴巴、淘宝到现在的京东等等数不胜数，你还记得的京东的秒杀功能吗？小猿圈python讲师今天就为你实现京东秒杀功能代码。#Python3.5#coding:utf-8#import scrapyfrom selenium import webdriverimport timeimport datetimedriver = webdriver.Firefox()dr...
倒计时案例
yxyx0614的博客
01-16 323
在这个案例中，利用定时器setInterval()实现倒计时
HTML+CSS+JavaScript：实现京东秒杀倒计时效果
lbcbjtlhmjq的博客
07-28 1326
三、算法思路 1、获取当日日期并渲染至倒计时顶部 2、获取当日下班时间的时间戳 3、封装函数：获取剩余时间 3.1. 获取当前时间的时间戳 3.2. 两时间戳相减得到剩余时间 3.3. 将时间转化成时分秒 3.4. 将时间渲染到页面中，小于10的数字前需要补0 4、先调用一次获取剩余时间的函数，因为间歇函数一秒之后才会启用 5、利用间歇函数实现倒计时动态效果，函数调用的时间间隔为1秒

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值