弹性布局的应用-淘宝商品展示模块

最新推荐文章于 2024-03-29 11:08:42 发布

月亮都来了太阳还会远吗

最新推荐文章于 2024-03-29 11:08:42 发布

阅读量314

点赞数 1

文章标签：前端 css3 html

本文链接：https://blog.csdn.net/YuzuruHa/article/details/123313911

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝</title>
		<link rel="stylesheet" type="text/css" href="taobao.css" />
	</head>
	<body>
		<!-- 有好货 -->
		<div class="container">
			<div class="container1">
				<div class="title">
					<span>有好货</span>
					<img src="img/logo1.png">
				</div>
				<div class="title-down">
					<div class="container1-img">
						<div class="img1">
							<img src="img/title1.jpg">
						</div>
						<div class="img1-down">
							<h4>旺千福 磨砂哑光双层细发箍</h4>
							<p>秉承着对美好生活的向往，将潮流元素融入到设计中，恰到好处的展现出女性独有的魅力。</p>
						</div>
					</div>
					<div class="container1-img">
						<div class="img1">
							<img src="img/title2.jpg">
						</div>
						<div class="img1-down">
							<h4>法式水晶吊灯美式乡村铁艺灯</h4>
							<p>开灯时，美轮美奂，璀璨闪耀，璀璨又亮丽。</p>
						</div>
					</div>
					<div class="container1-img">
						<div class="img1">
							<img src="img/title3.jpg">
						</div>
						<div class="img1-down">
							<h4>真皮贵妃躺椅小沙发</h4>
							<p>容易组装， 体积大小：正好合适，使用舒适度：躺下去很舒服 外观材质：跟家里装修风格非常搭。</p>
						</div>
					</div>
					<div class="container1-img">
						<div class="img1">
							<img src="img/title4.jpg">
						</div>
						<div class="img1-down">
							<h4>VICTOR/威克多 羽毛球服外套</h4>
							<p>VICTOR(威克多)品牌为世界顶尖羽毛球运动品牌。激扬青春的男士外套，拉链式开襟设计，打造出经典的运动衫造型。搭配简洁大方的直筒身形，休闲之余提升了男性的精气神，更显干练有度。撞色拼接的设计，摆脱单一色彩的单调感，并把雄厚的流线型身形打造。
							</p>
						</div>
					</div>
					<div class="container1-img">
						<div class="img1">
							<img src="img/title5.jpg">
						</div>
						<div class="img1-down">
							<h4>InLady 水晶耳钉</h4>
							<p>这款耳坠简约大方，配以精致耀眼的八角形镶钻点缀，时尚气息十足，尽显别具一格的设计品味。加之晶莹剔透的水晶，优雅动人，十分的有韵味，粉色的色调，自带浪漫甜美的气息，尽显女性温婉典雅的气质。
							</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 猜你喜欢 -->
			<div class="container2">
				<div class="title2">
					<span>猜你喜欢</span>
					<img src="img/logo2.png">
				</div>
				<div class="title2-down">

                    <!-- 第一行图片 -->
					<div class="container2-img">
						<div class="img2">
							<img src="img/title6.jpg">
						</div>
						<div class="img2-down">
							<h4>春秋新款老北京布鞋男单鞋男士平底一脚蹬懒人休闲运动防滑工作鞋</h4>
						</div>
						<span class="price">¥13.88</span>

					</div>
					<div class="container2-img">
						<div class="img2">
							<img src="img/title7.jpg">
						</div>
						<div class="img2-down">
							<h4>
								<img src="img/logo3.png" height="16">
								防晒衣男女士外套超薄透气防紫外线户外皮肤风衣钓鱼衫夏季防晒服
							</h4>
						</div>
						<span class="price">¥23.9</span>

					</div>
					<div class="container2-img">
						<div class="img2">
							<img src="img/title6.jpg">
						</div>
						<div class="img2-down">
							<h4>春秋新款老北京布鞋男单鞋男士平底一脚蹬懒人休闲运动防滑工作鞋</h4>
						</div>
						<span class="price">¥13.88</span>

					</div>
					<div class="container2-img">
						<div class="img2">
							<img src="img/title6.jpg">
						</div>
						<div class="img2-down">
							<h4>春秋新款老北京布鞋男单鞋男士平底一脚蹬懒人休闲运动防滑工作鞋</h4>
						</div>
						<span class="price">¥13.88</span>

					</div>
					<div class="container2-img">
						
							<div class="img2">
								<img src="img/title6.jpg">
							</div>
							<div class="img2-down">
								<h4>春秋新款老北京布鞋男单鞋男士平底一脚蹬懒人休闲运动防滑工作鞋</h4>
							</div>
						
						<span class="price">¥13.88</span>

					</div>
				</div>
			</div>
		</div>

	</body>
