菜单 搜索
首页 前端知识 HTML.CSS静态 画江湖之不良人 网页（开源）

HTML.CSS静态 画江湖之不良人 网页（开源）

2024-06-17 09:06:57 前端知识 前端哥 513 744 我要收藏

前言：

网页是用HTML.CSS纯手写的，包括首页轮播的背景图也没有用到JS，参考B站大佬视频【CSS】轮播图效果，网页的创意抄袭B站这位UP的视频大学生不良人主题的网页设计。刷到过他的视频，感觉他的创意很好，就自己也手写了一个，功能没有他的那么多，就更精致了一点。源码网盘链接在文章最后，想要的同学可以自取。

目录

前言：

01-项目目录

02-头部导航栏

03-首页轮播背景图

04-剧情概要

05-主要人物

06-相关视频

07-底部背景

08-404丢失网页

09-网格壁纸网页

源码：

01-项目目录

原神

  • audio 文件夹：存放网页需要的视频和音乐
  • css 文件夹：存放 CSS 文件（link 标签引入）
  • iconfont文件：存放了一些常用的阿里巴巴图标库
  • images 文件夹：存放固定使用的图片素材
  • images_visual 文件夹：存放visual网页固定使用的图片素材
  • index.html ：首页 HTML 文件
  • bitbug_favicon.ico：网页图标
  • index.html：首页网页
  • lost.html：丢失的404网页
  • visual.html：视觉盛宴网页，网格背景布局

引入样式表：

<link rel="shortcut icon" href="bitbug_favicon.ico">
<link rel="stylesheet" href="css/index.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css'>
<link rel="stylesheet" href="iconfont/iconfont.css">

基础样式清除：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
div,
span,
a,
ul,
li,
p,
img,
input,
form,
label,
h4 {
    margin: 0;
    padding: 0;
    
}

.body {
    min-width: 1200px;
    font-size: 14px;
    background-color: #161616;
    margin: 0 auto;
    display: block;
    font-family: "Microsoft YaHei";

}

.ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

li {
    display: list-item;
}

ul li {
    list-style: none;
}

a {
    outline: none;
    /* 去除a标签的下划线 */
    text-decoration-line: none;
}

img {
    /* 溢出元素裁剪 */
    overflow: clip;
}

img,
input {
    border: none;
    border: 0;
    vertical-align: top;
}

div {
    display: block;
}

02-头部导航栏

 HTML文件：

<div class="navigation_bar">
        <div class="navbar">
            <ul class="nav_content">
                <li class="lis">
                    <a class="more" href="#">
                        <p>官方首页</p>
                        <p class="eng">HOME</p>
                    </a>
                </li>
                <li class="lis">
                    <a href="lost.html">
                        <p>音乐欣赏</p>
                        <p class="eng">MUSIC</p>
                    </a>
                </li>
                <li class="lis">
                    <a href="lost.html">
                        <p>动漫资讯</p>
                        <p class="eng">CONSULT</p>
                    </a>
                </li>
                <li class="lis">
                    <a href="lost.html">
                        <p>江湖百科</p>
                        <p class="eng">BAIKE</p>
                    </a>
                </li>
                <li class="lis" style="width: 216px;margin-top: 13px;">
                    <a href="#">
                        <img src="image/logo.png">
                    </a>
                </li>
                <li class="lis">
                    <a href="visual.html" target="_blank">
                        <p>视觉盛宴</p>
                        <p class="eng">VISUAL</p>
                    </a>
                </li>
                <li class="lis">
                    <a href="lost.html">
                        <p>论坛</p>
                        <p class="eng">BBS</p>
                    </a>
                </li>
                <li class="lis">
                    <a href="lost.html">
                        <p>官方商城</p>
                        <p class="eng">MALL</p>
                    </a>
                </li>
                <li class="lis">
                    <a href="lost.html">
                        <p>游戏攻略</p>
                        <p class="eng">GAME</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

CSS文件：

.navigation_bar {
    position: fixed;
    width: 100%;
    height: 82px;
    line-height: 20px;
    background: url(../image/nav_bg.png) center top no-repeat;
    margin: 0 auto;
    z-index: 999;
}

.navbar {
    height: 80px;
    width: 1200px;
    margin: 0 auto;
}

.nav_content {
    height: 80px;
    width: 1146px;
    margin: 0 auto;
    display: block;
    position: relative;
}

.nav_content .lis {
    width: 116px;
    float: left;
    cursor: pointer;
    height: 70px;
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
    position: relative;
}

