用html制作模仿哔哩哔哩视频网页的逻辑示例

冷色单调

于 2024-01-19 10:04:09 发布

阅读量1k

点赞数 22

文章标签： html 音视频前端

本文链接：https://blog.csdn.net/weixin_62428951/article/details/135690362

版权

该篇文章详细描述了两个版本的HTML和CSS代码，展示了B站网站的页面结构，包括头部、导航栏、不同内容模块（如番剧、国产、综艺等）、搜索框和推广视频，以及特定的样式设计。

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>哔哩哔哩</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

nav {
background-color: #eee;
padding: 10px;
display: flex;
justify-content: space-around;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}

nav ul li {
margin-right: 20px;
}

section {
padding: 20px;
}

footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>

<section id="anime">
<h2>番剧</h2>

<p>这里是番剧模块的详细信息。</p>
</section>

<section id="domestic">
<h2>国产</h2>

<p>这里是国产模块的详细信息。</p>
</section>

<section id="variety">
<h2>综艺</h2>

<p>这里是综艺模块的详细信息。</p>
</section>

<section id="animation">
<h2>动画</h2>

<p>这里是动画模块的详细信息。</p>
</section>

<section id="mad">
<h2>鬼畜</h2>

<p>这里是鬼畜模块的详细信息。</p>
</section>

<section id="ad1">
<h2>推广视频1</h2>

<p>这里是推广视频1的详细信息。</p>
</section>

<section id="ad2">
<h2>推广视频2</h2>

<p>这里是推广视频2的详细信息。</p>
</section>

<section id="ad3">
<h2>推广视频3</h2>

<p>这里是推广视频3的详细信息。</p>
</section>

<footer>
<p>© 2024 哔哩哔哩. All rights reserved.</p>
</footer>

</body>
</html>

header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

nav {
background-color: #eee;
padding: 10px;
display: flex;
justify-content: space-around;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}

nav ul li {
margin-right: 20px;
}

/* 搜索框样式 */
.search-box {
display: flex;
border-radius: 20px;
overflow: hidden;
}

.search-input {
flex: 1;
padding: 10px;
border: none;
outline: none;
}

.search-button {
background-color: #333;
color: white;
padding: 10px;
border: none;
border-radius: 0 20px 20px 0;
cursor: pointer;
}

section {
padding: 20px;
}

/* 美化模块样式 */
.rounded-modules {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px; /* 间隔 */
}

.rounded-module {
width: calc(33.333% - 20px); /* 3 modules in a row with some spacing */
border: 2px solid #333;
border-radius: 20px;
padding: 20px;
margin-bottom: 20px;
}

footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>

<nav>
<ul>

<li class="rounded-modules">
<div class="rounded-module">
<h2>番剧</h2>
<p>这里是番剧模块的详细信息。</p>
</div>

<div class="rounded-module">
<h2>国产</h2>
<p>这里是国产模块的详细信息。</p>
</div>

<div class="rounded-module">
<h2>综艺</h2>
<p>这里是综艺模块的详细信息。</p>
</div>

<div class="rounded-module">
<h2>动画</h2>
<p>这里是动画模块的详细信息。</p>
</div>

<div class="rounded-module">
<h2>鬼畜</h2>
<p>这里是鬼畜模块的详细信息。</p>
</div>
</li>
</ul>
</nav>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>抽象哔哩哔哩</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between; /* 左右两边对齐 */
align-items: center; /* 垂直居中 */
margin-top: 20px;
}

.search-box {
display: flex;
border-radius: 20px;
overflow: hidden;
}

.search-input {
flex: 1;
padding: 10px;
border: none;
outline: none;
}

.search-button {
background-color: #333;
color: white;
padding: 10px;
border: none;
border-radius: 0 20px 20px 0;
cursor: pointer;
}

.extension-module,
.profile-module {
padding: 10px;
background-color: #eee;
border-radius: 10px;
flex: 1; /* 新增 */
text-align: center; /* 新增 */
}

section {
padding: 20px;
}

.rounded-modules {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px; /* 间隔 */
margin-top: 20px;
}

.rounded-module {
width: calc(33.333% - 80px); /* 3 modules in a row with some spacing */
border: 2px solid #333;
border-radius: 20px;
padding: 20px;
margin-bottom: 20px;
text-align: center;
}

footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>

<header>
<h1>抽象哔哩哔哩</h1>
</header>

<section>
<div class="rounded-modules">
<div class="rounded-module">
<h2>分类 1</h2>
<p>这里是分类 1 的详细信息。</p>
</div>

<div class="rounded-module">
<h2>分类 2</h2>
<p>这里是分类 2 的详细信息。</p>
</div>

<div class="rounded-module">
<h2>分类 3</h2>
<p>这里是分类 3 的详细信息。</p>
</div>
</div>
</section>

</body>
</html>

冷色单调

关注

22
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
用html制作模仿哔哩哔哩视频网页的逻辑示例

推广模块</a></li><li><a href="#features">功能模块</a></li><li><a href="#animation">动画</a></li><li><a href="#domestic">国产</a></li>/* 垂直居中 */<li><a href="#variety">综艺</a></li><li><a href="#anime">番剧</a></li><li><a href="#mad">鬼畜
复制链接

扫一扫