菜单 搜索
首页 前端知识 纯HTML5 CSS3仿B站首页

纯HTML5 CSS3仿B站首页

2024-06-01 10:06:17 前端知识 前端哥 493 912 我要收藏

1.页面效果图

 

 

2. html代码

<!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">
    <meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。" />
    <meta name="keywords"
        content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃" />
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
    <!-- 引入网站icon -->
    <link rel="shortcut icon" href="./icon/favicon.ico">
    <!-- 引入基础类样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入公用视频的代码 -->
    <link rel="stylesheet" href="./css/video.css">
    <!-- 引入index.css(确保index.css在最下面) -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入字体图标css文件 -->
    <link rel="stylesheet" href="./font/font/iconfont.css">
</head>
 
<body>
    <!--------------------- 头部导航栏start------------------- -->
    <header>
        <!-- 视频的动态背景 -->
        <video src="./video/banner2.webm" muted autoplay loop></video>
        <!-- 导航栏  nav需要盖在视频上面,所以需要加定位 -->
        <nav>
            <!-- 最左侧的导航 -->
            <div class="nav-left">
                <ul>
                    <li>首页</li>
                    <li>番剧</li>
                    <li>直播</li>
                    <li>游戏中心</li>
                    <li>会员购</li>
                    <li>漫画</li>
                    <li>赛事</li>
                    <li>嘉年华</li>
                </ul>
            </div>
            <!-- 校园十佳 -->
            <div class="top10">
                <div class="top-box">
                    <img src="./images/校园十佳.png" alt="">
                    <p>十佳</p>
                </div>
            </div>
            <!-- 下载客户端 -->
            <div class="download">
                <a href="#">下载客户端</a>
            </div>
            <!-- 搜索框 -->
            <div class="search">
                <input type="text" value="请输入您的搜索内容">
            </div>
            <!-- 登录模块 -->
            <div class="login">
                <a href="#">登录</a>
            </div>
            <!-- 用户功能 -->
            <ul class="userFunction">
                <li>
                    <em class="iconfont icon-wodedahuiyuan"></em>
                    <i>大会员</i>
                </li>
                <li>
                    <em class="iconfont icon-youxiang"></em>
                    <i>消息</i>
                </li>
                <li>
                    <em class="iconfont icon-dongtai"></em>
                    <i>动态</i>
                </li>
                <li>
                    <em class="iconfont icon-shoucang"></em>
                    <i>收藏</i>
                </li>
                <li>
                    <em class="iconfont icon-lishi"></em>
                    <i>历史</i>
                </li>
                <li>
                    <em class="iconfont icon-lightbulb"></em>
                    <i>创作中心</i>
                </li>
            </ul>
            <!-- 投稿上传 -->
            <div class="upload">
                <a href="#">投稿</a>
            </div>
        </nav>
        <!-- logo效果 -->
        <div class="logo">
            <img src="./images/logo1.png" alt="">
        </div>
    </header>
    <!---------------------- 头部导航栏end------------------>
    <!---------- 频道模式start-------------->
    <div class="channel wrapper">
        <!-- 频道的左侧 -->
        <div class="channel-left">
            <ul>
                <li>
                    <em class="iconfont icon-fengkong "></em>
                    <p>动态</p>
                </li>
                <li>
                    <em class="iconfont icon-remen "></em>
                    <p>热门</p>
                </li>
                <li>
                    <em class="iconfont icon-fenlei "></em>
                    <p>频道</p>
                </li>
            </ul>
        </div>
        <!-- 频道列表 -->
        <div class="channel-list">
            <ul>
                <li>番剧</li>
                <li>国创</li>
                <li>综艺</li>
                <li>动画</li>
                <li>鬼畜</li>
                <li>舞蹈</li>
                <li>娱乐</li>
                <li>科技</li>
                <li>美食</li>
                <li>电影</li>
                <li>电视剧</li>
                <li>纪录片</li>
                <li>游戏</li>
                <li>音乐</li>
                <li>影视</li>
                <li>知识</li>
                <li>资讯</li>
                <li>更多</li>
            </ul>
        </div>
        <!-- 频道的右侧 -->
        <div class="channel-right">
            <ul>
                <li>
                    <em class="iconfont icon-zhuanlan "></em>
                    <span>专栏</span>
                </li>
                <li>
                    <em class="iconfont icon-wodehuodong "></em>
                    <span>活动</span>
                </li>
                <li>
                    <em class="iconfont icon-shequ "></em>
                    <span>社区中心</span>
                </li>
                <li>
                    <em class="iconfont icon-15 "></em>
                    <span>直播</span>
                </li>
                <li>
                    <em class="iconfont icon-bofang "></em>
                    <span>课堂</span>
                </li>
                <li>
                    <em class="iconfont icon-dianyingzhiye-gequbangdianjitai
                    "></em>
                    <span>新歌热榜</span>
                </li>
            </ul>
        </div>
    </div>
    <!---------- 频道模式end-------------->
    <!--------- 轮播图 start------- -->
    <div class="banner wrapper">
        <!-- 轮播图左边 -->
        <div class="carousel">
            <!--轮播图 图片  -->
            <img src="./lib/轮播图.webp" alt="">
            <!-- 轮播图 信息区域 -->
            <div class="carousel-info">
                <div class="carousel-info-HD">
                    <h3>有种喜欢叫满眼都是你</h3>
                    <div class="carousel-info-HD-btn">
                        <em class="iconfont icon-jiantou"></em>
                        <em class="iconfont icon-arrow-right"></em>
                    </div>
                </div>
                <div class="arousel-info-BD">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 轮播图右边---视频页 -->
        <div class="video">
            <ul>
                <li>
                    <img src="./lib/v1.webp" alt="">
                    <div class="pageview">
                        <span class="w">11.8万</span>
                        <span class="q">1369</span>
                        <span class="time">07:00</span>
                    </div>
                    <p class="topic">一口气《游戏王》全集!</p>
                    <p class="writer">红豆动漫 · 6-18</p>
                </li>
                <li><img src="./lib/v2.webp" alt="">
                    <div class="pageview">
                        <span class="w">58.2万</span>
                        <span class="q">645</span>
                        <span class="time">04:01</span>
                    </div>
                    <p class="topic">这只猫,让我开心了整整四分钟!</p>
                    <p class="writer">阿浪171 · 7-4</p>
                </li>
                <li>
                    <img src="./lib/v3.webp" alt="">
                    <div class="pageview">
                        <span class="w">108.1万</span>
                        <span class="q">2411</span>
                        <span class="time">01:19</span>
                    </div>
                    <p class="topic">全网播放三千万的《声声慢》翻唱来啦！国语&粤语你更想听哪个呢？</p>
                    <p class="writer">浅影阿_ · 6-23</p>
                </li>
                <li><img src="./lib/v4.webp" alt="">
                    <div class="pageview">
                        <span class="w">205.8万</span>
                        <span class="q">4555</span>
                        <span class="time">04:48</span>
                    </div>
                    <p class="topic">当你写了个BUG但是刚好能运行!</p>
                    <p class="writer">酥妃大魔王 · 6-17</p>
                </li>
                <li>
                    <img src="./lib/v5.webp" alt="">
                    <div class="pageview">
                        <span class="w">85.5万</span>
                        <span class="q">862</span>
                        <span class="time">02:24</span>
                    </div>
                    <p class="topic">有 人 等 烟 雨 ， 有 人 怪 雨 急</p>
                    <p class="writer">橘子味i汽水 · 6-16</p>
                </li>
                <li><img src="./lib/v6.webp" alt="">
                    <div class="pageview">
                        <span class="w">638.1万</span>
                        <span class="q">8116</span>
                        <span class="time">11:59</span>
                    </div>
                    <p class="topic">汤姆：法庭上禁止电音摇！！！</p>
                    <p class="writer">芦苇十三少 · 6-17</p>
                </li>
 
            </ul>
        </div>
    </div>
    <!--------- 轮播图 end-------  -->
    <!-- 推广模块开始 -->
    <div class="extend wrapper">
        <!-- 顶部推广文字栏 -->
        <div class="top">
            <div class="top-left">
                <img src="./images/推广.png" alt="">
                <span>推广</span>
            </div>
        </div>
        <!-- 推广下面视频 -->
        <div class="bottom">
            <div class="video">
                <ul>
                    <li><img src="./lib/t1.webp" alt="">
 
                        <p class="topic">每天建模一小时，趁年轻多学点技能养活自己！</p>
                        <p class="writer">博学教育</p>
                    </li>
                    <li><img src="./lib/t2.webp" alt="">
                        <div class="pageview">
                            <span class="w">14.2万</span>
                            <span class="q">1224</span>
                            <span class="time">12:01</span>
                        </div>
                        <p class="topic">粘在一起の家！房子可不是夹心饼干啊！你搁这变形金刚呢？</p>
                        <p class="writer">百万巨星麒麟君 · 7-19</p>
                    </li>
                    <li><img src="./lib/t3.webp" alt="">
 
                        <p class="topic">IGN评分10，媒体玩家吹爆的公认神作！</p>
                        <p class="writer">极限竞速：地平线</p>
                    </li>
                    <li><img src="./lib/t4.webp" alt="">
                        <div class="pageview">
                            <span class="w">12万</span>
                            <span class="q">167</span>
                            <span class="time">01:45</span>
                        </div>
                        <p class="topic">史上最差《武林外传》动画版？</p>
                        <p class="writer">彩虹咸鱼YA · 7-22</p>
                    </li>
                    <li><img src="./lib/t5.webp" alt="">
                        <div class="pageview">
                            <span class="w">6.1万</span>
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/10349.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

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

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

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

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

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