游戏专题类,web网页模板分享,前端期末作业,静态页面,带轮播图,登录页

index.html
在这里插入图片描述

<html lang="zh" data-hairline="true" data-theme="light">

<head>
	<meta charset="utf-8">
	<title data-react-helmet="true">
		发现
	</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" href="./static/css/style.css">
</head>

<body>
	<div id="root">
		<div>

			<div>

				<header role="banner" class="Sticky bigheader css-1x8hcdw">
					<div class="bigheader-inner css-qqgmyv">
						<img src="./static/images/logo.png" height="80%" alt=""
							srcset="">
						<ul role="tablist" class="Tabs bigheader-Tabs css-g0ay3v">
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="index.html">
									首页
								</a>
							</li>
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="list.html">
									游戏分类
								</a>
								<ul class="erji">
									<li>
										<a href="list.html">国服</a>
									</li>
									<li>
										<a href="list.html">外服</a>
									</li>
								</ul>
							</li>
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="center.html">
									个人中心
								</a>
							</li>
						</ul>
						<div class="css-1acwmmj">
							<div class="SearchBar bigheader-SearchBar css-10fy1q8" role="search">
								<form class="SearchBar-tool">
									<div>
										<div class="Popover">
											<label
												class="SearchBar-input css-11bw1mm Input-wrapper Input-wrapper--grey">
												<input type="text" class="Input" placeholder="这是假的搜索框">
											</label>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div id="dateshow">

						</div>
						<div class="bigheader-userInfo">
							<div class="bigheader-profile">
								<div>
									<button type="button" class="anniu bigheader-login anniu--blue">
										<a href="./login.html">
											登录
										</a>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div>
					</div>
				</header>
			</div>
			<div class="banner">
				<ul class="list" id="banner_list">
					<li style="display:block;">
						<img src="./static/images/b1.webp" alt="">
					</li>
					<li>
						<img src="./static/images/b2.webp" alt="">
					</li>
					<li>
						<img src="./static/images/b3.webp" alt="">
					</li>
					<li>
						<img src="./static/images/b4.webp" alt="">
					</li>
				</ul>
				<ul class="dot_list" id="dot_list">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
				</ul>
			</div>
			<main role="main" class="App-main">
				<div>
					<div class="Sticky">
					</div>
				</div>
				<div class="zhuye">
					<div class="zhuye-neirong zhuye-section" id="special">
						<div class="zhuye-neirong-header">
							
							<span>
								游戏分类
							</span>
						</div>
					</div>
					<div class="zhuye-neirong zhuye-section" id="roundtable">
						<div class="zhuye-neirong-body">
							<div class="zhuye-roundtables">
								<div class="cardbox zhuye-roundtableCard">
									<div class="cardbox-toubu" style="background: url(./static/images/jd.jpg);">

										<div class="cardbox-header">
											<a class="cardbox-title" href="list.html" 
												>
												绝地求生
											</a>
											<a class="cardbox-intro" href="list.html" 	>
												绝地求生》(PUBG),是一款战术竞技游戏,策略与枪法一样重要,充满各种随机性要素,需要你随时做出判断,取得胜利。大吉大利,全民PUBG。
											</a>
											<div class="cardbox-info">
												<div class="cardbox-guests">
													<img src="./static/images/t1.webp"
														alt="">
													<img src="./static/images/t2.webp"
														alt="">
													<img src="./static/images/t3.webp"
														alt="">
													<span>
														4000 位玩家
													</span>
												</div>
												<div class="cardbox-count">
													<span>
														46 人关注
													</span>
												</div>
											</div>
										</div>
										<div class="cardbox-followanniu">
											<button class="ExploreFollowanniu ExploreFollowanniu--colored"
												style="color:rgba(49, 62, 161, 1)">
												进入
											</button>
										</div>
									</div>
									<div class="cardbox-questionList">
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												腾讯安全团队助力“净网行动”,玉田警方连续破获两起线上销售外挂案件
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												全新升级!新版《绝地求生官方APP》上线!
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												PGI全球邀请赛即将来袭 观赛赢纪念套装
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
									</div>
								</div>
								<div class="cardbox zhuye-roundtableCard">
									<div class="cardbox-toubu" style="background: url(./static/images/wz.jpg);">

										<div class="cardbox-header">
											<a class="cardbox-title" href="list.html" 
												>
												王者荣耀
											</a>
											<a class="cardbox-intro" href="list.html" 
												>
												是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,
											</a>
											<div class="cardbox-info">
												<div class="cardbox-guests">
													<img src="./static/images/t1.webp"
														alt="">
													<img src="./static/images/t2.webp"
														alt="">
													<img src="./static/images/t3.webp"
														alt="">
													<span>
														4000 位玩家
													</span>
												</div>
												<div class="cardbox-count">
													<span>
														46 人关注
													</span>
												</div>
											</div>
										</div>
										<div class="cardbox-followanniu">
											<button class="ExploreFollowanniu ExploreFollowanniu--colored"
												style="color:rgba(49, 62, 161, 1)">
												进入
											</button>
										</div>
									</div>
									<div class="cardbox-questionList">
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												【元歌皮肤设计大赛】精彩创意赏析第1期
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												12月14日不停机更新:碎片商店更新!电玩小子、功夫厨神加入兑换~
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												高校区域联赛总决选火热开赛,20支高校战队蓄势待发!
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
									</div>
								</div>
								<div class="cardbox zhuye-roundtableCard">
									<div class="cardbox-toubu"  style="background: url(./static/images/lm.jpg);">

										<div class="cardbox-header">
											<a class="cardbox-title" href="list.html" 
												>
												英雄联盟
											</a>
											<a class="cardbox-intro" href="list.html" 
												>
												海量风格各异的英雄,丰富、便捷的物品合成系统,游戏内置的匹配、排行和竞技系统,独创的“召唤师”系统及技能、符文、天赋等系统组合,必将带你进入一个崭新而又丰富多彩的游戏世...
											</a>
											<div class="cardbox-info">
												<div class="cardbox-guests">
													<img src="./static/images/t1.webp"
														alt="">
													<img src="./static/images/t2.webp"
														alt="">
													<img src="./static/images/t3.webp"
														alt="">
													<span>
														4000 位玩家
													</span>
												</div>
												<div class="cardbox-count">
													<span>
														46 人关注
													</span>
												</div>
											</div>
										</div>
										<div class="cardbox-followanniu">
											<button class="ExploreFollowanniu ExploreFollowanniu--colored"
												style="color:rgba(49, 62, 161, 1)">
												进入
											</button>
										</div>
									</div>
									<div class="cardbox-questionList">
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												《盟牙有礼·第四季》福利来袭!
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												执事系列皮肤与执事通行证即将上线
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												“至臻终章2021”活动即将上线
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
									</div>
								</div>
								<div class="cardbox zhuye-roundtableCard">
									<div class="cardbox-toubu"  style="background: url(./static/images/csgo.jpg);">

										<div class="cardbox-header">
											<a class="cardbox-title" href="list.html" 
												>
												csgo
											</a>
											<a class="cardbox-intro" href="list.html" 
												>
												枪械、地图、道具大变化!全新大行动任务玩法、全新探员、全新枪械皮肤、全新武器箱、全新印花和布章上线!登录国服购买通行证,即刻体验“激流大行动”冲浪快感
											</a>
											<div class="cardbox-info">
												<div class="cardbox-guests">
													<img src="./static/images/t1.webp"
														alt="">
													<img src="./static/images/t2.webp"
														alt="">
													<img src="./static/images/t3.webp"
														alt="">
													<span>
														4000 位玩家
													</span>
												</div>
												<div class="cardbox-count">
													<span>
														46 人关注
													</span>
												</div>
											</div>
										</div>
										<div class="cardbox-followanniu">
											<button class="ExploreFollowanniu ExploreFollowanniu--colored"
												style="color:rgba(49, 62, 161, 1)">
												进入
											</button>
										</div>
									</div>
									<div class="cardbox-questionList">
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												这个舞台足够大!2021极限之地亚洲CS:GO嘉
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												海选收官之战!本周末PNL成都站、高校海选赛
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
										<div class="cardbox-qust_xiangmu">
											<a class="cardbox-qest_biaoti" href="list.html" >
												CSGO完美平台2.0加载完成 11月26日闪耀揭幕
											</a>
											<div class="cardbox-questionCounts">
												<span>
													10 阅读
												</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
	</div>
	<footer class="login_homepage-footer">
		<div class="banquantext">5班  王橘 32020110535</div>
	</footer>
	<!-- 
	漂浮广告
	点击图片可删除
