如何在HTML上设计电商列表及页面区域

aa一万里的晴空

已于 2023-03-29 14:47:04 修改

阅读量778

点赞数 1

文章标签： html css 前端

于 2023-03-29 11:03:40 首次发布

本文链接：https://blog.csdn.net/weixin_70462793/article/details/129832363

版权

效果

1.仿淘宝

2.西瓜视频登录页面

3.小米商城页面部分区域

1.仿淘宝

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.goods{
				width: 222px;
				height: 400px;
				/* border: 1px solid #f40; */
				position: relative;
			}
			img{
				width: 222px;
			}
			
			.price{
				margin-left: 5px;
				margin-right: 5px;
			}
			.price>span{
				line-height: 20px;
				vertical-align: middle;
			}
			.price>span:first-child{
				color: #f40;
				font-size: 20px;
				font-weight: bold;
			}
			.price>span:nth-child(2){
				font-size: 12px;
				background-color: #f40;
				color: white;
				padding-left: 1px;
				padding-right: 1px;
			}
			.price>span:last-child{
				float:right;
				font-size: 12px;
				color: #888;
			}
			#des{
				margin-left: 5px;
				margin-right: 5px;
			}
			#des>a{
				color: #444;
				font-size: 14px;
				text-decoration: none;
			}
			#des>a:hover{
				text-decoration: underline;
				color: #f40;
			}
			.same>div{
				float: left;
				width: 111px;
				text-align: center;
				background-color: #f40;
				color: white;
			}
			.same>div:last-child{
				/*  */
				border-left: 1px solid white;
				width: 110px;
			}
			.same{
				bottom: 0px;
				/* 绝对定位 */
				position: absolute;
				/* 子标签的顶边和父标签的顶边的距离 */
			/* 	top: 303px; */
				height: 25px;
				/* 隐藏 */
				display: none;
			}
			
			/* 隐藏标签 */
			.head:hover>.same{
				display: block;
				
			}
			
			.head{
				position: relative;
				 }
			/* :last-child 选择所有p元素的最后一个子元素 */
			#des>a:last-child{
				color: #f40;
			}
			#des>div>img{
				width: 39px;
				height: 46px;
				
			}
			#des>div>img:hover{
				text-decoration: underline;
				color: #f40;
				border: 1px solid #f40;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="goods">
				<div class="head">
					<img src="https://img.alicdn.com/imgextra/i3
					/131076872/O1CN01ScC1xk20dQVZggpdd_!!0-saturn_solar
					.jpg_468x468q75.jpg_.webp" alt="">
					<div class="same">
						<div>找相同</div>
						<div>找相似</div>
					</div>
				</div>
				
			<div  class="price">
				<span>￥199.0</span>
				<span>包邮</span>
				<span>1亿+人付款</span>
			</div>
			<div id="des">
				<a href="#">2023春夏季浅色破洞九分牛仔裤男士宽松直筒哈伦裤潮牌休闲裤子男</a><br>
				<a href="#">时尚破洞，修身显瘦，破洞不漏洞里面有垫布</a>
				<div id="picture">
					<img src="../图片/天猫小图标.png" alt="" title="天猫">
					<img src="../图片/淘宝小图标.png" alt="" title="淘宝">
				</div>
			</div>
			</div>
		</div>
	</body>
</html>

效果：

2.西瓜视频登录页面

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
				
		</title>
		<style>
		.des{
			height: 30px;
			background-color: orangered;
			padding: 16px;
			}
			
			.des{
				opacity: 1
			}
			
			.des:hover{
				opacity: 0.5
			}
			
			.des>a{
				color: white;
			}
			
			.content>a:hover{
				text-decoration: underline;
				color: red;
			}
			
			#clock:hover{
				text-decoration: underline;
				color: blue;
			}
			
			#bottom-picture>img{
				width: 39px;
				height: 46px;
			}
			
			#bottom-picture>img:hover{
				text-decoration: underline;
				color: #f40;
				border: 1px solid white;
			}
		</style>
	</head>
	<body>
		<table border="0" cellspacing=0 cellpadding=0 width=800 height="">
			<tr>
				<td><h1 style="display:inline" width="10">登录</h1></td>
				<td align="right">X</td>
			</tr>
		</table>
			<br>
			<hr>
			<br>
			<br>
			<form action="#" method="get">
		<table border="0" cellspacing=0 cellpadding=0 width="800">
			<tr>
				<td >密码登录</td>
				<td ></td>
				<td ></td>
				<td align="center" width="450">扫码登录</td>
			</tr>
			
			<tr>
				<td bgcolor="#ddd" align="left" width="76">
					<select name="型号" id="">
					<option>+86</option>
					<option>+87</option>
					<option>+88</option>
				</td>
				<td bgcolor="#ddd" align="left" width="177">
					<input type="text" name="cell-phone number" require placeholder="请输入手机名" >
				</td>
				<td bgcolor="#ddd"></td>
			</tr>
			
			<tr>
				
				<td bgcolor="#ddd"  colspan="2">
						<input align="left" type="text" name="password" require placeholder="请输入密码" >	
				</td>
				<td bgcolor="#ddd" align="left" class="content">
					<a>忘记密码</a>
				</td>
				<td rowspan="4" align="center">
					<img src="../图片/二维码.jpg">
				</td>
			</tr>
			
			<tr>
				<td width="90" colspan="3">
					<input type="checkbox" name="记住密码">记住密码
				</td>
				
			</tr>
			
			<tr>
				<td colspan="3" align="center">
					<div class="des">
						<a>登录</a>
					</div>
				</td>
			</tr>
			
			<tr>
				<td colspan="3" >
					<div id="bottom-picture">
						<a >其他方式：</a>
						<img src="../图片/抖音小图标.jpg">
						<img src="../图片/qq小图片.jpg">
						<img src="../图片/微信小图片.jpg">
						<a id="clock">手机验证码登录</a>
					</div>
					
				</td>
				
			</tr>
			<tr>
				<td colspan="4" align="center">
					<input type="checkbox" name="登录显示" >登录即代表你同意用户协议和隐私政策
				</td>
			</tr>
		</table>
		</form>
		
	</body>