.nav_content .lis a {
    display: block;
    text-align: center;
    width: 130px;
    float: left;
    text-decoration: none;
    height: 20px;
    cursor: pointer;
    color: #d3d3d4;
    font-family: "微软雅黑";
    font-size: 16px;
}

.nav_content .lis p {
    line-height: 25px;
}

.nav_content .lis .eng {
    font-size: 10px;
    font-family: "Regular";
    color: #7d7d7d;
}

.nav_content .lis a:hover,
.nav_content li .more {
    color: #cda152;
}

03-首页轮播背景图

 HTML文件：

<div class="bgimg">
    <ul class="slides">
        <input type="radio" id="control-1" name="control" checked>
        <input type="radio" id="control-2" name="control">
        <input type="radio" id="control-3" name="control">
        <input type="radio" id="control-4" name="control">
        <input type="radio" id="control-5" name="control">

        <!--  箭头按钮  -->
        <div class="navigator slide-1">
            <label for="control-5">
                <i class="fas fa-chevron-left"></i>
            </label>
            <label for="control-2">
                <i class="fas fa-chevron-right"></i>
            </label>
        </div>

        <div class="navigator slide-2">
            <label for="control-1">
                <i class="fas fa-chevron-left"></i>
            </label>
            <label for="control-3">
                <i class="fas fa-chevron-right"></i>
            </label>
        </div>

        <div class="navigator slide-3">
            <label for="control-2">
                <i class="fas fa-chevron-left"></i>
            </label>
            <label for="control-4">
                <i class="fas fa-chevron-right"></i>
            </label>
        </div>

        <div class="navigator slide-4">
            <label for="control-3">
                <i class="fas fa-chevron-left"></i>
            </label>
            <label for="control-5">
                <i class="fas fa-chevron-right"></i>
            </label>
        </div>

        <div class="navigator slide-5">
            <label for="control-4">
                <i class="fas fa-chevron-left"></i>
            </label>
            <label for="control-1">
                <i class="fas fa-chevron-right"></i>
            </label>
        </div>

        <!-- 底部圆点按钮 -->
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>

        <div class="controls-visible">
            <label for="control-1"></label>
            <label for="control-2"></label>
            <label for="control-3"></label>
            <label for="control-4"></label>
            <label for="control-5"></label>
        </div>
    </ul>
</div>

CSS文件：