-->
	<div id="codefans_net" style="position:absolute">
		<img width="300" title="点击图片删除" src="./static/images/piaofu.webp" alt="">
	</div>
	<script>
		// 设置banner初始是0
		var index = 0
		function banner() {
			var list = document.getElementById('banner_list').children;
			// 用循环计时器每2秒自动换一张图片
			var interval = setInterval(function () {
				if (index == list.length - 1) {
					index = 0
				} else {
					index = index + 1
				}
				for (i = 0; i < list.length; i++) {
					list[i].style.display = "none"
				}
				list[index].style.display = "block"
			}, 2000)
			var dot_list = document.getElementById('dot_list').children

			// 通过循环给每一个按钮设置鼠标事件
			for (i = 0; i < dot_list.length; i++) {
				dot_list[i].onmouseover = function () {
					// 如果鼠标移入则停止自动轮播
					clearInterval(interval)
				}
				dot_list[i].onmouseout = function () {
					// 如果鼠标移出继续轮播
					banner()
				}
				dot_list[i].onclick = function () {
					// 设置点击按钮切换选项卡
					index = this.innerText - 1
					for (j = 0; j < list.length; j++) {
						list[j].style.display = "none"
					}
					list[index].style.display = "block"
				}
			}
		}
		banner()

		// 悬浮代码
		var x = 50, y = 60
		var xin = true, yin = true
		var step = 1
		// 设置延时
		var delay = 10
		// 获取元素
		var obj = document.getElementById("codefans_net")
		function float() {
			// 这里是计算代码,大概就是计算元素宽高,然后随机移动
			// 当页面总宽-元素长度 等于移动的距离时,说明到头了,开始反向移动
			var L = T = 0
			var R = document.body.clientWidth - obj.offsetWidth
			var B = document.body.clientHeight - obj.offsetHeight
			obj.style.left = x + document.body.scrollLeft
			obj.style.top = y + document.body.scrollTop
			x = x + step * (xin ? 1 : -1)
			if (x < L) { xin = true; x = L }
			if (x > R) { xin = false; x = R }
			y = y + step * (yin ? 1 : -1)
			if (y < T) { yin = true; y = T }
			if (y > B) { yin = false; y = B }
		}
		var itl = setInterval("float()", delay)
		// 鼠标移入清除计时器
		obj.onmouseover = function () { clearInterval(itl) }
		// 鼠标移出打开计时器
		obj.onmouseout = function () { itl = setInterval("float()", delay) }
	</script>
	<script src="./static/js/date.js"></script>
