游戏单页

青年的故事 0

好久没搞前端,做几个页面复习下[aru_22]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}

			body{
				background-color: #f3f0ed;
			}
			
			li{
				list-style: none;/*去除li前面的点*/
			}			
			.header-wrap{
				
				width: 100%;
				min-width: 1180px;
				
				position: fixed;/*固定定位*/
				top: 0px;/*固定上边0px*/
				z-index: 999;/*下拉时内容可以进入固定定位中*/
				
			}
			.header-top{
				width: 100%;
				min-width: 1180px;
				background-color: #2a2a2d;
				
			}
			.header-content{
				
				width: 1180px;
				margin: 0 auto;
				height: 70px;
				
			}
			.search{
				
				width: 285px;
				padding: 15px 0;
				margin: 0 auto;
				
			}
			.search-wrap{
				width: 285px;
				height: 40px;
				border-radius: 20px;
				background-color: white;
			}
			.search-keyword{
				width: 190px;
				height: 20px;
				border: 0; /*1px solid red*/
				padding: 10px;
				box-sizing: content-box;
				margin-left: 20px;
				float: left;
			}
			.search-submit{
				width: 50px;
				height: 40px;
				border-radius: 0 20px 20px 0;
				border: 0;
				margin-left: 5px;
				background: url("http://www.gametanzi.com/tpl/gametanzi/Public/images/tips_tz.png") no-repeat -190px -64px;
				background-color: #ffdc35;
				
			}
			.header-submit{
				width: 100%;
				height: 60px;
				min-width: 1180px;
				background-color: #fff;
			}
			.header-submit-wrap{
				width: 1180px;
				margin: 0 auto;
			}
			.header-submit-list>li{
				float: left;
				margin: 15px;
				font: 18px/30px;
			}
			.header-submit-list>li>a{
				text-decoration: none;/*去除下划线*/
				color: black;
			}
			.header-submit-list>li>a:hover{
				color: red;
			}
			.clear-fix::after{
				content:"";
				display: block;
				height: 0;
				clear: both;
			}
			.gift_wrap{
				width: 1180px;
				margin: 0 auto;/*上下为0 左右居中*/
				
			}
			.gift_ad{
				width: 100%;
				margin-top: 10px;
				
			}
			.gift-content{
				width: 1140px;
				background-color: white;
				padding: 0 20px;
			}
			.gift-location{
				height: 34px;
				line-height: 34px;
				font-size: 14px;
				
			}
			.gift-location>a{
				color: #a6a6a6;
				text-decoration: none;/*无下划线*/
			}
			.gift-location>a:hover{
				color: red;
				text-decoration: underline;/*鼠标经过有下划线*/
			}
			.gift-filter{
				font-size: 14px;
				color: #000;
				
			}
			.gift-filter-count{
				border-bottom: 1px solid #e5e5e5;
			}
			.gift-filter-count .s1{
				font-size: 18px;
				display: inline-block;
				height: 40px;
				line-height: 40px;
				border-bottom: 1px solid red;
				margin-right: 20px;
			}			
			.gift-filter-count .s2{
				color: red;
			}	
			.gift-filter-category{
				margin-top: 13px;
			}		
			.gift-filter-category li{
				border-bottom: 1px dashed #e5e5e5;
				display: flex;
				flex-direction: row;
				height: 35px;
				line-height: 35px;
				
			}
			.category-wrap{
				margin-left: 30px;
			}
			.category-wrap a{
				display: inline-block;
				height: 24px;
				line-height: 24px;
				border: 1px solid #e5e5e5;
				padding: 0 15px;
				margin-right: 30px;
				text-decoration: none;
				color: #000;
			}
			.category-wrap a:hover{
				background-color: red;
				color: white;
			}	
			.category-wrap .focus>a{
				background-color: #000;
				color: white;
			}	
			.chanel{
				margin-top: 22px;
				
			}
			.chanel-list{
				border: 1px solid #e5e5e5;
				height: 40px;
			}
			.chanel-list .top{
				float:left;
				border-right: 1px solid #e5e5e5;
			}
			.chanel-list .update{
				float:left;
				border-right: 1px solid #e5e5e5;
			}
			.chanel-list .count{
				float:right;
				border-left: 1px solid #e5e5e5;
			}
			.chanel-list li>a{
				display: inline-block;
				padding: 0 20px;
				height: 40px;
				line-height: 40px;
				text-decoration: none;
				color: #000;
			}
			.chanel-list li>a:hover{
				background-color: red;
				color: #fff;
			}
			.game_list_wrap{
				font-size: 14px;
				color: #bfbfbf;
			}
			.game_list{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
			.game{
				width: 570px;
				padding: 45px 0;
				display: flex;
				flex-direction: row;
				border-bottom: 1px solid #bfbfbf;
				
			}
			.game_img img{
				height: 120px;
				width: 120px;
				border-radius: 15px;
				
			}
			.game_info{
				padding-left: 20px;
			}
			.game_name{
				color: #000;
				font-size: 18px;
				font-weight: bold;
				padding-right: 10px; 
			}
			.game_info p{
				height: 30px;
				line-height: 30px;
			}
			.game_info p:first-child{/*game_info中第一个P标签*/
				color: #000;
			}
			.game_info p:nth-child(2) span{/*game_info中第二个P标签中的span标签*/
				color: #000;
			}
			.game_info p:last-child a{/*game_info中最后一个P标签中的span标签*/
				display: inline-block;
				width: 85px;
				height: 30px;
				border: 1px solid #e5e5e5;
				
				font-size: 14px;
				color: #bfbfbf;
				text-decoration: none;
				
				text-indent: 24px;
				
			}			
			.zq{
				background: url("http://www.gametanzi.com/tpl/gametanzi/Public/images/tips_tz.png") no-repeat -15px -9px;
			}
			.lb{
				background: url("http://www.gametanzi.com/tpl/gametanzi/Public/images/tips_tz.png") no-repeat -15px -43px;
			}
			.lt{
				background: url("http://www.gametanzi.com/tpl/gametanzi/Public/images/tips_tz.png") no-repeat -15px -80px;
			}
			.xz{
				background: url("http://www.gametanzi.com/tpl/gametanzi/Public/images/tips_tz.png") no-repeat -15px -123px;
			}
			.pager_list{
				padding: 40px 0;
				display: flex;/*盒子模型*/
				flex-direction: row;
				justify-content: center;/*居中*/
				
			}
			.pager_list a{
				display: inline-block;
				height: 30px;
				line-height: 30px;
				padding: 0 15px;
				text-decoration: none;
				border: 1px solid #bfbfbf;
				margin-right: 3px;
				color: #000;
				
			}
			.pager_list a:hover{
				background-color: red;
				color: #fff;
			}						
									
		</style>
		
	</head>
	<body>
		<header class="header-wrap">
			<div class="header-top">
				<div class="header-content">
					<div class="search">
						<form action="" method="get">
							<div class="search-wrap">
								<input type="search" class="search-keyword">
								<button type="submit" class="search-submit">
							</div>	
						</form>
					</div>
				</div>
			</div>
			
			<nav class="header-submit">
				<div class="header-submit-wrap">
					<ul class="header-submit-list clear-fix">
						<li class="menuItem"><a href="#">首页</a></li>
						<li class="menuItem"><a href="#">游戏中心</a></li>
						<li class="menuItem"><a href="#">游戏礼包</a></li>
						<li class="menuItem"><a href="#">游戏开测</a></li>
						<li class="menuItem"><a href="#">论坛新闻</a></li>
						<li class="menuItem"><a href="#">坛友论坛</a></li>
						<li class="menuItem"><a href="#">坛友新闻</a></li>
					</ul>
				</div>
			</nav>
		</header>
		<div class="gift_wrap">
			<div class="gift_ad">
				<img src="http://pic.616pic.com/bg_w1180/00/20/12/QZwxUA5BlK.jpg" alt="游戏单页" width="1180px" height="400px"  alt="">
			</div>
			<div class="gift-content">
				<div class="gift-location">
					您的位置:<a href="#">首页</a> &gt; <a href="#">游戏礼包</a>
				</div>
				<div class="gift-filter">
					<div class="gift-filter-count">
						<span class="s1">分类筛选</span><span>共计<span class="s2">761</span>个礼包,本周新增<span class="s2">69</span>款</span>
					</div>
					
					<div class="gift-filter-category">
						<ul>
							<li>
								<span>联网类型</span>
								<div class="category-wrap">
									<span class="focus"><a href="#">全部</a></span>
									<span><a href="#">网游</a></span>
									<span><a href="#">单机</a></span>
								</div>
							</li>
							<li>
								<span>游戏类型</span>
								<div class="category-wrap">
									<span class="focus"><a href="#">全部</a></span>
									<span><a href="#">角色</a></span>
									<span><a href="#">策略</a></span>
									<span><a href="#">休闲</a></span>
								</div>
							</li>
							<li>
								<span>游戏特征</span>
								<div class="category-wrap">
									<span class="focus"><a href="#">全部</a></span>
									<span><a href="#">魔幻</a></span>
									<span><a href="#">仙侠</a></span>
									<span><a href="#">武侠</a></span>
								</div>
							</li>
							<li>
								<span>音序</span>
								<div class="category-wrap">
									<span><a href="#">全部</a></span>
									<span class="focus"><a href="#">A</a></span>
									<span><a href="#">B</a></span>
									<span><a href="#">C</a></span>
									<span><a href="#">D</a></span>
								</div>
							</li>
						</ul>
						
					</div>
					
				</div>
				
				<div class="chanel"> 
					<ul class="chanel-list clear-fix">
						<li class="top"><a href="#">人气最高</a></li>
						<li class="update"><a href="#">经济更新</a></li>
						<li class="count"><a href="#">共用18888条</a></li>
					</ul>
				</div>
				
				<div class="game_list_wrap">
					<ul class="game_list">
						<li class="game">
							<div class="game_img">
								<img src="http://www.gametanzi.com/data/upload/5e7f25cf935cc.png" alt="游戏单页">
							</div>
							<div class="game_info">
								<p><span class="game_name">暗黑黎明</span>暗黑是南二号单来看你打了看你</p>
								<p>类型:<span>角色 魔幻 </span>状态:<span>公测 </span>更新时间:<span>2022-01-01</span></p>
								<p>简介:兵临城下一战触发</p>
								<p>
									<span><a class="zq" href="#">游戏专区</a></span>
									<span><a class="lb" href="#">领取礼包</a></span>
									<span><a class="lt" href="#">进入论坛</a></span>
									<span><a class="xz" href="#">点击下载</a></span>
								</p>
							</div>
						</li>
						<li class="game">
							<div class="game_img">
								<img src="http://www.gametanzi.com/data/upload/5e7f25cf935cc.png" alt="游戏单页">
							</div>
							<div class="game_info">
								<p><span class="game_name">跑跑卡丁车</span>跑跑卡丁车是一款韩国开发由中国区世纪天成</p>
								<p>类型:<span>竞技 赛车 </span>状态:<span>开放 </span>更新时间:<span>2008-01-01</span></p>
								<p>简介:经典游戏</p>
								<p>
									<span><a class="zq" href="#">游戏专区</a></span>
									<span><a class="lb" href="#">领取礼包</a></span>
									<span><a class="lt" href="#">进入论坛</a></span>
									<span><a class="xz" href="#">点击下载</a></span>
								</p>
							</div>
						</li>
						<li class="game">
							<div class="game_img">
								<img src="http://www.gametanzi.com/data/upload/5e7f25cf935cc.png" alt="游戏单页">
							</div>
							<div class="game_info">
								<p><span class="game_name">我的坦克我的团</span>局座”张召忠也在玩的坦克手游,上线送</p>
								<p>类型:<span> 角色 战争 </span>状态:<span>公测 </span>更新时间:<span>2022-01-01</span></p>
								<p>简介:“局座”张召忠也在玩的坦克手游,上线送虎王!</p>
								<p>
									<span><a class="zq" href="#">游戏专区</a></span>
									<span><a class="lb" href="#">领取礼包</a></span>
									<span><a class="lt" href="#">进入论坛</a></span>
									<span><a class="xz" href="#">点击下载</a></span>
								</p>
							</div>
						</li>
						<li class="game">
							<div class="game_img">
								<img src="http://www.gametanzi.com/data/upload/5e7f25cf935cc.png" alt="游戏单页">
							</div>
							<div class="game_info">
								<p><span class="game_name">一刀传世</span>一刀传世是一款集MMO</p>
								<p>类型:<span>竞技 </span>状态:<span>开放 </span>更新时间:<span>2008-01-01</span></p>
								<p>简介:一刀传世是一款集MMO与RPG为一体的全新传奇手游</p>
								<p>
									<span><a class="zq" href="#">游戏专区</a></span>
									<span><a class="lb" href="#">领取礼包</a></span>
									<span><a class="lt" href="#">进入论坛</a></span>
									<span><a class="xz" href="#">点击下载</a></span>
								</p>
							</div>
						</li>
						<li class="game">
							<div class="game_img">
								<img src="http://www.gametanzi.com/data/upload/5e7f25cf935cc.png" alt="游戏单页">
							</div>
							<div class="game_info">
								<p><span class="game_name">我的坦克我的团</span>局座”张召忠也在玩的坦克手游,上线送</p>
								<p>类型:<span> 角色 战争 </span>状态:<span>公测 </span>更新时间:<span>2022-01-01</span></p>
								<p>简介:“局座”张召忠也在玩的坦克手游,上线送虎王!</p>
								<p>
									<span><a class="zq" href="#">游戏专区</a></span>
									<span><a class="lb" href="#">领取礼包</a></span>
									<span><a class="lt" href="#">进入论坛</a></span>
									<span><a class="xz" href="#">点击下载</a></span>
								</p>
							</div>
						</li>
						<li class="game">
							<div class="game_img">
								<img src="http://www.gametanzi.com/data/upload/5e7f25cf935cc.png" alt="游戏单页">
							</div>
							<div class="game_info">
								<p><span class="game_name">一刀传世</span>一刀传世是一款集MMO</p>
								<p>类型:<span>竞技 </span>状态:<span>开放 </span>更新时间:<span>2008-01-01</span></p>
								<p>简介:一刀传世是一款集MMO与RPG为一体的全新传奇手游</p>
								<p>
									<span><a class="zq" href="#">游戏专区</a></span>
									<span><a class="lb" href="#">领取礼包</a></span>
									<span><a class="lt" href="#">进入论坛</a></span>
									<span><a class="xz" href="#">点击下载</a></span>
								</p>
							</div>
						</li>								
					</ul>
				</div>
				
				<div class="pager_list">
					<a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a>
					<a href="#">5</a><a href="#">6</a><a href="#">下一页</a><a href="#">..305</a>
				</div>
				
			</div>

		</div>
		
		
	</body>
</html>

发表评论 取消回复
表情 图片 链接 代码

分享