<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: serif;
        }
        .container {
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
            position: relative;
            padding: 0 5%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        nav .logo {
            width: 80px;
        }
        nav {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 8%;
        }
        nav ul li {
            list-style: none;
            display: inline-block;
            margin-left: 40px;
        }
        nav ul li a {
            text-decoration: none;
            color: #fff;
            font-size: 17px;
            /* font-weight: 600; */
        }
        .content {
            text-align: center;
        }
        .content h1 {
            font-size: 120px;
            color: #fff;
            font-weight: 600;
        }
        .content a {
            text-decoration: none;
            display: inline-block;
            color: #fff;
            font-size: 24px;
            border: 2px solid #fff;
            padding: 14px 70px;
            border-radius: 50px;
            margin-top: 20px;
        }
        video {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: -1;
            width: 100%;
            object-fit: fill;
            height: 100%;
        }
        @media(min-aspect-ritio: 16/9) {
            video {
                width: 100%;
                height: auto;
            }
        }
    </style>
</head>
<body>
    <div class=”container”>
        <video src=”1.mp4″ loop autoplay muted></video>
        <nav>
            <img class=”logo” src=”logo.png” alt=””>
            <ul>
                <li><a href=””>首页</a></li>
                <li><a href=””>海滩</a></li>
                <li><a href=””>热门景点</a></li>
                <li><a href=””>联系我们</a></li>
            </ul>
        </nav>
        <div class=”content”>
            <h1>我热爱冷雨</h1>
            <a href=””>探索</a>
        </div>
    </div>
</body>
</html>

发表回复

后才能评论

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源