淘宝商品信息css+html

最新推荐文章于 2024-04-22 14:22:36 发布
最新推荐文章于 2024-04-22 14:22:36 发布
阅读量6.6k 收藏 87
点赞数 15
文章标签： 商品信息css+html html css 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37244548/article/details/106127254
版权

目标制作:

步骤：

1，设置总体的div和插入图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s商品</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			a{
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.goods{
				width: 255px;
				height: 390px;
				border: 1px solid red;
			}
			/* 设置图片的大小 */
			.goods>.dd>img{
				width: 250px;
				height: 255px;
				
			}
		</style>
	</head>
	<body>
		<div class="goods">
			<div class="dd">
				<img src="img/22.jpg_.webp.jpg" alt="这是一个图片">
				<div>
					
				</div>
			</div>
		</div>
	</body>
</html>

2, 设置图标

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s商品</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			a{
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.goods{
				width: 255px;
				height: 390px;
				border: 1px solid red;
			}
			/* 设置图片的大小 */
			.goods>.dd>img{
				width: 250px;
				height: 255px;
				
			}
			.dd{
				width: 255px;
				height: 255px;
				
			}
			.intro{
				width: 255px;
				height: 25px;
				background-color: orange;
				/* 绝对定位，子级绝对点位，父级一定是相对定位 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: -2px;
				/* 本身不出来，当hover的时候才出来 */
				
			}
		</style>
	</head>
	<body>
		<div class="goods">
			<div class="dd">
				<img src="img/22.jpg_.webp.jpg" alt="这是一个图片">
				<div class="intro">
					<div class="intro-left"><a href="">找同款</a></div>
					<div class="intro-right"><a href="">找相似</a></div>
				</div>
				<div>
					
				</div>
			</div>
		</div>
	</body>
</html>

3，设置绝对，相对定位，左浮动和右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 因为超链接a的字体是白色 */
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.goods{
			width: 255px;
			height: 390px;
			border: 1px solid red;
			
			}
			/* 设置图片的大小 */
			.goods>.dd>img{
				width: 255px;
				height: 255px;
				
			}	
			.dd{
				width: 255px;
				height: 255px;
				position: relative;
			}
			.intro{
				width: 255px;
				height: 25px;
				background-color: orange;
				/* 绝对定位，子级绝对点位，父级一定是相对定位 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: -2px;
				/* 本身不出来，当hover的时候才出来 */
				display: none;
			}
			.goods>.dd:hover>.intro{
				display:block ;
				}
			.intro-left{
				width: 130px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.intro-right{
				width: 125px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.price{
				color: orange;
				font-size: 20px;
			}
			/* 伪元素 */
			.price::after{
				content:'包邮' ;
				color: orange;
				font-size: 14px;
				display: inline-block;
				margin-left: 6px;
			}
			.count{
				color: black;
				font-size: 14px;
				float: right;
				display: inline-block;
				margin-top:10px;
				margin-right:10px;
			}
				.title>a{
					color: #333;
					font-size: 12px;
					
				}
				.title>a:hover{
					color: orange;
					text-align: underline;
				}
				p.color{
					color: #999;
				}
				.title>img{
					/* 图标居中 */
					vertical-align:middle ;
					display: inline-block;
					margin-top:1px;
				}
				
		</style>
	</head>
	<body>
		<div class="goods">
			<div class="dd">
				<img src="img/22.jpg_.webp.jpg" alt="这是图片">
				<div class="intro">
					<div class="intro-left"><a href="">找同款</a></div>
					<div class="intro-right"><a href="">找相似</a></div>
				</div>
				</div>
				<p>
					<span class="price">￥128.00</span>
					<span class="count">10万人付款</span>
				</p>
				
				<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
				<p class="title"><img src="img/88888.png" alt="这是一个图片">
				<a href="">ubras内衣旗舰店</a>
				</p>
		</div>
	</body>
</html>

 

4，设置hover效果和display的属性

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s商品</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.goods{
				width: 255px;
				height: 390px;
				border: 1px solid red;
			}
			/* 设置图片的大小 */
			.goods>.dd>img{
				width: 250px;
				height: 255px;
				
			}
			.dd{
				width: 255px;
				height: 255px;
				position: relative;
			}
			.intro{
				width: 255px;
				height: 25px;
				background-color: orange;
				/* 绝对定位，子级绝对点位，父级一定是相对定位 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: -2px;
				/* 本身不出来，当hover的时候才出来 */
				position: absolute;
				display: none;
			}
			.goods>.dd:hover>.intro{
				display:block ;
				}
			.intro-left{
				width: 130px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.intro-right{
				width: 125px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.intro-left>a{
				font-weight: bold;
			}
			.intro-right>a{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div class="goods">
			<div class="dd">
				<img src="img/22.jpg_.webp.jpg" alt="这是一个图片">
				<div class="intro">
					<div class="intro-left"><a href="">找同款</a></div>
					<div class="intro-right"><a href="">找相似</a></div>
				</div>
				<div>
					
				</div>
			</div>
		</div>
	</body>
</html>

5， 加文字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>s商品</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.goods{
				width: 255px;
				height: 390px;
				border: 1px solid red;
			}
			/* 设置图片的大小 */
			.goods>.dd>img{
				width: 250px;
				height: 255px;
				
			}
			.dd{
				width: 255px;
				height: 255px;
				position: relative;
			}
			.intro{
				width: 255px;
				height: 25px;
				background-color: orange;
				/* 绝对定位，子级绝对点位，父级一定是相对定位 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: -2px;
				/* 本身不出来，当hover的时候才出来 */
				position: absolute;
				display: none;
			}
			.goods>.dd:hover>.intro{
				display:block ;
				}
			.intro-left{
				width: 130px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.intro-right{
				width: 125px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.intro-left>a{
				font-weight: bold;
			}
			.intro-right>a{
				font-weight: bold;
			}
			.price{
				color: orange;
				font-size: 20px;
			}
			/* 伪元素 */
			.price::after{
				content:'包邮' ;
				color: orange;
				font-size: 14px;
				display: inline-block;
				margin-left: 6px;
			}
			.count{
				color: black;
				font-size: 14px;
				float: right;
				display: inline-block;
				margin-top:10px;
				margin-right:10px;
			}
			.title>a{
				color: #333;
				font-size: 12px;
				
			}
			.title>a:hover{
				color: orange;
				text-align: underline;
			}
			p.color{
				color: #999;
			}
		</style>
	</head>
	<body>
		<div class="goods">
			<div class="dd">
				<img src="img/22.jpg_.webp.jpg" alt="这是一个图片">
				<div class="intro">
					<div class="intro-left"><a href="">找同款</a></div>
					<div class="intro-right"><a href="">找相似</a></div>
				</div>
				<div>
					<p>
						<span class="price">￥128.00</span>
						<span class="count">10万人付款</span>
					</p>
					<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
					舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
					
				</div>
			</div>
		</div>
	</body>
</html>

6，处理剩下商品信息的内容

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 因为超链接a的字体是白色 */
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.goods{
			width: 257px;
			height: 390px;
		
			
			}
			/* 设置图片的大小 */
			.goods>.dd>img{
				width: 257px;
				height: 255px;
				
			}	
			.dd{
				width: 257px;
				height: 255px;
				position: relative;
			}
			.intro{
				width: 257px;
				height: 25px;
				background-color: orange;
				/* 绝对定位，子级绝对点位，父级一定是相对定位 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: -2px;
				/* 本身不出来，当hover的时候才出来 */
				display: none;
			}
			.goods>.dd:hover>.intro{
				display:block ;
				}
			.intro-left{
				width: 130px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.intro-right{
				width: 125px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.price{
				color: orange;
				font-size: 20px;
			}
			/* 伪元素 */
			.price::after{
				content:'包邮' ;
				color: orange;
				font-size: 14px;
				display: inline-block;
				margin-left: 6px;
			}
			.count{
				color: black;
				font-size: 14px;
				float: right;
				display: inline-block;
				margin-top:10px;
				margin-right:10px;
			}
				.title>a{
					color: #333;
					font-size: 12px;
					
				}
				.title>a:hover{
					color: orange;
					text-align: underline;
				}
				p.color{
					color: #999;
				}
				.title>img{
					/* 图标居中 */
					vertical-align:middle ;
					display: inline-block;
					margin-top:1px;
				}
				.n1{
					display: inline-block;
					margin-left:85px ;
					font-size: 12px;
					color: #333;
				}
				.n2{
					display: inline-block;
					margin-left: 3px;
					font-size: 12px;
					color: #333;
				}
				.cls2{
					float: right;
					display: inline-block;
					margin-right: 9px;
				}
				.cls1{
					display: inline-block;
					margin-left: 9px;
				}
				.windows{
					width: 255px;
					height: 135px;
					border: 1px solid #999999;
				}
				
		</style>
	</head>
	<body>
		<div class="goods">
			<div class="dd">
				<img src="img/22.jpg_.webp.jpg" alt="这是图片">
				<div class="intro">
					<div class="intro-left"><a href="">找同款</a></div>
					<div class="intro-right"><a href="">找相似</a></div>
				</div>
				</div>
				<div class="windows">
					<p>
										<span class="price">￥128.00</span>
										<span class="count">10万人付款</span>
									</p>
									
									<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
					舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
									<p class="title"><img src="img/88888.png" alt="这是一个图片">
									<a href="">ubras内衣旗舰店</a>
									<span class="n1">江苏</span>
									<span class="n2">无锡</span>
									</p>
									<div class="cls">
										<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
										<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
									</div>
				</div>
		</div>
	</body>
</html>

 

 7，商品在页面的布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品</title>
		<style>
			/* 共有标签去掉内外间距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 因为超链接a的字体是白色 */
			a{
				color: white;
				/* 去掉a标签的样式 */
				text-decoration: none;
			}
			/* 去掉ul，ol的样式 */
			ul,ol{
				list-style: none;
			}
			.goods{
			width: 257px;
			height: 390px;
			float: left;
			margin: 2px;
		 floa
			
			}
			/* 设置图片的大小 */
			.goods>.dd>img{
				width: 257px;
				height: 255px;
				
			}	
			.dd{
				width: 257px;
				height: 255px;
				position: relative;
			}
			.intro{
				width: 257px;
				height: 25px;
				background-color: orange;
				/* 绝对定位，子级绝对点位，父级一定是相对定位 */
				position: absolute;
				left: 0;
				right: 0;
				bottom: -2px;
				/* 本身不出来，当hover的时候才出来 */
				display: none;
			}
			.goods>.dd:hover>.intro{
				display:block ;
				}
			.intro-left{
				width: 130px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.intro-right{
				width: 125px;
				height: 25px;
				float: left;
				line-height:25px ;
				text-align: center;
			}
			.price{
				color: orange;
				font-size: 20px;
			}
			/* 伪元素 */
			.price::after{
				content:'包邮' ;
				color: orange;
				font-size: 14px;
				display: inline-block;
				margin-left: 6px;
			}
			.count{
				color: black;
				font-size: 14px;
				float: right;
				display: inline-block;
				margin-top:10px;
				margin-right:10px;
			}
				.title>a{
					color: #333;
					font-size: 12px;
					
				}
				.title>a:hover{
					color: orange;
					text-align: underline;
				}
				p.color{
					color: #999;
				}
				.title>img{
					/* 图标居中 */
					vertical-align:middle ;
					display: inline-block;
					margin-top:1px;
				}
				.n1{
					display: inline-block;
					margin-left:85px ;
					font-size: 12px;
					color: #333;
				}
				.n2{
					display: inline-block;
					margin-left: 3px;
					font-size: 12px;
					color: #333;
				}
				.cls2{
					float: right;
					display: inline-block;
					margin-right: 9px;
				}
				.cls1{
					display: inline-block;
					margin-left: 9px;
				}
				.windows{
					width: 255px;
					height: 135px;
					border: 1px solid #999999;
				}
				.content{
					width: 1300px;
					height: 2000px;
					margin: auto;
					border: 1px solid red;
				}
				
		</style>
	</head>
	<body>
		<div class="content">
			<div class="goods">
				<div class="dd">
					<img src="img/22.jpg_.webp.jpg" alt="这是图片">
					<div class="intro">
						<div class="intro-left"><a href="">找同款</a></div>
						<div class="intro-right"><a href="">找相似</a></div>
					</div>
					</div>
					<div class="windows">
						<p>
											<span class="price">￥128.00</span>
											<span class="count">10万人付款</span>
										</p>
										
										<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
						舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
										<p class="title"><img src="img/88888.png" alt="这是一个图片">
										<a href="">ubras内衣旗舰店</a>
										<span class="n1">江苏</span>
										<span class="n2">无锡</span>
										</p>
										<div class="cls">
											<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
											<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
										</div>
					</div>
			</div>
			<div class="goods">
				<div class="dd">
					<img src="img/22.jpg_.webp.jpg" alt="这是图片">
					<div class="intro">
						<div class="intro-left"><a href="">找同款</a></div>
						<div class="intro-right"><a href="">找相似</a></div>
					</div>
					</div>
					<div class="windows">
						<p>
											<span class="price">￥128.00</span>
											<span class="count">10万人付款</span>
										</p>
										
										<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
						舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
										<p class="title"><img src="img/88888.png" alt="这是一个图片">
										<a href="">ubras内衣旗舰店</a>
										<span class="n1">江苏</span>
										<span class="n2">无锡</span>
										</p>
										<div class="cls">
											<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
											<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
										</div>
					</div>
			</div>
			<div class="goods">
				<div class="dd">
					<img src="img/22.jpg_.webp.jpg" alt="这是图片">
					<div class="intro">
						<div class="intro-left"><a href="">找同款</a></div>
						<div class="intro-right"><a href="">找相似</a></div>
					</div>
					</div>
					<div class="windows">
						<p>
											<span class="price">￥128.00</span>
											<span class="count">10万人付款</span>
										</p>
										
										<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
						舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
										<p class="title"><img src="img/88888.png" alt="这是一个图片">
										<a href="">ubras内衣旗舰店</a>
										<span class="n1">江苏</span>
										<span class="n2">无锡</span>
										</p>
										<div class="cls">
											<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
											<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
										</div>
					</div>
			</div>
			<div class="goods">
				<div class="dd">
					<img src="img/22.jpg_.webp.jpg" alt="这是图片">
					<div class="intro">
						<div class="intro-left"><a href="">找同款</a></div>
						<div class="intro-right"><a href="">找相似</a></div>
					</div>
					</div>
					<div class="windows">
						<p>
											<span class="price">￥128.00</span>
											<span class="count">10万人付款</span>
										</p>
										
										<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
						舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
										<p class="title"><img src="img/88888.png" alt="这是一个图片">
										<a href="">ubras内衣旗舰店</a>
										<span class="n1">江苏</span>
										<span class="n2">无锡</span>
										</p>
										<div class="cls">
											<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
											<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
										</div>
					</div>
			</div>
			<div class="goods">
				<div class="dd">
					<img src="img/22.jpg_.webp.jpg" alt="这是图片">
					<div class="intro">
						<div class="intro-left"><a href="">找同款</a></div>
						<div class="intro-right"><a href="">找相似</a></div>
					</div>
					</div>
					<div class="windows">
						<p>
											<span class="price">￥128.00</span>
											<span class="count">10万人付款</span>
										</p>
										
										<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
						舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
										<p class="title"><img src="img/88888.png" alt="这是一个图片">
										<a href="">ubras内衣旗舰店</a>
										<span class="n1">江苏</span>
										<span class="n2">无锡</span>
										</p>
										<div class="cls">
											<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
											<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
										</div>
					</div>
			</div>
			<div class="goods">
				<div class="dd">
					<img src="img/22.jpg_.webp.jpg" alt="这是图片">
					<div class="intro">
						<div class="intro-left"><a href="">找同款</a></div>
						<div class="intro-right"><a href="">找相似</a></div>
					</div>
					</div>
					<div class="windows">
						<p>
											<span class="price">￥128.00</span>
											<span class="count">10万人付款</span>
										</p>
										
										<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
						舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
										<p class="title"><img src="img/88888.png" alt="这是一个图片">
										<a href="">ubras内衣旗舰店</a>
										<span class="n1">江苏</span>
										<span class="n2">无锡</span>
										</p>
										<div class="cls">
											<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
											<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
										</div>
					</div>
			</div>
			<div class="goods">
				<div class="dd">
					<img src="img/22.jpg_.webp.jpg" alt="这是图片">
					<div class="intro">
						<div class="intro-left"><a href="">找同款</a></div>
						<div class="intro-right"><a href="">找相似</a></div>
					</div>
					</div>
					<div class="windows">
						<p>
											<span class="price">￥128.00</span>
											<span class="count">10万人付款</span>
										</p>
										
										<p class="title color"><a href="#">【欧阳娜娜同款】Ubras无尺码背心式文胸无痕无钢圈内衣女士胸罩
						舒服到飞起的飞机Bra，高性价比，全网热销</a></p>
										<p class="title"><img src="img/88888.png" alt="这是一个图片">
										<a href="">ubras内衣旗舰店</a>
										<span class="n1">江苏</span>
										<span class="n2">无锡</span>
										</p>
										<div class="cls">
											<div class="cls1"><a href=""><img src="img/99.png" alt="这是一个图片"></a></div>
											<div class="cls2"><a href=""><img src="img/00.png" alt="这是一个图片"></a></div>
										</div>
					</div>
			</div>
			<!-- 清除浮动对兄弟节点的影响，浮动一般会影响平行级别的块元素或者文字 -->
			<div style="clear:both"></div>
			<p>介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，介绍内衣，</p>
		</div>
		
	</body>
</html>

我就呵呵了。。。
关注
  • 15
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html淘宝商品小窗口
weixin_54986763的博客
11-08 524
【代码】html淘宝商品小窗口。
web中用纯CSS实现筛选菜单
weixin_34406061的博客
09-16 830
web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果，例子虽然没有淘宝那样强大，不过原理差不多，如果花点心思也可以实现和淘宝一样的。 内容过滤是一个在Web上常见的一个功能，特别是在电商网站，为了让用户过滤内容，仅显示符合自己的要求的内容。截个图来说，能更好的说明这样的功能，比如淘宝网：     如上图所示，用户想购买一件裙子，在整个产品列表中，显示的产品...
css、jquery之淘宝搜索框制作
风逝暗殇
08-19 2033
今天联系制作了一个淘宝搜索框，制成效果如下： 记录一些在其中遇到的一些问题。 1.jquery中text()、html()、val()的区别：          text()是改变某个元素的文本内容；          html()可以改变元素和文本；（比如一个div的html()可以增加或修改div中其他元素）         val()获取或者改变某个元素的value值（前提
HTML+CSS淘宝 页眉导航栏以及Logo搜索框的实现
Tina_dl的博客
05-13 1万+
很久没记录了，现在对淘宝所有部整体实现（虽然还有部分的还没有实现， 我就是偷懒来保存下，可怜的小傻猫，要是崩了，我还又底从新开始，存 在的问题后期慢慢改）小傻猫日常呆 实现的效果如下： 所有的一二级菜单都实现了，但依旧有问题，就是一级导航的小图标有两个的我添加的时候出现了问题，后面东西都写的差不多，我再来看看 还有我的搜索框的实现借用了哪位博友的，太久了，我也忘了（这个不是我的） （郁闷的傻猫...
HTML+CSS简易淘宝页面
新白的博客
03-31 2万+
简易淘宝界面
超详细实现淘宝静态页面(附全部代码)
x1037490413的博客
09-12 2万+
文章目录一:基本结构与样式 一:基本结构与样式 1.划分结构的顺序是自上而下,从左往右,保证内容在一行内能显示 2.考虑的因素有内容,颜色块,间距
淘宝主页+女装会场+详情页（html+css+js）
天天的博客
01-08 8152
淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
HTML+CSS仿淘宝商城商品栏模块
qq_44829421的博客
03-26 581
HTML+CSS仿淘宝商城商品栏模块
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
学生作业作品HTML网页前端制作，淘宝商城页面，HTML+css+js
01-18
有7 个页面，完美展示了一个淘宝商城的页面，网页美观整洁，内含HTML+css+js，内附时间修改器，可修改文件创建时间
淘宝首页html+css+js源码
06-03
淘宝首页HTML源码，根据2019年06月年淘宝首页 制作，重合度99%，解压后放在项目里面可用直接运行看效果，采用html+css+js。还有swiper技术。尝试一下吧
html+css+js模仿淘宝搜索商品页面
11-11
纯html+css+js实现，百分之90以上和原网站基本相同
CSS+HTML仿写美团&淘宝网站首页静态页面.zip
12-14
CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站...
css3仿手机版淘宝商品并列显示
Amily_an的博客
04-06 768
并列商品不等高，交错显示 css .menuList_div { -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari 和 Chrome */ column-count:2; -moz-column-gap: 2em; -webkit-column-gap: 2em; column-gap: 1em; margin:0 auto; } .item { padding-bottom: 0.1em; mar
淘宝网首页仿写(html+css+js）
weixin_46811890的博客
08-10 2万+
【代码】淘宝网首页仿写(html+css+js）
HTML+CSS实现淘宝首页
热门推荐
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
html+css简单仿制淘宝商品界面
树下一少年的博客
02-08 4421
html+css简单仿制淘宝商品界面 一.主要思路 二.完整代码 三.最终效果
HTML+Css 简易淘宝界面
qq_52998673的博客
04-12 3542
记录下在学校写的比较全面的网页（都是静态的呦） 界面一：首页 界面二：小米商城 界面三：商品详情 界面四：登录界面 界面五：注册界面 界面六：服务中心 好啦~暂时就写了这几个网页，有需要代码的可以评论呦~~~ ...
HTML中的文档声明
最新发布
小卡酷谋的博客
04-22 1168
浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。书写文档声明原因是不同版本所支持的 HTML 元素类型是不同的，我需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件。模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的。
淘宝网页设计html+css
12-23
淘宝网页设计HTML+CSS是指使用HTML和CSS技术来设计淘宝网站的页面。HTML是一种标记语言，用于创建网页结构和内容，而CSS则是一种样式表语言，用于控制网页的外观和布局。淘宝网页设计需要考虑到用户体验和页面美观度，同时还需要考虑到网站的性能和可访问性。通过使用HTML和CSS技术，可以实现淘宝网站的页面静态展示，使用户可以更好地浏览和购买商品。 引用中提到的网页设计HTML+CSS实现淘宝页面首屏静态网页.zip是一个包含了淘宝商城页面的HTML、CSS和JS文件的压缩包。这个压缩包中包含了7个页面，可以完美展示一个淘宝商城的页面，同时还提供了时间修改器，方便用户修改文件的创建时间。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值