</body>

</html>

center.html
在这里插入图片描述

<html lang="zh" data-hairline="true" data-theme="light"><head>
	<meta charset="utf-8">
	<title data-react-helmet="true">
		个人中心
	</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<link rel="stylesheet" href="././static/css/style.css">
</head>

<body>
	<style>
		img,
		button {
			transition: 1s;
		}

		button:hover,
		img:hover {
			transform: scale(1.2);
		}
	</style>
	<div id="root">
		<div>
			<div class="login_bar">
			</div>
			<div>
				<header role="banner" class="Sticky bigheader css-1x8hcdw">
					<div class="bigheader-inner css-qqgmyv">
						<img src="./static/images/logo.png" height="80%" alt="" srcset="">
						<ul role="tablist" class="Tabs bigheader-Tabs css-g0ay3v">
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="index.html">
									首页
								</a>
							</li>
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="list.html">
									游戏分类
								</a>
								<ul class="erji">
									<li>
										<a href="list.html">国服</a>
									</li>
									<li>
										<a href="list.html">外服</a>
									</li>
								</ul>
							</li>
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="center.html">
									个人中心
								</a>
							</li>
						</ul>
						<div class="css-1acwmmj">
							<div class="SearchBar bigheader-SearchBar css-10fy1q8" role="search">
								<form class="SearchBar-tool">
									<div>
										<div class="Popover">
											<label class="SearchBar-input css-11bw1mm Input-wrapper Input-wrapper--grey">
												<input type="text" class="Input" placeholder="这是假的搜索框">
											</label>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div id="dateshow">2021-12-15 12:10:53</div>
						<div class="bigheader-userInfo">
							<div class="bigheader-profile">
								<div>
									<button type="button" class="anniu bigheader-login anniu--blue">
										<a href="./login.html">
											登录
										</a>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div>
					</div>
				</header>
			</div>
			<main role="main" class="App-main">
				<div itemprop="people" itemtype="http://schema.org/Person" itemscope="">
					<div id="proheader" class="proheader">
						<div class="Card">
							<div class="proheader-userCover">
								<div class="UserCover UserCover--colorBlock">
									<img width="100%" src="./static/images/csgo.webp" alt="" srcset="">
								</div>
							</div>
							<div class="proheader-wrapper">
								<div class="proheader-main">
									<div class="UserAvatar proheader-avatar" style="top:-74px">
										<img class="Avatar Avatar--large UserAvatar-inner" width="160" height="160" src="./static/images/t1.webp" alt="">
									</div>
									<div class="proheader-content">
										<div class="proheader-contentHead">
											<h1 class="proheader-title">
												<span class="proheader-name">
													个人中心
												</span>
												<span class="ztext proheader-headline">
												</span>
											</h1>
										</div>
										<div style="overflow:hidden;transition:height 300ms ease-out" class="proheader-contentBody">
											<div>
												<div class="proheader-info">
												</div>
											</div>
										</div>
										<div class="proheader-contentFooter">
											<div class="anniu proheader-expandanniu anniu--plain">

												姓名:5班 王橘 32020110535<br>
												爱好:篮球,游戏,看书,跑步<br>
												专业:喜欢完绝地求生等fps类游戏

											</div>
											<div class="MemberanniuGroup profileanniuGroup proheader-buttons">
												<button type="button" class="anniu Followanniu anniu--primary anniu--blue">
													<span style="display:inline-flex;align-items:center">
														&ZeroWidthSpace;
													</span>
													关注
												</button>
												<button type="button" class="anniu anniu--grey anniu--withIcon anniu--withLabel">
													发私信
												</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="profile-main">
						<div class="profile-mainColumn">
							<div class="Card profileMain" id="profileMain">
								<div class="ListShortcut">
									<div class="List profileActivities" id="profile-activities">
										<div class="" role="list">
											<div class="List-item">
												<div class="List-itemMeta">
													<div class="ActivityItem-meta">
														<span>
															2021-08-21 00:43
														</span>
													</div>
												</div>
												<div class="neirongkuai ArticleItem">
													<h2 class="neirongkuai-title">
														<a href="#">
															绝地求生闪退怎么办?
														</a>
													</h2>
													<div class="neirongkuai-meta">
														<div class="ArticleItem-extraInfo">
															<span class="Voters">
																<button type="button" class="anniu anniu--plain">
																	8 人 点了赞
																</button>
															</span>
														</div>
													</div>
													<div class="youce is-collapsed">
														<div class="youce-cover">
															<div class="youce-cover-inner">
																<div class="biaotiimg">
																	<img src="./static/images/wt1.png" alt="">
																</div>
															</div>
														</div>
														<div class="youce-inner">
															<span class="haowenzi ztext copywenzi-richText css-hnrfcf">
																绝地求生现在非常热门,很多朋友都从steam购买了这款游戏,但是有不少人说电脑玩绝地求生的时候经常会有闪退出现。其实现在玩游戏不管什么游戏都有可能出现闪退。
															</span>
															<button type="button" class="anniu neirongkuai-more anniu--plain">
																阅读全文
																<span style="display:inline-flex;align-items:center">
																	&ZeroWidthSpace;
																</span>
															</button>
														</div>
													</div>
												</div>
											</div>
											
										<div class="List-item">
												<div class="List-itemMeta">
													<div class="ActivityItem-meta">
														<span>
															2021-08-21 00:43
														</span>
													</div>
												</div>
												<div class="neirongkuai ArticleItem">
													<h2 class="neirongkuai-title">
														<a href="#">
															绝地求生闪退怎么办?
														</a>
													</h2>
													<div class="neirongkuai-meta">
														<div class="ArticleItem-extraInfo">
															<span class="Voters">
																<button type="button" class="anniu anniu--plain">
																	8 人 点了赞
																</button>
															</span>
														</div>
													</div>
													<div class="youce is-collapsed">
														<div class="youce-cover">
															<div class="youce-cover-inner">
																<div class="biaotiimg">
																	<img src="./static/images/wt1.png" alt="">
																</div>
															</div>
														</div>
														<div class="youce-inner">
															<span class="haowenzi ztext copywenzi-richText css-hnrfcf">
																绝地求生现在非常热门,很多朋友都从steam购买了这款游戏,但是有不少人说电脑玩绝地求生的时候经常会有闪退出现。其实现在玩游戏不管什么游戏都有可能出现闪退。
															</span>
															<button type="button" class="anniu neirongkuai-more anniu--plain">
																阅读全文
																<span style="display:inline-flex;align-items:center">
																	&ZeroWidthSpace;
																</span>
															</button>
														</div>
													</div>
												</div>
											</div><div class="List-item">
												<div class="List-itemMeta">
													<div class="ActivityItem-meta">
														<span>
															2021-08-21 00:43
														</span>
													</div>
												</div>
												<div class="neirongkuai ArticleItem">
													<h2 class="neirongkuai-title">
														<a href="#">
															绝地求生总是卡顿怎么办?
														</a>
													</h2>
													<div class="neirongkuai-meta">
														<div class="ArticleItem-extraInfo">
															<span class="Voters">
																<button type="button" class="anniu anniu--plain">
																	8 人 点了赞
																</button>
															</span>
														</div>
													</div>
													<div class="youce is-collapsed">
														<div class="youce-cover">
															<div class="youce-cover-inner">
																<div class="biaotiimg">
																	<img src="./static/images/wt2.jfif" alt="">
																</div>
															</div>
														</div>
														<div class="youce-inner">
															<span class="haowenzi ztext copywenzi-richText css-hnrfcf">
																绝地求生的服务器不是一般的好,在2017年10月份每天晚上9点准时崩溃,非常准时。各种小bug不断,就连正式版1.0上线以后,也是各种毛病不断。特效比绝地求生好的,gta5,战地。一般中等级的显卡都是完美运行。但是绝地求生却不行,1080级的显卡仍然不能全程144.甚至在关键的区域,连60帧都维持不了。
															</span>
															<button type="button" class="anniu neirongkuai-more anniu--plain">
																阅读全文
																<span style="display:inline-flex;align-items:center">
																	&ZeroWidthSpace;
																</span>
															</button>
														</div>
													</div>
												</div>
											</div></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
	</div>
	<footer class="login_homepage-footer">
		<div class="banquantext">
			5班 王橘 32020110535
		</div>
	</footer>
	<script src="./static/js/date.js"></script>


