【王者荣耀】周边商城首页-HTML+CSS

听潮阁

已于 2024-08-16 19:13:55 修改

阅读量192

点赞数 1

分类专栏： web前端文章标签： css 前端 javascript

于 2024-08-16 19:09:26 首次发布

本文链接：https://blog.csdn.net/yueyehuguang/article/details/141267410

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果展示：

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>王者荣耀周边商城</title>
		
		<style>
			*{
				/* 去掉网页周边的空白区域 */
				margin:0; 
			}
			#top{
				width:100%;
				height:100px;
				background-color: #0E0E0F;
				position: relative;
			}
			
			#top img{
				vertical-align: middle;
				
			}
			
			#top img:nth-child(1){
				margin-left:300px;
				margin-top:8px;
				
				/* position: absolute;
				left:300px;
				top:20px; */
			}
			
			#top img:nth-child(2){
				margin-left:30px;
				margin-top:8px;
				
			}
			input::-webkit-input-placeholder { /* WebKit browsers */ 
					color: red; 
			}
			/* 设置输入框的样式 */
			#search{
				width:300px;
				height:40px;
				border: 1px solid #0E0E0F;
				border-radius: 20px;
				background-color: #242424;
				text-align: center;
				margin-left: 200px;
				margin-top:30px;
				
				text-emphasis-color: red;
				
			}
			
			.top_a div{
				width:120px;
				height:40px;
				display: inline-block;
				color:white;
				font-family: '宋体';
				border-radius: 20px;
				/* border: 1px solid red; */
				text-align: center;
				line-height: 40px;
				margin-left:50px;
			}
			
			#login{
				background-color: red;
			}
			
			#cart{
				background-color:green;
			}
			.top_a{
				/* 屏蔽掉超链接下面的横线 */
				text-decoration: none;
			}
			
			#login:hover{
				background-color: aqua;
				color:black;
			}
			
			
			#menu{
				width:100%;
				height:80px;
				background: #0E0E0F;
				border-top: 1px solid dimgray;
				text-align: center;
			}
			
			#menu div{
				display: inline-block;
				width:200px;
				height:75px;
				
				color:#F0F0F0;
				text-align: center;
				line-height:75px ;
			}
			
			/* 导航栏鼠标悬停事件 */
			#menu div:hover{
				/* 添加底框 */
				border-bottom: 5px solid goldenrod;
				/* 渐变色 */
				background-image:linear-gradient(to top,goldenrod,#0E0E0F,goldenrod) ;
			}
			
			/* 设置内容页的样式 */
			#content{
				width:1280px;
				height: 900px;
				background-color: #FEFEFE;
			
				border-radius: 20px;
				/* div 居中的另一种方式
				 */
				position: relative;
				margin:auto;
				left:0;
				right:0;
				/*向上偏移*/
				top: -40px;
				
			}
			
			.con_div{
				width:1180px;
				height:200px;
				
				margin: 0 auto;
				
				
			}
			
			
			.con_div h2{
				display: inline-block;
				margin-top:50px;
				margin-bottom: 20px;
				margin-right: 30px;
			}
			
			
			.god{
				display: inline-block;
				width:270px;
				height:380px;
				border: 1px solid lightgray;
				margin-right: 19px;
				text-align: center;
			}
			
			.god p{
				margin-top: 20px;
			}
			
			.god img{
				width: 270px;
			}
			
			.div_god{
				position: relative;
				left:10px;
				top:20px;
			}
			
			.price{
				color:red;
			}
			
			.god:hover{
				/* 放大 */
				transform: scale(1.05);
				/* 添加阴影
				 box-shadow: 水平偏移  垂直偏移   阴影模糊半径  阴影颜色
				 */
				box-shadow: 5px 10px 10px gray;
				
				
			}
			
			
		</style>
	</head>
	<body bgcolor="#F4F4F4">
		
		<!-- 头部开始 -->
		<div id="top">
			
			<img src="img/ico-comm5.png">
			<img src="img/wzlogo.png">
			
			<input type="text" placeholder="请输入要查询的宝贝" id="search" />
			
			
			<a href="#" class="top_a">
				<div id="login">
					用户登录
				</div>
				
			</a>
			
			<a href="#" class="top_a">
				<div id="cart">
					购物车
				</div>
				
			</a>
			
		</div>
		<!-- 头部结束 -->
		
		
		<!-- 导航开始 -->
		<div id="menu">
			<div>首页</div>
			<div>精品热销</div>
			<div>精品手办</div>
			<div>数码3C</div>
			<div>服装服饰</div>
			<div>毛绒抱枕</div>
		</div>
		
		<!-- 导航结束 -->
		
		<!-- banner图开始 -->
		<div id="banner">
			
			<img  src="img/20200423100010_916590.webp" width="100%"/>
		</div>
		<!-- banner图结束 -->
		
		
		<!-- 内容开始 -->
		<div id="content">
			<!-- 生活周边开始 -->
			<div class="con_div">
				<h2>生活周边</h2>
				<span>游戏时做你贴心的陪伴</span>
				
				<div>
					<img src="img/20200423100332_831077.webp" width="100%">
				</div>
				<!-- 显示商品的大div -->
				<div class="div_god">
					<!-- 单个商品 -->
					<div class="god">
						<img src="img/20220414183730_22719.webp">
						<p>
							奇遇舞章艾琳木制八音盒
						</p>
						<p class="price">
							￥139
						</p>
					</div>
					
					<!-- 单个商品 -->
					<div class="god">
						<img src="img/20200819152237_41267.webp">
						<p>
							鲁班七号可动毛绒公仔
						</p>
						<p class="price">
							￥59.9
						</p>
					</div>
					
					
					<!-- 单个商品 -->
					<div class="god">
						<img src="img/20210420175047_25506.webp">
						<p>
							峡谷春日系列帆布包
						</p>
						<p class="price">
							￥78
						</p>
					</div>
					
					
					<!-- 单个商品 -->
					<div class="god" >
						<img src="img/20220208101812_40094.webp">
						<p>
							虎年限定纪念钥匙扣-套装
						</p>
						<p class="price">
							￥128
						</p>
					</div>
					
				</div>
				
			</div>
			<!-- 生活周边结束 -->
	
			
		</div>
		<!-- 内容结束 -->
		
	</body>
</html>

源码链接：

链接：https://pan.baidu.com/s/10tbiF-k8FE_IlBPB6HTy6A?pwd=j743

提取码：j743

给个不要钱的三连吧：关注+点赞+收藏 O(∩_∩)O