前端HTML+CSS写原神官网

最新推荐文章于 2024-08-15 18:19:19 发布

Xingxing？！

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量406

点赞数 17

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_65798038/article/details/140084595

版权

网页效果，视频为动态

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/index.css">
    <link rel="stylesheet" href="./CSS/reset.css">
</head>
<style>
</style>
<body>
    <video loopm muted autoplay src="./bg.3e78e808.mp4"></video>
    <div class="container">
        <div class="header">
            <div class="header-left">
                <a href="">
                    <img class="music" src="./img/音乐.png" alt="">
                    <img class="logo" src="./img/原神.png" alt="">
                </a>
            </div>
            <div class="header-left-1">
                <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>
                    <li><a href="">社区</a></li>
                    <li><a href="">赛事</a></li>
                </ul>
            </div>
            <div class="header-main">
                <a href="">
                    <span>成长关爱系统</span>
                    <img src="./img/成长关爱.png" alt="">
                </a>
                <a href="">
                    <span>登录</span>
                    <img src="./img/用户.png" alt="">
                </a>
            </div>
        </div>
        <div class="main"></div>
        <div class="footer"></div>
    </div>
</body>
</html>