</body></html>

list.html
在这里插入图片描述

<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>文章列表 </title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<link rel="stylesheet" href="./static/css/style.css">
</head>

<body>
	<div id="root">
		<div>
			<div class="login_bar">
			</div>
			<div>
				<header role="banner" class="Sticky bigheader css-1x8hcdw">
					<div class="bigheader-inner css-qqgmyv">
						<img src="./static/images/logo.png" height="80%" alt=""
							srcset="">
						<ul role="tablist" class="Tabs bigheader-Tabs css-g0ay3v">
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="index.html">
									首页
								</a>
							</li>
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="list.html">
									游戏分类
								</a>
								<ul class="erji">
									<li>
										<a href="list.html">国服</a>
									</li>
									<li>
										<a href="list.html">外服</a>
									</li>
								</ul>
							</li>
							<li role="tab" class="xiangmu-qiehuan bigheader-Tab xiangmu-qiehuan--noMeta">
								<a class="Tabs-link bigheader-TabsLink css-1f6tgea" href="center.html">
									个人中心
								</a>
							</li>
						</ul>
						<div class="css-1acwmmj">
							<div class="SearchBar bigheader-SearchBar css-10fy1q8" role="search">
								<form class="SearchBar-tool">
									<div>
										<div class="Popover">
											<label
												class="SearchBar-input css-11bw1mm Input-wrapper Input-wrapper--grey">
												<input type="text" class="Input" placeholder="这是假的搜索框">
											</label>
										</div>
									</div>
								</form>
							</div>
						</div>
						<div id="dateshow">

						</div>
						<div class="bigheader-userInfo">
							<div class="bigheader-profile">
								<div>
									<button type="button" class="anniu bigheader-login anniu--blue">
										<a href="login.html">
											登录
										</a>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div>
					</div>
				</header>
			</div>
			<main role="main" class="App-main">
				<div class="css-1gptc2h">
					<div class="css-1b0ypf8">
						<div class="css-1sqjzsk">
							<div class="css-tr5tvs">
								<img src="./static/images/jd.webp" class="css-1jrxz3i">
							</div>
							<div class="css-1fnir59">
								<div class="css-199kefw">
									<div class="css-jwse5c">
										绝地求生游戏玩法讨论
									</div>
									<div class="css-1jmgfov">
										<div class="Popover">
											<span id="null-toggle" aria-haspopup="true" aria-expanded="false"
												aria-owns="null-content">
											</span>
										</div>
									</div>
								</div>
								<div class="css-1dexld7">
									<span>
										此讨论组已创立3000天
									</span>
								</div>
								<div class="css-1zcaix">
									《绝地求生》(PUBG) 是由蓝洞开发的一款战术竞技型射击类沙盒游戏 。
								</div>
								<div class="css-i2qf64">
									<div class="css-1ip02nd">
										252 万
										<!-- -->
										浏览 ·
										<!-- -->
										383
										<!-- -->
										关注
									</div>
									<!-- <div class="css-1btn8qy">关注圆桌</div> -->
								</div>
							</div>
						</div>
						<div class="Card css-1q7njkh" id="RoundtableMainContent">
							<div>
								<div class="Sticky">
								</div>
							</div>
							<div class="Card">
								<div class="css-idcvuo">
									<ul role="tablist" class="Tabs">
										<li role="tab" class="xiangmu-qiehuan xiangmu-qiehuan--noMeta"
											aria-controls="Roundtable-">
											<a font-weight="bold" class="Tabs-link css-yxaawl"
												href="/roundtable/game2021/">
												正在热议
											</a>
										</li>
										<li role="tab" class="xiangmu-qiehuan xiangmu-qiehuan--noMeta"
											aria-controls="Roundtable-latest-all">
											<a font-weight="normal" class="Tabs-link css-0"
												href="/roundtable/game2021/latest-all">
												最新提问
											</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="css-vurnku">
								<div class="" role="list">
									<div >
										<div class="css-vurnku">
											<h2 class="css-xatp85">
												<a href="#" target="_blank" class="css-4a3k6y">PUBG游戏本体将加入免费游戏公告</a>
											</h2>
											<div class="css-1sc0dxj" style="color:#666;">
												908,443 次浏览 · 189 人参与讨论
											</div>
											<div class="">
												<div class="css-1lg5z35">
													<div class="css-1xuu014">
														<div class="youce is-collapsed">
															<div class="youce-cover">
																<div class="youce-cover-inner">
																	<img src="./static/images/x1.jpg"	alt="cover">
																</div>
															</div>
															<div class="youce-inner">
																<span
																	class="haowenzi ztext copywenzi-richText css-hnrfcf">
																	亲爱的生存者们,大家好,PUBG自首次亮相以来,经历了大大小小的变化。在游戏上线之后,世界各地的玩家体验到了具有真实感的射击游戏所带来的紧张感和快乐,并喜欢上了我们的战术竞技玩法。
																</span>
																<button type="button"
																	class="anniu neirongkuai-more anniu--plain">
																	显示全部
																</button>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>

									<div >
										<div class="css-vurnku">
											<h2 class="css-xatp85">
												<a href="#" target="_blank" class="css-4a3k6y">「2021年度鸡斯卡-斗鱼分会场-最佳人气主播」获奖名单</a>
											</h2>
											<div class="css-1sc0dxj" style="color:#666;">
												908,443 次浏览 · 189 人参与讨论
											</div>
											<div class="">
												<div class="css-1lg5z35">
													<div class="css-1xuu014">
														<div class="youce is-collapsed">
															<div class="youce-cover">
																<div class="youce-cover-inner">
																	<img src="./static/images/x2.jpg"	alt="cover">
																</div>
															</div>
															<div class="youce-inner">
																<span
																	class="haowenzi ztext copywenzi-richText css-hnrfcf">
																	【最佳人气主播奖】

