第二次作业

逆风包摆烂

已于 2024-06-12 17:34:54 修改

阅读量1.4k

点赞数 22

文章标签： javascript 前端 css

于 2024-06-12 17:26:03 首次发布

本文链接：https://blog.youkuaiyun.com/2301_82279639/article/details/139632128

版权

作业一

题目：

代码：

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

box-sizing:border-box;

}

.container{

height: 60px;

width: 900px;

margin: 0 auto;

background-color: grey;

border-radius: 10%;

}

ul{

height: 100%;

width: 100%;

}

ul li{

height: 100%;

width: 100px;

list-style: none;

background-color: navy;

float: left;

text-align: center;

line-height: 60px;

color: white;

font-weight: 500;

}

ul li:hover{

background-color: red;

cursor:pointer;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

运行结果截图：

题目二：完成一个网站

代码：

<!DOCTYPE html>

<head>

<title>英雄联盟网站</title>

<style>

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

background-color: #f8f8f8;

}

header {

background-color: #2c3e50; /* 深蓝色 */

color: #fff;

padding: 20px;

text-align: center;

}

nav {

background-color: #34495e; /* 深灰色 */

color: #fff;

padding: 10px;

text-align: center;

}

nav a {

color: #fff;

text-decoration: none;

padding: 10px;

margin: 0 5px;

}

nav a:hover {

background-color: #2c3e50; /* 深蓝色 */

}

section {

padding: 20px;

}

footer {

background-color: #2c3e50; /* 深蓝色 */

color: #fff;

text-align: center;

padding: 10px;

position: fixed;

bottom: 0;

width: 100%;

}

img {

max-width: 100%;

height: auto;

}

</style>

</head>

<body>

<h1>欢迎来到英雄联盟网站</h1>

</header>

<nav>

</nav>

<p>这里会显示最新的英雄联盟游戏资讯。</p>

<p>近期更新包括新英雄发布、游戏赛事动态和版本更新内容。</p>

</section>

<p>这里会提供关于游戏战术和策略的指南。</p>

<p>了解如何选择英雄、制定有效的游戏策略以及在比赛中取得胜利。</p>

</section>

<p>在这里，玩家可以分享经验、交流想法，并找到新的队友。</p>

<p>加入数百万玩家的社区，一起探讨游戏技巧、分享游戏心得，并组建属于你的游戏团队。</p>

</section>

<p>英雄联盟是一个多人在线竞技游戏，玩家将控制一位称为英雄的角色，与其他玩家组成队伍进行对抗。</p>

<p>游戏设定在一个名为符文大陆的幻想世界，玩家可以选择不同的英雄角色，每个角色都有独特的技能和特点。</p>

<p>符文大陆是一个神秘而古老的世界，拥有丰富的历史和传说，吸引着无数冒险者前来探索。</p>

</section>

<p>英雄联盟拥有数百位英雄角色供玩家选择，每个英雄都有自己的故事和背景。</p>

<p>英雄们来自不同的种族和文化，拥有各自独特的技能和战斗风格，玩家可以根据自己的喜好选择适合自己的英雄。</p>

</section>

<p>英雄联盟是一款团队合作的游戏，玩家需要与队友合作，制定战术并协调行动，才能取得胜利。</p>

<p>游戏分为多种模式，包括经典模式、大乱斗模式等，玩家可以根据自己的喜好选择不同的游戏模式进行游戏。</p>

</section>

<p>英雄联盟拥有多张地图供玩家游玩，每张地图都有不同的设计和规则。</p>

<p>地图包括召唤师峡谷、水晶之痕、嚎哭深渊等，玩家可以根据自己的喜好选择不同的地图进行游戏。</p>

</section>

</footer>

</body>

</html>

运行结果截图：

登入页面代码:

<!DOCTYPE html>

<head>

<title>英雄联盟登入</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

flex-direction: column;

}

.container {

background-color: #fff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

width: 300px;

display: flex;

flex-direction: column;

align-items: center;

}

.login-form {

display: flex;

flex-direction: column;

width: 100%;

}

.form-group {

margin-bottom: 10px;

width: 100%;

}

label {

font-weight: bold;

}

input[type="text"], input[type="password"] {

padding: 8px;

font-size: 16px;

border: 1px solid #ccc;

border-radius: 4px;

width: calc(100% - 18px);

}

button {

padding: 10px;

font-size: 16px;

background-color: #4CAF50;

color: white;

border: none;

cursor: pointer;

border-radius: 4px;

width: 100%;

}

button:hover {

background-color: #45a049;

}

.hero-logo {

width: 150px; /* adjust the size as needed */

margin-bottom: 20px;

}

h1 {

color: #4CAF50;

}

</style>

</head>

<body>

<h1>英雄联盟登入</h1>

</div>

</div>

</form>

</div>

</body>

</html>

结果展示