大二web作业精仿王者荣耀(html+css)
发布人：shili8
发布时间：2025-01-30 05:22
阅读次数：0
**王者荣耀网页版**
### 前言作为一个大二的学生，完成Web开发的作业是非常重要的一步。为了让自己更好地掌握HTML和CSS的知识，我决定仿照王者荣耀的界面来设计一款网页游戏。下面就是我的作品。
### HTML结构首先，我们需要定义HTML的结构。我们会使用HTML5来创建一个基本的页面框架。
html<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>王者荣耀</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 头部区域 --> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">英雄列表</a></li> <li><a href="#">排行榜</a></li> </ul> </nav> </header> <!-- 主体区域 --> <main> <!-- 英雄列表区域 --> <section class="hero-list"> <h2>英雄列表</h2> <ul> <!-- 英雄卡片区域 --> <li class="hero-card"> <img src="images/laning.png" alt="兰陵王"> <p>兰陵王</p> </li> <li class="hero-card"> <img src="images/fengxian.png" alt="冯胤"> <p>冯胤</p> </li> <!-- ... --> </ul> </section> <!-- 排行榜区域 --> <section class="ranking-list"> <h2>排行榜</h2> <ol> <!-- 排行榜条目区域 --> <li> <p>兰陵王</p> <p>1000分</p> </li> <li> <p>冯胤</p> <p>800分</p> </li> <!-- ... --> </ol> </section> </main> <!-- 脚部区域 --> <footer> <p>©2023 王者荣耀</p> </footer> <script src="script.js"></script> </body> </html>
### CSS样式接下来，我们需要定义CSS样式来美化我们的页面。
css/* 基础样式 */
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin:0;
padding:0;
}
header {
background-color: #333;
color: #fff;
padding:1em;
text-align: center;
}
nav ul {
list-style: none;
margin:0;
padding:0;
}
nav li {
display: inline-block;
margin-right:20px;
}
nav a {
color: #fff;
text-decoration: none;
}
/* 英雄列表样式 */
.hero-list {
background-color: #f7f7f7;
padding:1em;
}
.hero-card {
background-color: #fff;
border:1px solid #ddd;
margin-bottom:20px;
padding:10px;
}
.hero-card img {
width:100%;
height:150px;
object-fit: cover;
}
/* 排行榜样式 */
.ranking-list {
background-color: #f7f7f7;
padding:1em;
}
.ranking-list ol {
list-style: none;
margin:0;
padding:0;
}
.ranking-list li {
display: block;
margin-bottom:20px;
}
/* 脚部样式 */
footer {
background-color: #333;
color: #fff;
padding:1em;
text-align: center;
}
### JavaScript脚本最后，我们需要定义JavaScript脚本来实现页面的交互逻辑。
javascript// 获取元素const heroList = document.querySelector('.hero-list');
const rankingList = document.querySelector('.ranking-list');
// 英雄列表事件监听heroList.addEventListener('click', (e) => {
if (e.target.classList.contains('hero-card')) {
const heroCard = e.target;
const heroName = heroCard.querySelector('p').textContent;
console.log(`点击了英雄${heroName}`);
}
});
// 排行榜事件监听rankingList.addEventListener('click', (e) => {
if (e.target.classList.contains('ranking-list')) {
const rankingItem = e.target;
const rankingName = rankingItem.querySelector('p').textContent;
console.log(`点击了排行榜${rankingName}`);
}
});
### 总结以上就是我仿照王者荣耀的界面来设计的一款网页游戏。通过这次项目，我更好地掌握了HTML和CSS的知识，并且实现了一些基本的JavaScript交互逻辑。希望这个项目能给大家带来一些帮助和启发！
粤公网安备 44011102002787号