仿B站官网
纯HTML css实现的，有写作JavaScript而且还没有全部写完，需要的话可以看看
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bilbili首页</title> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2080438_ql9kdwgsb9n.css"/> </head> <body> <section class="header"> <div class="header_top">
<div class="header_Af">
<ul class="left">
<li>
<a href="https://www.bilibili.com/"><i class="iconfont iconbilibili-fill"></i>主站</a>
</li>
<li>
<a href="https://www.bilibili.com/">番剧</a>
</li>
<li>
<a href="https://www.bilibili.com/">游戏中心</a>
<div class="son">
<div class="drop_top">
<img src="img/drop.png" />
</div>
<div class="drop_con">
<div class="drop_con_left">
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
</div>
<div class="drop_con_right">
<h1>人气漫画</h1>
<ul class="drop_con_list">
<li>
<a href="https://www.bilibili.com/">租借女友</a>
</li>
<li>
<a href="https://www.bilibili.com/">幽冥诡匠</a>
</li>
<li>
<a href="https://www.bilibili.com/">碧蓝之海</a>
</li>
<li>
<a href="https://www.bilibili.com/">辉夜大小姐想让我...</a>
</li>
<li>
<a href="https://www.bilibili.com/">天官赐福</a>
</li>
<li>
<a href="https://www.bilibili.com/">一拳超人</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="https://www.bilibili.com/">直播</a>
</li>
<li>
<a href="https://www.bilibili.com/">会员购</a>
</li>
<li>
<a href="https://www.bilibili.com/">漫画</a>
<div class="son">
<div class="drop_top2">
<img src="img/drop.png" />
</div>
<div class="drop_con">
<div class="drop_con_left">
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
<p>
<a href="https://www.bilibili.com/">
<img src="img/仙王.png" />
<span>仙王的日常生活</span>
</a>
</p>
</div>
<div class="drop_con_right">
<h1>人气漫画</h1>
<ul class="drop_con_list">
<li>
<a href="https://www.bilibili.com/">租借女友</a>
</li>
<li>
<a href="https://www.bilibili.com/">幽冥诡匠</a>
</li>
<li>
<a href="https://www.bilibili.com/">碧蓝之海</a>
</li>
<li>
<a href="https://www.bilibili.com/">辉夜大小姐想让我...</a>
</li>
<li>
<a href="https://www.bilibili.com/">天官赐福</a>
</li>
<li>
<a href="https://www.bilibili.com/">一拳超人</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<a href="https://www.bilibili.com/">赛事</a>
</li>
<li>
<a href="https://www.bilibili.com/"><img src="img/phone.png" />下载App</a>
</li>
</ul>
<div class="main">
<form action="#">
<input type="text" placeholder="歪嘴战神在B站“恰饭”的日子" />
<div class="search_btn">
<input type="submit" value=""></input>
</div>
</form>
</div>
<div class="right">
<div class="login">
<div class="u_login">
<a href="https://www.bilibili.com/">
<img src="img/user.jpg" class="user_img" />
<span>登录</span>
</a>
</div>
<div class="u_regist">
<a href="https://www.bilibili.com/">注册</a>
</div>
</div>
<div class="commit">
<input type="button" value="投稿" />
</div>
</div>
</div>
<div class="header_Bf">
<a href="https://www.bilibili.com/"><img src="img/head_logo.png" alt=""></a>
</div>
</div>
<nav>
<div>
<ul class="left">
<li>
<a href="https://www.bilibili.com/">
<b class="b1"></b>
<span>首页</span>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<b class="b2"></b>
<span>动态</span>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<b class="b3"></b>
<span>排行榜</span>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<b class="b4"></b>
<span>频道</span>
</a>
</li>
</ul>
<ul class="main">
<li>
<a href="https://www.bilibili.com/">
动画
<span>999+</span>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
动画
<span>999+</span>
</a>
</li>
<li>
<a hre