淘宝商品信息css+html

最新推荐文章于 2024-09-18 17:34:54 发布
最新推荐文章于 2024-09-18 17:34:54 发布
阅读量6.8k 收藏 87
点赞数 16
文章标签： 商品信息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>

我就呵呵了。。。
关注
淘宝首页web前端课设（HTML+css+js）
06-10
本web前端课设主要用到html，css知识点和一些少量的js语言编写的轮播图。适合于大一、大二正在做课设的同学进行参考。(我的博客里有做成的效果图和每个模块的解说内容，没有了解的同学可以先去看看做成功的页面效果...
淘宝主页+女装会场+详情页（html+css+js）
天天的博客
01-08 8671
淘宝网是中国电商行业的领军企业，其前端网站技术一直处于国内领先水平。本博客旨在分享淘宝网前端在技术方面的积累与探索。内容涵盖前端开发、性能优化、移动端适配、架构设计等诸多方面，对于前端开发人员有着较高的技术参考价值。注：不含源码
HTML+CSS简易淘宝页面
新白的博客
03-31 2万+
简易淘宝界面
HTML+CSS大作业：简易购物网站（4页）
最新发布
weixin_53453950的博客
09-18 741
本网站是以购物商城为主题制作的一个购物网站，网站内容分为四个板块，分别是主页，商品详情，购物车，登陆注册这四个页面，网站包含大量js，例如主页的背景颜色切换，时间显示，加入购物车，金额结算等等，适合有一定基础想要突破瓶颈的同学作为练习使用。
前端开发——淘宝购物列表
gjbss的博客
11-25 2867
淘宝购物列表
HTML+CSS淘宝 页眉导航栏以及Logo搜索框的实现
Tina_dl的博客
05-13 1万+
很久没记录了，现在对淘宝所有部整体实现（虽然还有部分的还没有实现， 我就是偷懒来保存下，可怜的小傻猫，要是崩了，我还又底从新开始，存 在的问题后期慢慢改）小傻猫日常呆 实现的效果如下： 所有的一二级菜单都实现了，但依旧有问题，就是一级导航的小图标有两个的我添加的时候出现了问题，后面东西都写的差不多，我再来看看 还有我的搜索框的实现借用了哪位博友的，太久了，我也忘了（这个不是我的） （郁闷的傻猫...
淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业
mobeiCanyue
01-06 6227
淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业
淘宝首页html+css+js源码
06-03
淘宝首页的HTML+CSS+JS源码是一套用于学习和实战前端开发的资源，它基于2019年06月的淘宝网首页设计，力求还原度高达99%。这个项目不仅包含了基本的HTML结构，还融合了CSS样式表和JavaScript脚本，使得页面动态效果...
html+css+js模仿淘宝搜索商品页面
11-11
纯html+css+js实现，百分之90以上和原网站基本相同
学生作业作品HTML网页前端制作，淘宝商城页面，HTML+css+js
01-18
在本项目中，"学生作业作品HTML网页前端制作，淘宝商城页面，HTML+css+js"，学生通过学习和实践，构建了一个模仿淘宝商城的网页前端。这个项目展示了Web开发中的核心技能，包括HTML（超文本标记语言）、CSS（层叠...
CSS+HTML仿写美团&淘宝网站首页静态页面.zip
12-14
CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站首页静态页面 CSS+HTML仿写美团&淘宝网站...
零基础HTML5+CSS3学习笔记（一）
浪客竹马、的博客
07-28 1363
观看万门大学的免费课程跟着学习的。 参考书目：W3school 配置环境：工具准备：HBuilder，Google Chrome，FireFox，IETester，Opera(挪威公司的浏览器)        安装HBuilder时，将压缩包解压到C盘programe files(x86)，在属性兼容性里选择以管理员身份运行软件，不然在后面会找你要各种权限你没有。这样环境配置就完成了。 先...
超详细实现淘宝静态页面(附全部代码)
x1037490413的博客
09-12 2万+
文章目录一:基本结构与样式 一:基本结构与样式 1.划分结构的顺序是自上而下,从左往右,保证内容在一行内能显示 2.考虑的因素有内容,颜色块,间距
HTML+CSS仿淘宝商城商品栏模块
qq_44829421的博客
03-26 767
HTML+CSS仿淘宝商城商品栏模块
十、HTML中的浮动
weixin_74774974的博客
07-07 3985
【1、浮动】【2、float属性】【3、clear属性】【4、整体布局示例】【5、overflow属性】 【6、局部布局】
css3仿手机版淘宝商品并列显示
Amily_an的博客
04-06 877
并列商品不等高，交错显示 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）
淘宝-静态页面编写（4）--头部搜索/导航栏
蒋宗正的博客
12-19 2285
头部搜索 分块 首先我们观察这部分，可清晰的将它分成三个模块，左边的淘宝网，中间的搜索栏以及右边的二维码。这里我们需想一下怎么把中间的搜索栏放入中间位置，我采用的是先将左右两侧靠边放置并设置浮动，那么中间的搜索栏就会上去，再设置margin：0 auto后就可以将搜索栏居中啦 左边淘宝网 淘宝网这里是一个图片，一般采用以图换字的方法，使页面在设计和可访问性之间达到平衡，并且由于在页面左侧，将其设置为左浮动： <h1 class="fl"><a href="#">淘宝网</a&
HTML .CSS实现商品详情（detail）
qq_67519129的博客
06-15 2万+
HTML .CSS实现商品详情（detail）
淘宝首页HTML+CSS+JS实现教程与代码示例
资源摘要信息:"本教程旨在指导读者使用HTML、CSS和JavaScript技术制作一个简化版的淘宝首页。教程中不仅包含了网页的基本结构编写，还包括了页面样式的美化以及动态交互功能的实现。通过本教程的学习，读者将能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值