BiliBili 阴阳师主题 前端技术展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 设置文档的字符编码为UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度和缩放比例 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 设定IE浏览器使用最新的渲染模式 -->
<title>Document</title> <!-- 网页标题 -->
<link rel="stylesheet" href="css/init.css"> <!-- 引入初始化样式表 -->
<link rel="stylesheet" href="css/header.css"> <!-- 引入头部样式表 -->
<link rel="stylesheet" href="css/main.css"> <!-- 引入主要内容的样式表 -->
<link rel="stylesheet" href="css/footer.css"> <!-- 引入底部样式表 -->
</head>
<body>
<!-- 头部区域 -->
<header>
<!-- 顶部 -->
<div class="header-Top">
<div class="top">
<div class="top-nav">
<!-- 导航栏左 -->
<div class="top-nav-left">
<ul>
<li><i></i><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="#">BW</a></li>
<li><a href="#">70年</a></li>
<li class="lii">
<b></b><a href="#">下载APP</a>
<!-- 目前未实现 TODO qingyun -->
<div class="down-img"></div>
</li>
</ul>
</div>
<!-- 导航栏右 -->
<div class="top-nav-right">
<ul>
<li>
<a href="#"><img src="images/header/qingyun.webp" width=""></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>
<li><a href="#">投稿</a></li>
</ul>
</div>
<!-- logo -->
<div id="header-logon"></div>
<!-- 搜索框 -->
<div id="form">
<div class="search">
<div class="list">
<span>排行榜</span>
</div>
<input type="text" placeholder="我的阴阳师">
<button></button>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- 主体部分 -->
<main>
<!-- 导航 -->
<nav>
<ul class="menu">
<li><a href="#"><span></span><em>首页</em></a></li>
<li><a href="#"><span>999</span><em>动画</em></a></li>
<li><a href="#"><span>999</span><em>番剧</em></a></li>
<li><a href="#"><span>999</span><em>音乐</em></a></li>
<li><a href="#"><span>999</span><em>舞蹈</em></a></li>
<li><a href="#"><span>999</span><em>游戏</em></a></li>
<li><a href="#"><span>999</span><em>科技</em></a></li>
<li><a href="#"><span>999</span><em>生活</em></a></li>
<li><a href="#"><span>999</span><em>鬼畜</em></a></li>
<li><a href="#"><span>999</span><em>时尚</em></a></li>
<li><a href="#"><span>999</span><em>娱乐</em></a></li>
<li><a href="#"><i></i><em>影视</em></a></li>
<li><a href="#"><i></i><em>专栏</em></a></li>
<li><a href="#"><i></i><em>广场</em></a></li>
<li><a href="#"><i></i><em>小黑屋</em></a></li>
<li><a href="#"><img src="images/header/b1a3c53168f30abc889c4d1ab35bdc814ada680b.gif" alt=""></a></li>
</ul>
</nav>
<!-- 轮播图1 -->
<div class="banner-one">
<ul>
<li><img src="images/banner/left/1.webp"></li>
<li><img src="images/banner/left/2.webp"></li>
<li><img src="images/banner/left/3.webp"></li>
<li><img src="images/banner/left/4.webp"></li>
<li><img src="images/banner/left/5.webp"></li>
<a href="#"></a>
<!-- 焦点跟随 -->
<div class="dot">
<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>
</ul>
</div>
</ul>
</div>
<!-- 展示图-->
<div class="banner-two">
<div class