利用 HTML + CSS 肝了个游戏网站！

最新推荐文章于 2023-08-17 10:38:21 发布

扣叮侠

最新推荐文章于 2023-08-17 10:38:21 发布

阅读量2.1k

点赞数 11

分类专栏：前端文章标签： html 前端 css 网页实战程序设计

本文链接：https://blog.csdn.net/weixin_44617968/article/details/117825445

版权

本文介绍了一位作者如何通过HTML和CSS为初学者制作一个简单的游戏静态网站，分享了核心代码，适合学习实战。无难度，全站基于静态网页技术。

摘要由CSDN通过智能技术生成

最近有几个读者私信我说，期末有个大作业要实现一个静态网站，肝了几百行代码，手把手带你实现一个游戏静态网站。

先上两张效果图

在这里插入图片描述

这个网站适合初学者练手
技术点： html + css
难度系数：无

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>《风暴英雄》官方网站_暴雪出品 明星汇聚 MOBA竞技新篇章</title>
    <!--
    1.几乎所有的网站的快捷图标(收藏图标)都叫做favicon.ico
    2.快捷图标(收藏图标)必须要放到站点文件夹的根目录中
    3.通过link标签引入快捷图标(收藏图标)
    -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!--
    reset.css: 很暴力的清除系统默认设置的样式
    normalize.css: 会保留系统默认设置的有价值的样式, 并且修复了很多浏览器的BUG
    -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
    <h1><a href="#"><img src="images/logo.png" alt=""></a></h1>
    <ul>
        <li><a href="#">进入官网</a></li>
        <li><a href="#">注册账号</a></li>
        <li><a href="#">游戏特色</a></li>
        <li><a href="#">游戏下载</a></li>
    </ul>
</div>
<div class="main">
    <div class="slogan">
        <img src="images/slogan.png" alt="">
    </div>
    <ul class="list">
        <li>
            <h3>颠覆传统 MOBA 2.0</h3>
            <a href="#">
                <img src="images/eye1.jpg" alt