</html>

效果：

3.小米商城页面部分区域

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			
			.banner_content{
				width:1500px;
				height: 1600px;
				float: left;
				
				/* border: 1px solid red; */
			}
			
			.parent{
				width: 310px;
				height: 210px;
				float: left;
				background-color: #5f5750;
				/* border: 1px solid red; */
			}
			
			.child{
				width: 100px;
				height: 100px;
				float: left;
				text-align: center;
				color: white;
				border-left: 1px solid #aaa;
				border-top: 1px solid #aaa;
				opacity: 0.5;/*调透明度*/
			}
			
			.child:hover{
				opacity: 1;
			}
			
			img{
				display: block;
				margin: auto;
				margin-top: 20px;
			}
			
			.picture{
				width: 350px;
				height: 240px;
				float: left;
				/* border: 1px solid red; */
			}
			
			.picture>img{
				width: 350px;
				height: 200px;
			}
			
			ul{
				list-style:none;/*去掉无序列表标符*/
			}
			
			.picture_bottom{
				float: left;
			}
			
			li:hover{
				 background-color: white;
				 color: white;
				box-shadow: 2px 2px 2px rgba(0,0,0,0.5),
				-2px -2px 2px rgba(0,0,0,0.5);
				text-shadow: 2px 2px 1px rgba(255, 0, 0, 0.5); 
			}
			
			li{
				margin: 3px;
				
			}
		</style>
	</head>
	<body>
		<div class="banner_content">
			<div class="parent">
			
			<div class="child">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
				/82abdba456e8caaea5848a0cddce03db.png?w=48&amp;h=48" alt="保障服务">
				保障服务
			</div>
			
			<div class="child">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
				/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&amp;h=48" alt="企业团购">
				企业团购
			</div>
			
			<div class="child">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
				/eded6fa3b897a058163e2485532c4f10.png?w=48&amp;h=48" alt="F码通道">
				F码通道
			</div>
			
			<div class="child">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
				/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&amp;h=48" alt="米粉卡">
				米粉卡
			</div>
			
			<div class="child">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
				/f4846bca6010a0deb9f85464409862af.png?w=48&amp;h=48" alt="以旧换新">
				以旧换新
			</div>
			
			<div class="child">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
				/9a76d7636b08e0988efb4fc384ae497b.png?w=48&amp;h=48" alt="话费充值">
				话费充值
			</div>
		</div>
				
			<div class="pictures">
				<ul>
					
					<li class="picture">
						<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/
			0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&amp;h=340" alt="">
					</li>
					
					<li class="picture">
						<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
			/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&amp;h=340" alt="">
					</li>
					
					<li class="picture">
						<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall
			/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&amp;h=340" alt="">
					</li>
					
				</ul>
			</div>
			
			<div class="picture_bottom">
				<img alt="test" width="1226" height="120" data-src="//cdn.cnbj1.fds.api.mi-img.com/
				mi-mall/0e9ef2e2599559a625a07becb510fe31.jpg?thumb=1&amp;w=1533&amp;h=150&amp;
				f=webp&amp;q=90" src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/0e9ef2e2599559a625a07becb510fe31.jpg?
				thumb=1&amp;w=1533&amp;h=150&amp;f=webp&amp;q=90" lazy="loaded">
			</div>
				
			</div>
			
				
		
				
			
			<!-- <br>
			<br> -->
	</body>
</html>

效果：