</html>

*{
	margin: 0;
	padding: 0;
}
/* 中间身体部分 */
.container{
	width: 1190px;
	background-color: aqua;
	height: 500px;
	margin: 0 auto;
}

body{
	font-family: "微软雅黑";
}
/* 有好货 */
.title{
	display: flex;
	border: red 0px solid;
	margin-bottom: 10px;
	align-items: center;
	/* line-height: 24px; */
}
.title>span{
	font-family: 宋体;
	font-size: 24px;
	font-weight: bold;
}
.title>img{
	height: 20px;
	margin-left: 10px;
	/* line-height: 20px; */
	
}
.container1-img{
	border: blue 0px solid;
}

.img1{
	/* height: 215px; */
	/* border-radius: 15px; */
	border: #FF0000 0px solid;
	text-align: center;
	line-height: 215px;
	position: relative;
}
.img1>img{
	height: 215px;
	border-radius: 12px;
	
	/* padding-top: 20px; */
}
.img1>img:hover{
	transition: opacity 0.2s;
	opacity: 0.9;
}
.img1-down{
	position: absolute;
	top: 265px;
	
	border: 0px solid blueviolet;
	width: 215px;
	overflow: hidden;
	
	padding: 0 4px 0 6px;
	}
.img1-down>h4{
	font-size: 16px;
	color: #333333;
	font-weight: normal;
	overflow: hidden;
}
.img1-down>p{
	width: 190px;
	line-height: 15px;
	font-size: 14px;
	color: #999999;
	/* padding-bottom: 0px; */
	border: #008000 1px solid;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	letter-spacing: 0;
}
.title-down{
	border: deeppink 1px solid;
	display: flex;
	justify-content: space-between;
	/* margin-top: -20px; */
	/* height: 250px; */
}
.container1-img{
	border: green 1px solid;
	height: 260px;
	width: 215px;
	cursor: pointer;
	overflow: hidden;
	display: block;
}
.container1-img:hover h4{
	color: #FF5000;
}

/* 猜你喜欢 */
.title2{
	display: flex;
	border: red 1px solid;
	margin-top: 20px;
	align-items: center;
	/* line-height: 24px; */
}
.title2>span{
	font-family: 宋体;
	font-size: 24px;
	font-weight: bold;
}
.title2>img{
	height: 20px;
	margin-left: 10px;
	/* line-height: 20px; */
	
}
.title2-down{
	border: deeppink 1px solid;
	display: flex;
	justify-content: space-between;
	border: red 1px solod;
	/* margin-top: -10px; */
	/* margin-top: -20px; */
	/* height: 250px; */
}
.img2-down>h4{
	font-size: 16px;
	color: #333333;
	font-weight: normal;
	overflow: hidden;
	cursor: pointer;
	/* position: absolute;
	top: 580px; */
	/* margin-top: 200px; */
}
.img2-down{
	border: #FFA500 1px solid;
	margin-top: -95px;
	height: 44px;
	overflow: hidden;
	margin-bottom: 5px;
	
}
.price{
	font-size: 20px;
	color: #F40;
	height: 46px;
	line-height: 22px;
	border: black 1px solid;
	/* cursor: default; */
}

.container2-img{
	border: green 1px solid;
	height: 326px;
	width: 229px;
	background-color: #FFFFFF;
	border-radius: 10px;
	display: block;
	position: relative;
}
.container2-img:hover h4{
	color: #FF5000;
}
.container2-img:hover{
	box-shadow: 0 19px 39px 0 rgba(0, 0, 0, 0.3);
	transition: all 0.5s;
}
.img2{
	/* height: 326px; */
	/* border-radius: 15px; */
	border: red 1px solid;
	text-align: center;
	line-height: 215px;
	margin-top: 5px;
	/* position: relative; */
}
.img2>img{
	height: 215px;
	border-radius: 12px;
	cursor: pointer;
	/* padding-top: 20px; */
}
.img2>img:hover{
	transition: opacity 0.2s;
	opacity: 0.9;
}