.bgimg {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

ul.slides {
    position: relative;
    width: 100%;
    height: 640px;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: pink;
    overflow: hidden;
}

li.slide {
    margin: 0;
    padding: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Helvetica;
    font-size: 120px;
    color: #fff;
    transition: .5s transform ease-in-out;
}

.slide:nth-of-type(1) {
    background-image: url(../image/bgimg/bg1.jpg);
    background-size: cover;
    background-position: center;

}

.slide:nth-of-type(2) {
    background-image: url(../image/bgimg/bg2.jpg);
    background-size: cover;
    background-position: center;
    left: 100%;
}

.slide:nth-of-type(3) {
    background-image: url(../image/bgimg/bg3.jpg);
    background-size: cover;
    background-position: center;
    left: 200%;
}

.slide:nth-of-type(4) {
    background-image: url(../image/bgimg/bg4.jpg);
    background-size: cover;
    background-position: center;
    left: 300%;
}

.slide:nth-of-type(5) {
    background-image: url(../image/bgimg/bg5.jpg);
    background-size: cover;
    background-position: center;
    left: 400%;
}

input[type="radio"] {
    position: relative;
    z-index: 100;
    display: none;
}

.controls-visible {
    position: absolute;
    width: 100%;
    bottom: 30px;
    text-align: center;
}

.controls-visible label {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 5px;
    border: 2px solid #fff;
    opacity: 0.8;
}

.slides input[type="radio"]:nth-of-type(1):checked~.controls-visible label:nth-of-type(1) {
    background-color: #333;
}

.slides input[type="radio"]:nth-of-type(2):checked~.controls-visible label:nth-of-type(2) {
    background-color: #333;
}

.slides input[type="radio"]:nth-of-type(3):checked~.controls-visible label:nth-of-type(3) {
    background-color: #333;
}

.slides input[type="radio"]:nth-of-type(4):checked~.controls-visible label:nth-of-type(4) {
    background-color: #333;
}

.slides input[type="radio"]:nth-of-type(5):checked~.controls-visible label:nth-of-type(5) {
    background-color: #333;
}

.slides input[type="radio"]:nth-of-type(1):checked~.slide {
    transform: translatex(0%);
}

.slides input[type="radio"]:nth-of-type(2):checked~.slide {
    transform: translatex(-100%);
}

.slides input[type="radio"]:nth-of-type(3):checked~.slide {
    transform: translatex(-200%);
}

.slides input[type="radio"]:nth-of-type(4):checked~.slide {
    transform: translatex(-300%);
}

.slides input[type="radio"]:nth-of-type(5):checked~.slide {
    transform: translatex(-400%);
}

.navigator {
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    width: 100%;
    z-index: 100;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    display: none;
}

.navigator i {
    font-size: 32px;
    color: #fff;
    opacity: 0.8;
}

.slides input[type="radio"]:nth-of-type(1):checked~.navigator:nth-of-type(1) {
    display: flex;
}

.slides input[type="radio"]:nth-of-type(2):checked~.navigator:nth-of-type(2) {
    display: flex;
}

.slides input[type="radio"]:nth-of-type(3):checked~.navigator:nth-of-type(3) {
    display: flex;
}

.slides input[type="radio"]:nth-of-type(4):checked~.navigator:nth-of-type(4) {
    display: flex;
}

.slides input[type="radio"]:nth-of-type(5):checked~.navigator:nth-of-type(5) {
    display: flex;
}

04-剧情概要

 HTML文件：

<div class="introduction">
    <div class="title">
        <h3>剧 情 概 要</h3>
    </div>
    <div class="plot_content">
        <div class="video_box" style="margin-left: 5px;">
            <video controls>
                <source src="audio/op.mp4" type="video/mp4">
            </video>
        </div>
        <div class="content">
            <p>
                唐朝末年，天下大乱，藩镇割据，群雄并起。
                据说黄巢叛军攻陷长安之前，官府中的神秘组织不良人，曾经执行过最后一次任务，然后便消失不见了，几乎与他们同时消失的，还有叛军搜遍长安也未曾找到的国库宝藏，自此以后，江湖上便传出一条谣言，在传说中的龙泉剑上，隐藏着一个天大的秘密。
                直到有一天，一个名叫李星云的神秘孤儿，机缘巧合下被隐士阳叔子所救，并拜在其门下学武，数年之后，李星云与师妹陆林轩下山历练，途中结识了姬如雪和张子凡两个好友，后来又偶然得到了传说中的龙泉剑。
                这样一来，李星云和龙泉剑引起了包括玄冥教、通文馆、幻音坊和天师府等诸多门派的觊觎，他们动着各种各样的心思，或巧取豪夺，或通缉追杀，各种手段招数无所不用其极，甚至连消失已久的不良人也有重出江湖的迹象。
                李星云这个身世成谜的少年，就这样和他的朋友们周旋于险恶的江湖之中，为了求得一条生存之道而努力挣扎着。
            </p>
        </div>
    </div>
</div>

CSS文件：

.introduction {
    position: relative;
    background: url(../image/main_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 600px;
    margin: 0 auto;
}

.title {
    margin: 0 auto;
    padding-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #fff;
}

.plot_content {
    margin: 0 auto;
    padding-top: 75px;
    padding-left: 35px;
    padding-right: 20px;
    height: 450px;
    width: 1200px;
    display: flex;
    justify-content: space-between;
    background: url(../image/plot_bg.png) no-repeat;
}

.video_box {
    width: 618px;
    height: 351px;
    border: 5px solid rgb(121, 25, 25);
    position: relative;
    overflow: hidden;
}

.video_box video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.plot_content .content {
    width: 500px;
    height: 300px;
    padding: 20px;
}

05-主要人物

HTML文件：

<div class="playerlist">
    <!-- 标题 -->
    <div class="player_title">
        <div class="left">
            <h3>相关视频</h3>
            <p>一天是不良人，一辈子都是</p>
        </div>
        <div class="right">
            <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
        </div>
    </div>
    <!-- 内容 -->
    <div class="cartoon_box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第六季.jpg">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第六季</h4>
                                <p>不良人恭迎新大帅！</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>1334114</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第五季.jpg" alt="">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第五季</h4>
                                <p>天子这唱的是哪一出啊？</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>467034</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第四季.jpg" alt="">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第四季</h4>
                                <p>万毒窟，永垂不朽！</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>622075</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第三季.jpg">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第三季</h4>
                                <p>大帅舍身开局，再现《出师表》</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>607823</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

CSS文件：

.character {
    position: relative;
    background: url(../image/main_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 850px;
    margin: 0 auto;
}

.protagonist {
    margin: 60px auto;
    width: 90%;
    height: 620px;
    display: flex;
}

.box{
    flex: 1;
    overflow: hidden;
    transition: .5s;
    margin: 0 20px;
    box-shadow: 10px 10px 20px rgba(143, 135, 135, 0.5);
    border-radius: 20px;
    background-color: rgba(45, 38, 38, 0.2);
}

.box>img{
    width: 200%;
    height: 85%;
    object-fit: cover;
    top: 0;
    position: center;
    transition: .5s;
}

.box>span{
    font: 200 45px '宋体';
    text-align: center;
    height: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.box:hover{
    flex-basis: 40%;
}

.box:hover>img{
    width: 100%;
    height: 100%;
}

06-相关视频

<div class="playerlist">
    <!-- 标题 -->
    <div class="player_title">
        <div class="left">
            <h3>相关视频</h3>
            <p>一天是不良人，一辈子都是</p>
        </div>
        <div class="right">
            <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
        </div>
    </div>
    <!-- 内容 -->
    <div class="cartoon_box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第六季.jpg">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第六季</h4>
                                <p>不良人恭迎新大帅！</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>1334114</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第五季.jpg" alt="">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第五季</h4>
                                <p>天子这唱的是哪一出啊？</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>467034</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第四季.jpg" alt="">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第四季</h4>
                                <p>万毒窟，永垂不朽！</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>622075</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="image/season/第三季.jpg">
                        <!-- 定位区域 -->
                        <div class="cover">
                            <div class="cover_txt">
                                <h4>画江湖之不良人 第三季</h4>
                                <p>大帅舍身开局，再现《出师表》</p>
                            </div>
                        </div>
                    </div>
                    <div class="txt">
                        <div class="left">
                            <p>
                                <i class="iconfont icon-favorites-fill"></i>
                                <span>1314</span>
                            </p>
                            <p>
                                <i class="iconfont icon-browse"></i>
                                <span>607823</span>
                            </p>
                        </div>
                        <div class="right">
                            <p>
                                <i class="iconfont icon-comment"></i>
                                <span>520</span>
                            </p>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>

07-底部背景

 HTML文件：

<div class="footer">
    <div class="footer_logo">
        <img src="image/footer_logo.png">
    </div>
    <div class="footer_txt">
        <div>Copyright &copy2023 Powered by 若森数字 AII Rights Reserved</div>
        <div>关于我们 | 联系我们 | 招聘信息 | 建议反馈</div>
        <div>网络文化经营许可证：文网文【2020】0646-107号 京ICP证130404号 游戏商务合作</div>
        <div>地址：北京市海淀区北三环中路31号4号路东半部 5层511室 联系电话：01082918870</div>
        <div>北京若森数字科技有限公司</div>
    </div>
</div>

CSS文件：

.footer {
    display: flex;
    width: 100%;
    height: 210px;
    background-color: #272727;
    margin: 0 auto;
    padding: 30px 250px;
}

.footer_logo {
    margin-right: 40px;
}

.footer_logo img{
    width: 190px;
    height: 150px;
}

.footer_txt {
    font-family: "宋体";
    font-size: 15px;
    color: #ababab;
    text-align: center;
}

.footer_txt div {
    display: block;
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
    padding-left: 5px;
}

08-404丢失网页

 网页代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>无法访问此网站</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            .lost_video {
                width: 100%;
                height: 400px;
                margin: 20px auto;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .notfound h1 {
                margin: 0 auto;
                font-size: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .lost_txt,
            .lost_chage {
                margin: 30px auto;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>

    <body>
        <div class="lost_video">
            <img src="image/雪儿哭泣.gif" alt="404">
        </div>
        <div class="notfound">
            <h1>404</h1>
        </div>
        <div class="lost_txt">
            <p>网页丢失了，深感抱歉，希望您能原谅我。</p>
        </div>
        <div class="lost_chage">
            <h3>点击 <a href="index.html">返回首页</a></h3>
        </div>
    </body>

</html>

09-网格壁纸网页

 网页代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>视觉盛宴</title>
        <link rel="shortcut icon" href="bitbug_favicon.ico">
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(image/main_bg.jpg);
            background-size: cover;
        }

        .shell {
            /* 先设置网格布局 */
            display: grid;
            padding: 20px;
            /* 定义网格布局中行与列之间间隙的尺寸 */
            grid-gap: 20px;
            /* 该属性规定网格布局中的列数和宽度 */
            grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
            /* 设置网格中行的默认尺寸 */
            grid-auto-rows: 270px;
            /* 属性控制自动放置项目在网格中的插入方式为填充 */
            grid-auto-flow: dense;
        }

        .shell>div {
            background-color: rgb(51, 51, 51);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            background-size: 100%;
        }

        .shell span {
            color: #fff;
            font: 100 100px 'Kristen ITC';
            position: absolute;
            top: -10px;
            left: 20px;
            /* 给文字加个阴影 */
            text-shadow: -5px 0 rgb(0, 0, 0), 0 -5px rgb(0, 0, 0),5px 0 rgb(0, 0, 0);
        }

        .shell .wide {
            grid-column: span 2;
        }

        .shell .tall {
            grid-row: span 2;
        }

        .shell .big {
            grid-column: span 2;
            grid-row: span 2;
        }

        img {
            background-size: cover; 
            background-position: center;
        }
    </style>
    <body>
        <audio id="music" src="audio/花腰带.mp3" autoplay="autoplay" loop="loop">浏览器不支持</audio>
        <div class="shell">
            <div class="tall"><span>1</span><img src="img_visual/1.png"></div>
            <div><span>2</span><img src="img_visual/2.png"></div>
            <div><span>3</span><img src="img_visual/3.png"></div>
            <div class="wide"><span>4</span><img src="img_visual/4.png"></div>
            <div><span>5</span><img src="img_visual/5.png"></div>
            <div class="tall"><span>6</span><img src="img_visual/6.png"></div>
            <div class="big"><span>7</span><img src="img_visual/7.png"></div>
            <div><span>8</span><img src="img_visual/8.png"></div>
            <div class="wide"><span>9</span><img src="img_visual/9.png"></div>
            <div class="big"><span>10</span><img src="img_visual/10.png"></div>
            <div class="tall"><span>11</span><img src="img_visual/11.png"></div>
            <div><span>12</span><img src="img_visual/12.png"></div>
            <div><span>13</span><img src="img_visual/13.png"></div>
            <div><span>14</span><img src="img_visual/14.png"></div>
            <div><span>15</span><img src="img_visual/15.png"></div>
            <div class="wide"><span>16</span><img src="img_visual/16.png"></div>
            <div><span>17</span><img src="img_visual/17.png"></div>
            <div><span>18</span><img src="img_visual/18.png"></div>
            <div class="wide"><span>19</span><img src="img_visual/19.png"></div>
            <div><span>20</span><img src="img_visual/20.png"></div>
            <div class="wide"><span>21</span><img src="img_visual/21.png"></div>
            <div class="big"><span>22</span><img src="img_visual/22.png"></div>
            <div><span>23</span><img src="img_visual/23.png"></div>
            <div><span>24</span><img src="img_visual/24.png"></div>
            <div class="big"><span>25</span><img src="img_visual/25.png"></div>
            <div class="tall"><span>26</span><img src="img_visual/26.png"></div>
            <div><span>27</span><img src="img_visual/27.png"></div>
            <div><span>28</span><img src="img_visual/28.png"></div>
            <div><span>29</span><img src="img_visual/29.png"></div>
        </div>
    </body>
    <script type="text/javascript">
        function togglesound() {
            var music = document.getElementById("music");//获取ID
            console.log(music);
            console.log(music.paused);
            if (music.paused) { //判读是否播放
                music.paused = false;
                music.play(); //没有就播放
            }
        }
        setInterval("togglesound()", 1);
    </script>

</html>

源码：

链接：https://pan.baidu.com/s/1xTptoGa0OkRaqWF3TgWhnw?pwd=7ab5 
提取码：7ab5

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12471.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

如果不想35岁被淘汰这篇文章必看，web前端开发基础教程之HTML5页面结构基础，web快速开发框架

2024-06-22 10:06:47

HTML制作开心网游戏静态页面

2024-06-22 10:06:35

HTML5 新增元素

2024-06-22 10:06:20

【前端】HTML5基础

2024-06-22 10:06:36

HTML5：Canvas 标签，腾讯前端面试题社招

2024-06-22 10:06:27

HTML简单学习记录，程序员深度学习

2024-06-22 10:06:10

简单的学生网页作业源码 基于HTML的环境网站设计 HTML CSS环保网站项目实现 带设计说明psd

2024-06-22 10:06:05

html/javascript-表格的创建和使用

2024-06-22 10:06:05

HTML CSS 连载 | 62 - 分页实现

2024-06-22 10:06:49

依赖html破解cloudflare-turnstile

2024-06-22 10:06:46

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！