恭喜@仙某某 、@一条小团团OvO 、@陈死狗-cnh 、@左梓轩_Xleft 、@娜子好吃懒做 荣获2021年度鸡斯卡【最佳人气主播奖】
																</span>
																<button type="button"
																	class="anniu neirongkuai-more anniu--plain">
																	显示全部
																</button>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>

									<div >
										<div class="css-vurnku">
											<h2 class="css-xatp85">
												<a href="#" target="_blank" class="css-4a3k6y">C4以及蓝圈手榴弹刷新问题紧急修复公告</a>
											</h2>
											<div class="css-1sc0dxj" style="color:#666;">
												908,443 次浏览 · 189 人参与讨论
											</div>
											<div class="">
												<div class="css-1lg5z35">
													<div class="css-1xuu014">
														<div class="youce is-collapsed">
															<div class="youce-cover">
																<div class="youce-cover-inner">
																	<img src="./static/images/x3.jpeg"	alt="cover">
																</div>
															</div>
															<div class="youce-inner">
																<span	class="haowenzi ztext copywenzi-richText css-hnrfcf">
																	玩家们大家好,我们在北京时间18点22分通过热修复对客户端提高了稳定性。另外在竞技模式的泰戈地图中出现C4以及蓝圈手榴弹刷新的问题,开发团队正在进行紧急修复,请大家耐心等候。由此带来的不便,我们深表歉意! ​​​​
																</span>
																<button type="button"
																	class="anniu neirongkuai-more anniu--plain">
																	显示全部
																</button>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="GlobalSideBar">
						<div>
							<div class="Sticky">
								<div class="css-np3nxw">
									<div class="css-vurnku">
										<div class="css-t3f0zn">
											<div class="css-hd7egx">
												招聘广告
												<span onclick="qiehuan(this)">点击收起</span>
											</div>
											<div class="css-vurnku" id="guanggao">
												<div class="css-1nna83t">
													虎牙tv招收主播,底薪8K
												</div>
												<div class="css-1nna83t">
													斗鱼Tv招收主播,底薪8K
												</div>
												<div class="css-1nna83t">
													TK战队招收玩家,底薪8K
												</div>
												<div class="css-1nna83t">
													EDG战队招收玩家,年薪30W
												</div>
											</div>
											
										</div>
									</div>
								
								</div>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
	</div>
	<footer class="login_homepage-footer">
		<div class="ccbReports">5班  王橘 32020110535</div>
	</footer>
