js.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/style.css"
</head>
<body>
<div class="logo">
<img src="C:\Users\赵书婷\Desktop\html\img\QQ图片20230627230424.jpg"width="100px" height="100px"/>
<h4>EggyParty</h4>
<p>撞走不开心,结交好碰友</p>
</div>
<div class="nav">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">详情简介</a>
</li>
<li>
<a href="">蛋仔赛季</a>
</li>
<li>
<a href="">注册</a>
</li>
<li>
<a href="">登录</a>
</li>
</ul>
</div>
<div class="banner">
<img src="C:\Users\赵书婷\Desktop\html\img\QQ图片20230627173940.jpg" />
</div>
<div class="about">
<h3>详情介绍</h3>
<p>蛋仔派对2023最新版是网易首款潮玩休闲竞技手游,不的不说这款游戏在目前看来还是非常不错的。首先就是在玩法耐玩性方面,蛋仔派对和其他闯关派对类产品相比更加强调玩家间的对抗和合作,所以在关卡中增加了可以让蛋仔利用的道具系统,为了强化道具和关卡的关联性,道具可以分为进攻类、生存类、加速类等多种类型,不同的道具用途各不相同,与关卡产生有趣的化学反应。此外,最后决战关的体验还经过了策划大大们重点打磨和设计的,创新性得加入了蛋仔体重值和决战技系统——当蛋仔受到攻击后会损失体重而会变得更轻,更容易被击飞,但只要不跌落平台就还有翻盘的机会,不得不说这一点为决战带来了十分刺激的心流体验。目前游戏中一局能够支持32位玩家进行同屏竞技,在同场对局比赛中有四小关,四个关卡又分为三种赛制,分别是:生存赛 竞速赛 淘汰赛 这三种比赛形式,玩家在躲避关卡中的障碍物时也要防备其他玩家是否使用道具对自己进行干扰或者攻击。总的来说这款游戏玩起来的乐趣还是非常不错的,有想要加入的小伙伴们赶紧来下载吧!</p>
</div>
<div class="about">
<h3>视频介绍</h3>
<div class="video">
<video src="C:\Users\赵书婷\Desktop\html\img\QQ视频20230627192628.mp4"muted controls></video>
</div>
</div>
</body>
</html>
css格式设置
*{
margin: 0;
padding: 0;
}
.logo{
width:100%;
text-align: center;
margin: 20px 0 50px 0;
}
.logo h4{
cursor: pointer;
font-size: 35px;
letter-spacing: 2px;
margin-top: 20px;
margin-bottom: 2px;
}
.logo h4:hover{
color: cyan;
}
.logo p{
font-size: 16px;
margin-top: 20px;
}
.nav{
width: 100%;
height: 60px;
line-height: 60px;
border-top: 1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC ;
}
.nav ul{
display: flex;
justify-content: center;
padding: 20px 0;
}
.nav ul li{
list-style: none;
margin: 0 20px;
}
.nav ul li a{
color: #333;
text-decoration: none;
}
.logo ul li a:hover{
color: cyan;
}
.banner{
width: 70%;
margin: 20px auto;
}
.banner img{
width: 100%;
}
.about{
width: 820px;
margin: auto;
}
.about h3{
display: flex;
align-items: center;
color: cyan;
font-size: 24px;
}
.about h3::before{
content: '';
display: inline-block;
width: 5px;
height: 25px;
margin-right: 10px;
background: rgb(20, 230, 230);
}
.about p{
line-height: 1.8;
margin: 20px 0;
text-indent: 2em;
}