JavaWeb div 京东家电模块节选

最新推荐文章于 2022-04-23 19:18:12 发布

cledwyn

最新推荐文章于 2022-04-23 19:18:12 发布

阅读量255

点赞数 1

分类专栏： JavaWeb 文章标签： JavaWeb div

本文链接：https://blog.csdn.net/cledwyn/article/details/87449953

版权

JavaWeb 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

京东家电模块节选https://jiadian.jd.com/
主要是对div的应用，包括一些元素的过渡动态效果。
原图效果是：在这里插入图片描述

做完的效果是：在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en"> 
<head>
	<meta charset="UTF-8">
	<meta name="keyword" content="关键字">
	<title>Javaweb</title>

	<style type="text/css">
		body{
			margin: 0;/* 默认为8 */
		}

		.wrap{
			width: 1010px;
			height: 300px;
			background-color: #767676;
			margin: 200px auto 200px auto ;/*margrin 上 右 下 左*/
		}

		.wrap a{
			width: 194px;
			height: 280px;
			background-color: #E9599D;
			display: inline-block;
			/* display: block;将行内元素转换成块级元素。inline 以行内元素显示 */
			text-decoration: none;/* 清除默认下划线 */
			color: #fff ;/* 文本字体颜色 */
			text-align: center;/* 文本对其方式 */
			background-image: url("images/1.webp");
			background-repeat: no-repeat;/* 背景图片不重复 */
			background-position: center 125px;/* 左右居中 上下移动 正值向下移动 */
			transition: 0.5s;/* 平滑过渡时间 */
		}

		.wrap a:nth-child(2){  /* 选择第二个子元素 */
			background-image: url("images/2.webp");
			background-position: center 105px;
			background-color: #FF9B43;
		}
		.wrap a:nth-child(3){
			background-image: url("images/3.webp");
			background-position: center 110px;
			background-color: #F8C235;
		}
		.wrap a:nth-child(4){
			background-image: url("images/4.webp");
			background-position: center 110px;
			background-color: #44B9AE;
		}
		.wrap a:nth-child(5){
			background-image: url("images/5.webp");
			background-position: center 110px;
			background-color: #49C0F1;
		}

		.wrap a:hover{ 
			/* hover：伪类选择器，通过样式给元素添加动态效果，当鼠标划过a标签时，图片位置发生改变 */
			background-position: center 115px;/* 变换 */

		}

	</style>
</head>


<body>
	<div class="wrap">
		<a href="https://sale.jd.com/act/jPbZs6QhNV.html">
			<h3>全民来砍价</h3>
			<p>最高砍价1000元</p>
		</a>
		<!-- a标签是行内元素,不支持宽高，不换行  div是块级元素，支持宽高，独占一行 -->
		<a href="https://sale.jd.com/act/U2Nad0G5n7.html">
			<h3>白条专场</h3>
			<p>6期免息</p>
		</a>
		<a href="https://a.jd.com/channel/coupons.html?cat=1&page=1">
			<h3>优惠券</h3>
			<p>领券下单更实惠</p>
		</a>
		<a href="https://sale.jd.com/act/BvZwPWeJG40.html">
			<h3>匠心制造</h3>
			<p>品质生活</p>
		</a>
		<a href="https://sale.jd.com/act/QJ6kLWtuAMsmOE5.html">
			<h3>精选清单</h3>
			<p>甄选优质购物清单</p>
		</a>	
	</div>
	
</body>
</html>

cledwyn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb div 京东家电模块节选

京东家电模块节选https://jiadian.jd.com/主要是对div的应用，包括一些元素的过渡动态效果。原图效果是：做完的效果是：代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="keyword&quo
复制链接

扫一扫