</body>
<script src="./static/js/date.js"></script>
<script >
	var show = true 
	function qiehuan(e){
		console.log(e)
		var guanggao = document.getElementById('guanggao')
		if(show){
			guanggao.style.display='none'
			show=false
			e.innerText="点击展开"

		}else{
			guanggao.style.display='block'
			show=true
			e.innerText="点击收起"
		}
	}
</script>
</html>

login.html
在这里插入图片描述

<!doctype html5>
<head>
	<meta charset="utf-8">
	<title>
		登录
	</title>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<link rel="stylesheet" href="./static/css/style.css">
</head>
<body style="background: url(./static/images/x3.jpeg);background-size: auto 100%;">
	<div id="root">
		<div>
			<div class="login_bar">
			</div>
			<main role="main" class="App-main">
				<div class="login_homepage">
					<div class="login_homepage-content">
						<div class="css-zvnmar">
							<div class="SignContainer-content">
								<div class="SignContainer-inner">
									<div>
										<form class="login_flow Login-content" onsubmit="return checkform()">
											<div class="login_flow-account">
												<div class="login_flowInput login_flow-accountInputContainer">
													<label class="login_flow-accountInput Input-wrapper">
														<input type="tel" value="" name="username" class="Input" required placeholder="账号"
														id="user">
													</label>
												</div>
											</div>
											<div class="login_flow login_flow-smsInputContainer">
												<div class="login_flowInput login_flow-smsInput">
													<label class="Input-wrapper">
														<input type="number" value="" name="digits" class="Input" id="pass" required
														placeholder="密码">
													</label>
													<div class="login_flowInput-errorMask login_flowInput-requiredErrorMask login_flowInput-errorMask--hidden">
													</div>
												</div>
											</div>
											<div class="Login-options">
												<button type="button" class="anniu Login-switchType anniu--plain">
												</button>
												<button type="button" class="anniu Login-cannotLogin anniu--plain" onclick="alert('你的密码是123456')">
													忘记密码
												</button>
											</div>
											<button type="submit" class="anniu login_flow-submitanniu anniu--primary anniu--blue">
												登录
											</button>
										</form>
									</div>
									<div>
										<span style="position:absolute;top:-10000px;left:-10000px" role="log"
										aria-live="assertive">
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<footer class="login_homepage-footer">
						<div class="ccbReports">
							5班  王橘 32020110535
						</div>
					</footer>
				</div>
			</main>
			<div data-zop-usertoken="{}">
			</div>
		</div>
	</div>
	<script>
		function checkform() {
			var user = document.getElementById('user').value
			var pass = document.getElementById('pass').value
			if (user == 'wangju' && pass == '123456') {
				alert("登陆成功");
         location.href = "center.html"
			} else {
				alert("用户名或者密码不对")
			}
			return false
		}
	</script>
</body>

</html>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未脱发程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值