仿B站官网
纯HTML+css实现的，么有写JavaScript而且没全部写完，有需要的可以看看
HTML页面
<!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 href="https://www.bilibili.com/">
动画
<span>999+</span>
</a>
</li>
<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 href="https://www.bilibili.com/">
动画
<span>999+</span>
</a>
</li>
<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 href="https://www.bilibili.com/">
动画
<span>999+</span>
</a>
</li>
<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 href="https://www.bilibili.com/">
动画
<span>999+</span>
</a>
</li>
<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 href="https://www.bilibili.com/">
动画
<span>999+</span>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
更多>>
</a>
</li>
</ul>
<ul class="right">
<li>
<a href="https://www.bilibili.com/">
<img src="img/专栏.png" /> 专栏
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/活动.png" /> 活动
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/小黑屋.png" /> 小黑屋
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/直播.png" /> 直播
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/课堂.png" /> 课堂
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/音乐.png" /> 音乐PLUS
</a>
</li>
</ul>
</div>
</nav>
</section>
<!-- 主体内容 start -->
<section class="content">
<div class="wrap">
<div class="content_Af">
<div class="content_Af_left">
<ul class="rotation">
<li>
<a href="https://www.bilibili.com/">
<img src="img/1.png" />
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/2.png" />
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/3.png" />
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/4.png" />
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/5.png" />
</a>
</li>
</ul>
</div>
<div class="content_Af_right">
<ul>
<li>
<a href="https://www.bilibili.com/">
<img src="img/2.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/right_con.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/2.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/right_con.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/2.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/right_con.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/2.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/right_con.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/2.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<img src="img/right_con.jpg" alt="">
<p>
<span>【Animenz】Hacking to the Gate - Stealines; </span>
<span>3.4万播放</span>
</p>
</a>
</li>
</ul>
</div>
</div>
<div class="content_Bf">
<div class="extension">
<header class="ext_title">
<h1><img src="img/推广.png"/>推广</h1>
<div class="text">
<a href="https://www.bilibili.com/">
<img src="img/火.png" /> 每逢开学胖十斤
</a>
<a href="https://www.bilibili.com/">
<img src="img/火.png" /> 配音还能这样玩
</a>
</div>
</header>
<div class="ext_con">
<div class="ext_con_list">
<div class="ext_list_con">
<a href="https://www.bilibili.com/">
<img src="img/名侦探.png" />
<span>名侦探DIO</span>
</a>
</div>
<span>
<a href="https://www.bilibili.com/">
<img src="img/up.png" />
-SHL-
</a>
</span>
</div>
<div class="ext_con_list">
<div class="ext_list_con">
<a href="https://www.bilibili.com/">
<img src="img/失踪.png" />
<span>你能拯救失踪的她吗？</span>
</a>
</div>
<span>
<a href="https://www.bilibili.com/">
<img src="img/up.png" />
-SHL-
</a>
</span>
</div>
<div class="ext_con_list">
<div class="ext_list_con">
<a href="https://www.bilibili.com/">
<img src="img/名侦探.png" />
<span>名侦探DIO</span>
</a>
</div>
<span>
<a href="https://www.bilibili.com/">
<img src="img/up.png" />
-SHL-
</a>
</span>
</div>
<div class="ext_con_list">
<div class="ext_list_con">
<a href="https://www.bilibili.com/">
<img src="img/名侦探.png" />
<span>名侦探DIO</span>
</a>
</div>
<span>
<a href="https://www.bilibili.com/">
<img src="img/up.png" />
-SHL-
</a>
</span>
</div>
</div>
</div>
<div class="online_list">
<div class="online">
<a href="https://www.bilibili.com/">在线列表</a>
</div>
<a href="https://www.bilibili.com/" class="online_con">
<img src="img/265_153.jpg" />
</a>
</div>
</div>
<div class="content_Cf">
<div class="live">
<a href="https://www.bilibili.com/" class="ad">
<img src="img/广告.png" />
</a>
<div class="live_con">
<div class="live_left">
<header class="live_title">
<div class="title_left">
<h1>
<img src="img/正在直播.png"/>
<a href="https://www.bilibili.com/">正在直播</a>
<span class="text_info">当前共有23958个直播</span>
</h1>
<div class="exchangebtn">
<a href="https://www.bilibili.com/">
<div class="btn changebtn">
<i class="iconfont iconshuaxin1"></i>
换一换
</div>
</a>
<a href="https://www.bilibili.com/" class="btn more">
更多 <i class="iconfont iconxiangyou"></i>
</a>
</div>
</div>
</header>
<div class="live_list">
<div class="live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
<div class="live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
<div class="live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
<div class="live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
<div class="top20 live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
<div class="top20 live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
<div class="top20 live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
<div class="top20 live_card">
<a href="https://www.bilibili.com/">
<div class="live_pic">
<img src="img/场景绘制.png" />
</div>
<div class="live_up">
<div class="up_cover">
<img src="img/up_cover.png" />
</div>
<div class="up_txt">
<p class="name">骸骸骸骸什么骸</p>
<p title="通宵8小时也没人看" class="desc">通宵8小时也没人看</p>
<p class="tag">视频唱见</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="live_right">
<div class="live_tab">
<div class="tab_items">
<a href="https://www.bilibili.com/">直播排行</a>
</div>
<div class="tab_items">
<a href="https://www.bilibili.com/">关注的主播</a>
</div>
<div class="tab_items">
<a href="https://www.bilibili.com/">为你推荐</a>
</div>
</div>
<div class="live_recom">
<img src="img/推荐.png" />
</div>
</div>
</div>
</div>
<div class="cartoon">
<div class="cartoon_con">
<div class="cartoon_left">
<header class="cartoon_title">
<div class="title_left">
<h1>
<img src="img/动画.png"/>
<a href="https://www.bilibili.com/">动画</a>
</h1>
<div class="exchangebtn">
<a href="https://www.bilibili.com/">
<div class="btn changebtn">
<i class="iconfont iconshuaxin1"></i>换一换
</div>
</a>
<a href="https://www.bilibili.com/" class="btn more">
更多<i class="iconfont iconxiangyou"></i>
</a>
</div>
</div>
</header>
<div class="cartoon_list">
<div class="cartoon_card">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
<div class="cartoon_card">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
<div class="cartoon_card">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
<div class="cartoon_card">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
<div class="cartoon_card top20">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
<div class="cartoon_card top20">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
<div class="cartoon_card top20">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
<div class="cartoon_card top20">
<div class="cartoon_pic">
<a href="https://www.bilibili.com/"><img src="img/明日方舟.png" /></a>
</div>
<a href="https://www.bilibili.com/" class="card_title">
明日方舟同人原创动画PV【晨昏交界】
</a>
<a href="https://www.bilibili.com/" class="card_up">
<img src="img/up.png" />本舔君
</a>
</div>
</div>
</div>
<div class="cartoon_right">
<header class="rank_title clear">
<h1>排行榜</h1>
<a href="https://www.bilibili.com/" class="more">
更多 <i class="iconfont iconxiangyou"></i>
</a>
</header>
<div class="rank_list clear">
<span class="number on">1</span>
<div class="preview">
<div class="pic">
<a href="https://www.bilibili.com/">
<img src="img/榜1.png" />
</a>
</div>
<div class="txt">
<a href="https://www.bilibili.com/">
<p>打击式教育</p>
</a>
<span>综合得分：96.2万</span>
</div>
</div>
</div>
<div class="rank_list clear">
<span class="number on">2</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="title">央视记者王冰冰客串配音皮卡丘，可可爱爱~</p>
</a>
</div>
<div class="rank_list clear">
<span class="number on">3</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="title">【沙雕动画】你成功引起我的注意3.0</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">4</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="title">当你在原神氪的足够多的时候，会发生什么呢【4K/原神】</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">5</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="title">火影功夫系列 完整版</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">6</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="title">火影功夫系列 完整版</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">7</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="title">火影功夫系列 完整版</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">8</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="title">火影功夫系列 完整版</p>
</a>
</div>
</div>
</div>
</div>
<div class="fanju">
<a href="https://www.bilibili.com/" class="ad">
<img src="img/广告2.png" />
</a>
<div class="fanju_con">
<div class="fanju_left">
<header class="fanju_title">
<div class="title_left">
<h1>
<img src="img/番剧.png"/>
<a href="https://www.bilibili.com/">番剧</a>
</h1>
<ul class="week">
<li class="date new">最新</li>
<li class="date">周一</li>
<li class="date">周二</li>
<li class="date">周三</li>
<li class="date">周四</li>
<li class="date">周五</li>
<li class="date">周六</li>
<li class="date">周日</li>
</ul>
</div>
<a href="https://www.bilibili.com/" class="time_btn">
新番时间表<i class="iconfont iconxiangyou"></i>
</a>
</header>
<div class="fanju_list">
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
<div class="fanju_card">
<a href="https://www.bilibili.com/" class="inline">
<img src="img/柯南.png" />
</a>
<div class="txt">
<a href="https://www.bilibili.com/" class="card_title">名侦探柯南</a>
<a href="https://www.bilibili.com/" class="card_page"><span>第1038话</span></a>
</div>
</div>
</div>
</div>
<div class="fanju_right">
<header class="rank_title">
<h1>排行榜</h1>
<a href="https://www.bilibili.com/" class="more">
更多 <i class="iconfont iconxiangyou"></i>
</a>
</header>
<div class="rank_list clear">
<span class="number on">1</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">Re：从零开始的异世界生活 第二季</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number on">2</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">我的青春恋爱物语果然有问题。完</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number on">3</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">某科学的超电磁炮T</span>
<span class="update">更新至第24话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">4</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">没落要塞 / DECA-DENCE</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">5</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">没落要塞 / DECA-DENCE</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">6</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">没落要塞 / DECA-DENCE</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">7</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">没落要塞 / DECA-DENCE</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">8</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">没落要塞 / DECA-DENCE</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">9</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">没落要塞 / DECA-DENCE</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
<div class="rank_list clear">
<span class="number">10</span>
<a href="https://www.bilibili.com/" class="inline">
<p class="txt">
<span class="title">没落要塞 / DECA-DENCE</span>
<span class="update">更新至第11话</span>
</p>
</a>
</div>
</div>
</div>
<div class="fanju_dynamic">
<div class="dynamic_con">
<div class="dynamic_left">
<header class="dynamic_title">
<div class="title_left">
<h1><a href="https://www.bilibili.com/">番剧动态</a></h1>
<div class="exchangebtn">
<a href="https://www.bilibili.com/">
<div class="btn changebtn">
<i class="iconfont iconshuaxin1"></i>换一换
</div>
</a>
<a href="https://www.bilibili.com/" class="btn more">
更多<i class="iconfont iconxiangyou"></i>
</a>
</div>
</div>
</header>
<div class="dynamic_list">
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
<div class="dynamic_card">
<div class="dynamic_pic">
<a href="https://www.bilibili.com/">
<img src="img/百变小樱.png" />
</a>
</div>
<a href="https://www.bilibili.com/">【合集】魔卡少女樱 / 百变小樱</a>
</div>
</div>
</div>
<div class="dynamic_right">
<header>最新推荐</header>
<div class="dynamic_recom">
<a href="https://www.bilibili.com/">
<img src="img/从零开始.png" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 主体内容 end -->
<section class="footer">
<div class="footer_con">
<div class="footer_left">
<div class="footer_leftA">
<span class="bt">bilibili</span>
<ul>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
</ul>
</div>
<div class="footer_leftB">
<span class="bt">传送门</span>
<ul>
<a href="https://www.bilibili.com/">帮助中心</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
<a href="https://www.bilibili.com/">关于我们</a>
</ul>
</div>
</div>
<div class="footer_right">
<ul>
<li>
<a href="https://www.bilibili.com/">
<b class="b5"></b>
<span>首页</span>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<b class="b6"></b>
<span>动态</span>
</a>
</li>
<li>
<a href="https://www.bilibili.com/">
<b class="b7"></b>
<span>排行榜</span>
</a>
</li>
</ul>
</div>
</div>
<div class="footer_base">
<div class="base_left">
<img src="img/底左.png" />
</div>
<div class="base_right">
<p>
<span><a href="https://www.bilibili.com/">营业执照</a></span>
<span>信息网络传播视听节目许可证：0910417</span>
<span>网络文化经营许可证 沪网文【2019】3804-274号</span>
<span>广播电视节目制作经营许可证：（沪）字第01248号</span>
<span>增值电信业务经营许可证 沪B2-20100043</span>
<span>互联网ICP备案：<a href="https://www.bilibili.com/">沪ICP备13002172号-3</a></span>
<span>出版物经营许可证 沪批字第U6699 号</span>
<span>互联网药品信息服务资格证 沪-非经营性-2016-0143</span>
<span>营业性演出许可证 沪市文演（经）00-2253</span>
</p>
<p>违法不良信息举报邮箱：help@bilibili.com |违法不良信息举报电话：4000233233转3</p>
<p>
<img src="img/举报中心.png" />
<a href="https://www.bilibili.com/">上海互联网举报中心</a> |
<a href="https://www.bilibili.com/">12318全国文化市场举报网站</a> |
<img src="img/沪工网.png" />
<a href="https://www.bilibili.com/">沪公网安备31011002002436号</a> |
<a href="mailto:userreport@bilibili.com">儿童色情信息举报专区</a> |
<a href="https://www.bilibili.com/">扫黄打非举报</a>
</p>
<p>
网上有害信息举报专区：<img src="img/中国互联网.png" />
<a href="https://www.bilibili.com/">中国互联网违法和不良信息举报中心</a>
</p>
<p>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</p>
<p>公司名称：上海宽娱数码科技有限公司|公司地址：上海市杨浦区政立路485号|电话：021-25099888</p>
</div>
</div>
</section>
<div class="service">
<a href="https://www.bilibili.com/">联系客服</a>
</div>
<div class="nav_right">
<div class="mask"></div>
<i class="ear iconfont iconicon_youdaohang_xiaodianshitianxian"></i>
<ul>
<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>
<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 class="sort">
<i class="iconfont iconpaixu"></i>
</div>
<div class="back_top">
<i class="iconfont iconxiangshang"></i>
</div>
</div>
</body>
</html>
common.css
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 15px;
font-family: '微软雅黑';
text-decoration-line: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 18px;
}
.clear:after {
content: '';
display: block;
clear: both;
}
a{
color: #000000;
}
a:hover{
color: skyblue;
}
.inline{
display: inline-block;
}
/* ================= 公共结构样式 ==================== */
.header {
width: 100%;
min-width: 1300px;
height:260px ;
}
.content {
width: 1000px;
height: 2500px;
min-width: 1000px;
margin:20px auto 0;
}
.footer {
width: 100%;
min-width: 1300px;
height: 370px;
background-color: #f6f9fa;
padding:30px 0 0 0;;
}
index.css样式
.header_top {
width: 100%;
min-width: 1300px;
height: 180px;
background: no-repeat url(../img/background.png) center;
}
.header_Af {
/*width: 100%;*/
min-width: 1300px;
height: 35px;
padding: 10px 20px;
}
.header_Af>div {
width: 33.33%;
height: 35px;
}
.header_Af .left{
width: 33.33%;
height: 35px;
float: left;
}
.header_Af .left>li {
height: 35px;
line-height: 35px;
position: relative;
float: left;
padding: 0 5px;
}
.header_Af .left a{
color: #fff;
text-shadow: 0px 0px 20px #000;
}
.header_Af .left .son {
width: 520px;
height: 260px;
display: none;
position: absolute;
left:-50px;
z-index: 1;
}
.header_Af .left>li:hover>.son {
display:block;
}
.son .drop_top{
width: 520px;
height: 10px;
position: relative;
}
.son .drop_top img{
position: relative;
top: -13px;
left: 8%;
}
.son .drop_top2{
width: 520px;
height: 10px;
position: relative;
}
.son .drop_top2 img{
position: relative;
top: -13px;
left: 5%;
}
.son .drop_con{
height: 250px;
width: 520px;
background: white;
}
.son .drop_con .drop_con_left{
width: 329px;
height: 230px;
float: left;
margin: 10px 0 0 0px;
border-right: 1px solid gainsboro;
}
.son .drop_con .drop_con_left p{
width: 138px;
height: 100px;
display: inline-block;
margin: 0px 12px 0px 12px;
}
.son .drop_con .drop_con_left p:nth-child(n+2){
width: 138px;
height: 100px;
display: inline-block;
margin: 0px 12px 0px 12px;
}
.son .drop_con .drop_con_left p span{
position: relative;
top: -18px;
color: black;
text-shadow: 0px 0px 0px #000;
}
.son .drop_con .drop_con_right{
width: 170px;
height: 230px;
float: left;
margin: 10px 10px;
}
.son .drop_con .drop_con_right h1{
font-weight: 200;
}
.son .drop_con .drop_con_right .drop_con_list{
height: 195px;
margin-left: 15px;
}
.son .drop_con .drop_con_right .drop_con_list li{
height: 33px;
list-style: decimal;
color: brown;
}
.son .drop_con .drop_con_right .drop_con_list li:hover{
background: gainsboro;
}
.son .drop_con .drop_con_right .drop_con_list li a{
color: black;
text-shadow: 0 0 black;
}
.header_Af .left li:hover ul {
display:block;
}
.header_Af .left li a>img{
position: relative;
top: 3px;
}
.header_Af .main {
width: 35%;
float: left;
border-radius: 2px;
position: relative;
left: 7%;
}
.header_Af .main input[type=text]{
width: 88%;
height: 35px;
line-height: 34px;
color: #999999;
font-size: 14px;
border: 0;
float: left;
}
.header_Af .main .search_btn{
height: 35px;
width: 12%;
float: left;
}
.header_Af .main .search_btn input[type=submit]{
height: 35px;
width: 100%;
border: 0;
background-image: url(../img/search.png);
background-repeat: no-repeat;
background-position: center;
}
.header_Af .right {
width: 20%;
float: right;
}
.header_Af .right .login{
width: 50%;
height: 35px;
line-height: 35px;
float: left;
}
.header_Af .right .login .u_login{
float: left;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
}
.header_Af .right .login .u_login span{
height: 35px;
position: relative;
top: -11px;
}
.header_Af .right .login .u_regist{
float: left;
height: 35px;
line-height: 35px;
padding: 0 10px;
}
.header_Af .right .login a{
color: white;
}
.header_Af .right .login .user_img{
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
border: 1px solid silver;
}
.header_Af .right .commit{
width: 100px;
height: 36px;
float: left;
}
.header_Af .right input[type=button]{
position: relative;
color: #fff;
font-size: 14px;
display: block;
width: 100px;
height: 36px;
line-height: 36px;
text-align: center;
background: #fb7299;
border: 0px;
margin-left: 30px;
}
.header_Bf {
width: 1000px;
margin: 0 auto;
}
.header_Bf img {
width: 200px;
margin: 30px 0 0 50px;
}
.header nav {
width: 1000px;
height: 60px;
margin: 0 auto ;
padding: 20px 0 0 0 ;
overflow: hidden;
/* border: 1px solid skyblue; */
}
.header nav>div {
width: 1000px;
height: 60px;
}
.header nav>div>ul {
border-right: 1px solid #777;
}
.header nav .left {
width: 20%;
height: 60px;
float: left;
}
.header nav .left li {
width:25%;
height: 60px;
float: left;
}
.header nav .left li a {
width: 100%;
height: 60px;
display: block;
color: #000;
}
.header nav .left li b {
width: 35px;
height: 35px;
display: block;
margin: 0 auto;
border-radius: 50%;
}
.header nav .left li .b1{
background: #ff5c7c;
background-image: url(../img/首页.png);
background-repeat: no-repeat;
background-position: center;
background-size: 85%;
}
.header nav .left li .b2{
background: #fcba2a;
background-image: url(../img/动态.png);
background-repeat: no-repeat;
background-position: center;
background-size: 85%;
}
.header nav .left li .b3{
background: #00a1d6;
background-image: url(../img/排行榜.png);
background-repeat: no-repeat;
background-position: center;
background-size: 77%;
}
.header nav .left li .b4{
background: #6dc781;
background-image: url(../img/频道.png);
background-repeat: no-repeat;
background-position: center;
background-size: 85%;
}
.header nav .left li span {
width: 100%;
height: 25px;
display: block;
line-height: 25px;
text-align: center;
}
.header nav .left li a:hover span {
color: skyblue;
}
.header nav .main {
width: 56%;
height: 60px;
float: left;
padding: 0 1%;
}
.header nav .main li{
height: 30px;
line-height: 30px;
float: left;
padding: 0 5px;
}
.header nav .main li a{
font-size: 13px;
color: #000;
}
.header nav .main li a:hover{
color: skyblue;
}
.header nav .main li span{
background: skyblue;
font-size: 12px;
color: #fff;
border-radius: 2px;
}
.header nav .right {
width: 20.5%;
height: 60px;
float: right;
}
.header nav .right li{
height: 30px;
line-height: 30px;
float: left;
padding: 0 5px 0 2px;
}
.header nav .right li img{
height: 20px;
position: relative;
top: 5px;
}
.header nav .right li a{
font-size: 13px;
color: black;
}
.header nav .right li a:hover{
color: skyblue;
}
.header nav .right{
border: 0px;
}
/****************中间***********************/
.wrap{
width: 1000px;
height: 466px;
}
.wrap>div{
margin-bottom: 40px;
}
.content_Af {
width: 1000px;
height: 202px;
}
.content_Af_left {
width: 459px;
height: 202px;
float: left;
overflow: hidden;
}
.rotation{
width: 2295px;
height: 202px;
margin: 0 0 0 -459px;
animation: run 10s steps(5, end) infinite alternate;
}
.rotation li{
width: 459px;
height: 202px;
float: left;
}
.rotation li img{
width: 459px;
height: 202px;
}
@keyframes run{
0%{
margin: 0 0 0 0px;
}
100%{
margin: 0 0 0 -2295px;
}
}
.content_Af_right {
width: 530px;
height: 202px;
float: right;
margin: 0 0 0 10px;
overflow: hidden;
}
.content_Af_right ul {
width: 540px;
height: 202px;
/* background: pink; */
}
.content_Af_right ul li {
width: 170px;
height: 96px;
float: left;
margin: 0 10px 10px 0;
}
.content_Af_right ul li:nth-child(n+7){
display: none;
}
.content_Af_right ul li a{
width: 170px;
height: 96px;
display: block;
position: relative;
overflow: hidden;
}
.content_Af_right ul li img {
width: 170px;
height: 96px;
}
.content_Af_right ul li p {
width: 170px;
height: 96px;
position: absolute;
top:80px;
left: 0px;
background: rgba(0,0,0,0.1);
transition: all 0.5s;
}
.content_Af_right ul li:hover p {
top:0px;
background: rgba(0,0,0,0.5);
transition: all 0.5s;
}
.content_Af_right ul li p span {
color: #fff;
}
/**************************推广******************************/
.content_Bf{
width: 1000px;
height: 224px;
}
.content_Bf .extension{
width: 710px;
float: left;
}
.content_Bf .extension .ext_title{
margin-bottom: 16px;
height: 36px;
line-height: 36px;
}
.content_Bf .extension .ext_title h1{
width: 90px;
float: left;
font-weight: 500;
}
.content_Bf .extension .ext_title h1 img{
position: relative;
top: 5px;
}
.content_Bf .extension .ext_title .text{
width: 250px;
float: left;
}
.content_Bf .extension .ext_title a{
color: #505050;
}
.content_Bf .extension .ext_title a:hover{
color: skyblue;
}
.content_Bf .extension .ext_con{
width: 710px;
height: 172px;
}
.content_Bf .extension .ext_con .ext_con_list{
width: 170px;
float: left;
margin-right: 10px;
}
.content_Bf .extension .ext_con .ext_con_list:last-child{
float: right;
margin: 0;
}
.content_Bf .extension .ext_con .ext_con_list a:hover{
color: skyblue;
}
.content_Bf .extension .ext_con .ext_con_list span:hover{
color: skyblue;
}
.extension .ext_con .ext_con_list .ext_list_con{
width: 100%;
}
.extension .ext_con .ext_con_list .ext_list_con span{
color: #212121;
font-size: 14px;
position: relative;
top: 5px;
}
.extension .ext_con .ext_con_list>span{
position: relative;
top: 32px;
}
.extension .ext_con .ext_con_list span a{
font-size: 12px;
color: #999;
}
.extension .ext_con .ext_con_list span a img{
position: relative;
top: 1px;
}
.content_Bf .online_list{
width: 265px;
height: 224px;
float: right;
}
.online_list .online{
margin-top: 3px;
margin-bottom: 19px;
height: 30px;
border: 1px solid #e7e7e7;
border-radius: 2px;
background: #f4f4f4;
color: #505050;
line-height: 30px;
text-align: center;
}
.online_list .online a{
width: 100%;
display: block;
color: #212121;
}
.online_list .online a:hover{
color: skyblue;
}
.online_list .online_con{
display: block;
position: relative;
}
/**********************************超级大列表*********************************/
.content_Cf{
width: 1000px;
height: 2000px;
}
/******************正在直播*********************/
.content_Cf .ad{
display: block;
width: 1000px;
position: relative;
margin-bottom: 46px;
}
.content_Cf .live .live_con{
width: 1000px;
height: 412px;
margin-bottom: 40px;
}
.live .live_con .live_left{
width: 710px;
float: left;
}
.live_left .live_title{
height: 36px;
margin-bottom: 16px;
}
.live_title .title_left{
height: 36px;
}
.live_title .title_left h1{
width: 320px;
float: left;
}
.live_title .title_left h1 a{
height: 36px;
line-height: 36px;
font-weight: 500;
font-size: 18px;
}
.live_title .title_left h1 img{
position: relative;
top: 5px;
}
.title_left .text_info{
color: #505050;
line-height: 36px;
font-size: 14px;
font-weight: 500;
margin-left: 10px;
}
.exchangebtn{
float: right;
width: 165px;
height: 25px;
line-height: 25px;
margin-top: 5px;
}
.exchangebtn .btn{
height: 22px;
text-align: center;
border: 1px solid silver;
border-radius: 2px;
font-size: 12px;
color: #505050;
line-height: 22px;
}
.btn:hover{
background: #EEEEEE;
}
.exchangebtn .changebtn{
padding: 0 0 0 6px;
width: 72px;
float: left;
margin-top: 5px;
}
.changebtn img{
float: left;
}
.changebtn .iconshuaxin1{
float: left;
}
.exchangebtn .more{
padding: 0 0 0 12px;
width: 58px;
display: inline-block;
margin: 5px 0 0 12px;
line-height: 22px;
}
.more .iconxiangyou{
float: right;
}
.live .live_list{
width: 710px;
height: 360px;
}
.live_list .live_card{
width: 170px;
float: left;
margin-right: 10px;
}
.live_list .live_card:nth-of-type(4),
.live_card:nth-of-type(8){
margin-right: 0;
}
.top20{
margin-top: 20px;
}
.live_list .live_card .live_pic{
width: 100%;
height: 96px;
position: relative;
margin-bottom: 10px;
}
.live_list .live_card .live_up{
height: 64px;
}
.live_card .live_up .up_cover{
position: relative;
text-align: center;
width: 36px;
float: left;
}
.live_card .live_up .up_cover img{
height: 36px;
width: 36px;
border-radius: 50%;
}
.live_card .live_up .up_txt{
width: 128px;
float: right;
}
.live_card .live_up .up_txt p{
width: 100%;
overflow: hidden;
}
.live_card a:hover .up_txt>p{
color: skyblue;
}
.live_card .live_up .up_txt .name{
font-size: 14px;
line-height: 20px;
font-weight: 500;
}
.live_card .live_up .up_txt .desc{
font-size: 12px;
color: #505050;
line-height: 18px;
margin-top: 2px;
}
.live_card .live_up .up_txt .tag{
font-size: 12px;
line-height: 16px;
color: #999;
margin-top: 8px;
}
.live_con .live_right{
width: 265px;
float: right;
}
.live_right .live_tab{
height: 36px;
margin-right: 16px;
margin-bottom: 16px;
}
.live_right .live_tab .tab_items a{
font-size: 12px;
line-height: 36px;
height: 22px;
margin-right: 12px;
color: #505050;
float: left;
}
.live_right .live_recom{
width: 265px;
height: 273px;
}
/*****************************动画*************************/
.content_Cf .cartoon,.cartoon_con{
width: 1000px;
height: 412px;
margin-bottom: 40px;
}
.cartoon .cartoon_con .cartoon_left{
width: 710px;
float: left;
}
.cartoon_left .cartoon_title{
height: 36px;
margin-bottom: 16px;
}
.cartoon_title .title_left{
height: 36px;
}
.cartoon_title .title_left h1{
width: 320px;
float: left;
}
.cartoon_title .title_left h1 a{
font-weight: 500;
position: relative;
top: -5px;
font-size: 18px;
}
.cartoon_title .title_left h1 img{
position: relative;
top: 2px;
}
.cartoon_left .cartoon_list{
width: 710px;
height: 360px;
}
.cartoon_left .cartoon_card:nth-of-type(4){
float: right;
margin-right: 0;
}
.cartoon_left .cartoon_card:nth-of-type(8){
float: right;
margin-right: 0;
}
.cartoon_list .cartoon_card{
width: 170px;
float: left;
margin-right: 10px;
}
.cartoon_card .cartoon_pic{
width: 170px;
height: 96px;
}
.cartoon_card .card_title{
width: 170px;
font-size: 14px;
line-height: 20px;
margin: 10px 0 8px;
height: 40px;
overflow: hidden;
display: block;
font-weight: 500;
padding-right: 12px;
}
.cartoon_card .card_up{
font-size: 12px;
color: #999;
line-height: 16px;
display: block;
}
.cartoon_card .card_up:hover{
color: skyblue;
}
.cartoon_card .card_up img{
position: relative;
top: 1px;
padding: 0px 6px 0 0;
}
.cartoon .cartoon_con .cartoon_right{
width: 265px;
float: right;
}
.rank_title{
margin-bottom: 16px;
height: 36px;
}
.rank_title h1{
line-height: 36px;
font-weight: 500;
font-size: 18px;
display: inline-block;
}
.rank_title .more{
padding: 0 0 0 12px;
width: 58px;
height: 22px;
border: 1px solid silver;
border-radius: 2px;
color: #505050;
text-align: center;
font-size: 12px;
line-height: 22px;
float: right;
margin: 6px 0 0 0;
}
.rank_title .more:hover{
background: #EEEEEE;
}
.rank_list{
margin-bottom: 18px;
position: relative;
}
.rank_list .number{
font-size: 14px;
color: #999;
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
background: #fff;
border-radius: 2px;
display: inline-block;
}
.rank_list .number.on {
color: #fff;
background: #00a1d6;
}
.rank_list .preview{
width: 235px;
font-weight: 500;
position: relative;
display: inline-block;
float: right;
}
.rank_list .preview .pic{
position: relative;
width: 112px;
height: 63px;
display: inline-block;
}
.rank_list .preview .pic a{
display: inline-block;
}
.rank_list .preview a img{
width: 112px;
height: 63px;
border-radius: 2px;
}
.rank_list .preview .txt{
margin-left: 12px;
width: 111px;
float: right;
}
.rank_list .preview .txt a{
display: block;
}
.rank_list .preview .txt p {
font-size: 14px;
height: 40px;
line-height: 20px;
overflow: hidden;
margin-bottom: 5px;
}
.rank_list .preview .txt span{
color: #999999;
font-size: 12px;
}
.rank_list .title {
width: 235px;
height: 20px;
font-size: 14px;
line-height: 20px;
overflow: hidden;
font-weight: 500;
white-space: nowrap;
text-overflow: ellipsis;
color: #212121;
}
.rank_list>a{
float: right;
}
.rank_list a:hover p{
color: skyblue;
}
/***********************番剧 and番剧动态**************************/
.content_Cf .fanju{
width: 1000px;
height: 960px;
margin-bottom: 40px;
}
.fanju_con{
width: 1000px;
height: 414px;
margin-bottom: 40px;
}
.fanju_con .fanju_left{
width: 710px;
float: left;
}
.fanju_left .fanju_title{
height: 36px;
margin-bottom: 16px;
}
.fanju_title .title_left{
height: 36px;
width: 522px;
float: left;
}
.fanju_title .title_left h1{
width: 78px;
margin-right: 20px;
float: left;
}
.fanju_title .title_left h1 a{
font-weight: 500;
position: relative;
top: -5px;
font-size: 18px;
}
.fanju_title .title_left h1 img{
position: relative;
top: 2px;
}
.title_left .week .new{
border-bottom: 1px solid #00a1d6;
color: #00a1d6;
}
.title_left .week .date{
float: left;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-right: 24px;
}
.fanju_title .time_btn{
width: 112px;
height: 30px;
border: 1px solid #00a1d6;
border-radius: 2px;
background: #fff;
text-align: center;
line-height: 27px;
padding: 0 0 0 14px;
font-size: 14px;
color: #00a1d6;
float: right;
}
.time_btn .iconxiangyou{
position: relative;
float: right;
top: 2px;
}
.fanju_title .time_btn:hover{
color: white;
background: #00a1d6;
}
.fanju_left .fanju_list{
height: 332px;
overflow: auto;
}
.fanju_list .fanju_card{
width: 210px;
float: left;
margin: 0 20px 20px 0;
}
.fanju_card>a{
height: 70px;
width: 70px;
}
.fanju_card .txt{
width: 128px;
float: right;
margin-left: 10px;
}
.fanju_card .txt .card_title{
width: 128px;
height: 37px;
margin: 0 0 10px 0;
display: block;
}
.fanju_card .txt .card_page{
width: 128px;
color: #00a1d6;
font-size: 10px;
display: block;
}
.fanju_con .fanju_right{
width: 265px;
float: right;
}
.rank_list .txt{
width: 235px;
height: 20px;
line-height: 20px;
}
.rank_list .txt .title{
width: 145px;
font-size: 14px;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
}
.rank_list .txt .update{
font-size: 12px;
color: #999;
text-align: right;
min-width: 90px;
float: right;
}
.rank_list a:hover .title{
color: skyblue;
}
.fanju .fanju_dynamic{
width: 1000px;
height: 370px;
margin-bottom: 40px;
}
.fanju_dynamic .dynamic_con .dynamic_left{
width: 710px;
float: left;
}
.dynamic_left .dynamic_title{
height: 36px;
margin-bottom: 16px;
}
.dynamic_title .title_left{
height: 36px;
}
.dynamic_title .title_left h1{
width: 320px;
float: left;
}
.dynamic_title .title_left h1 a{
font-weight: 500;
position: relative;
top: -5px;
font-size: 18px;
}
.dynamic_left .dynamic_list{
width: 710px;
height: 332px;
}
.dynamic_list .dynamic_card{
width: 170px;
float: left;
margin-right: 10px;
}
.dynamic_card .dynamic_pic a{
width: 170px;
height: 96px;
display: block;
}
.dynamic_card>a{
display: block;
width: 170px;
margin: 10px 0 8px 0px;
font-size: 14px;
}
.dynamic_card:nth-of-type(4){
margin-right: 0;
}
.dynamic_card:nth-of-type(8){
margin-right: 0;
}
.dynamic_con .dynamic_right{
width: 265px;
float: right;
}
.dynamic_right header{
font-size: 18px;
font-weight: 500;
margin-bottom: 29px;
}
.dynamic_right .dynamic_recom{
width: 265px;
}
.dynamic_right .dynamic_recom a{
display: block;
width: 265px;
height: 274px;
}
/*************************************底部******************/
.footer .footer_con{
width: 1000px;
height: 160px;
margin: 0 auto;
}
.footer .footer_con .footer_left{
font-size: 14px;
width: 80%;
height: 160px;
float: left;
}
.footer .footer_con .footer_left>div{
padding-right: 40px;
margin-right: 40px;
width: 30%;
float: left;
border-right: 1px solid #eee;
}
.footer .footer_con .footer_left .footer_leftA{
}
.footer .footer_con .footer_left .footer_leftA .bt{
font-size: 16px;
color: #999;
display: block;
height: 20px;
margin-bottom: 20px;
}
.footer .footer_con .footer_left .footer_leftB{
width: 46%;
}
.footer .footer_con .footer_left .footer_leftB .bt{
font-size: 16px;
color: #999;
display: block;
height: 20px;
margin-bottom: 20px;
}
.footer .footer_con .footer_left ul{
height: 110px;
}
.footer .footer_con .footer_left ul a{
display: inline-block;
margin-bottom: 10px;
width: 50%;
height: 20px;
float: left;
color: #212121;
}
.footer .footer_con .footer_leftB ul a{
width: 33.33%;
}
.footer .footer_con .footer_left ul a:hover{
color: skyblue;
}
.footer .footer_con .footer_right{
font-size: 14px;
width: 20%;
height: 160px;
float: right;
}
.footer .footer_con .footer_right ul{
padding-right: 0;
border-right: none;
margin-right: 0;
height: 84px;
margin: 25% 0 0 0;
}
.footer .footer_con .footer_right ul li{
width: 33%;
height: 84px;
float: left;
}
.footer .footer_con .footer_right ul li b{
width: 50px;
height: 50px;
display: block;
margin: 0 auto;
border-radius: 50%;
}
.footer .footer_con .footer_right ul li a{
width: 100%;
height: 84px;
color: #212121;
display: block;
text-align: center;
}
.footer .footer_con .footer_right ul li a:hover{
color: skyblue;
}
.footer .footer_con .footer_right ul li .b5{
background: #585f69;
background-image: url(../img/下载.png);
background-repeat: no-repeat;
background-position: center;
background-size: 56%;
}
.footer .footer_con .footer_right ul li .b6{
background: #fe596c;
background-image: url(../img/微博.png);
background-repeat: no-repeat;
background-position: center;
background-size: 78%;
}
.footer .footer_con .footer_right ul li .b7{
background: #42c86b;
background-image: url(../img/微信.png);
background-repeat: no-repeat;
background-position: center;
background-size: 70%;
}
.footer_base{
font-size: 10px;
width: 1000px;
margin: 0 auto;
padding-top: 20px;
height: 192px;
}
.footer_base .base_left{
height: 192px;
width: 100px;
float: left;
margin-right: 20px;
}
.footer_base .base_right{
float: left;
width: 880px;
}
.footer_base .base_right p{
line-height: 24px;
color: #999999;
font-size: 10px;
word-break: break-word;
}
.footer_base .base_right p span{
font-size: 10px;
}
.footer_base .base_right p a{
color: #999999;
font-size: 10px;
}
.footer_base .base_right p a:hover{
color: skyblue;
}
.service a{
position: fixed;
top: 44%;
left: 0;
width: 23px;
height: 66px;
font-size: 12px;
color: #505050;
background: #fff;
border: 1px solid #e7e7e7;
box-shadow: 0 6px 10px 0 #e7e7e7;
border-radius: 0 2px 2px 0;
padding: 10px 0px 5px 5px;
line-height: 14px;
}
.service a:hover{
background: #EEEEEE;
}
.nav_right{
position: fixed;
top: 210px;
right: 70px;
height: 367px;
width: 56px;
}
.nav_right ul{
height: 300px;
padding-top: 6px;
position: relative;
background: #fff;
border: 1px solid #e7e7e7;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.nav_right ul li a{
width: 54px;
height: 24px;
line-height: 24px;
text-align: center;
color: #505050;
display: block;
background: #fff;
font-size: 12px;
}
.nav_right ul li a:hover{
background: #1890ff;
color: #fff;
}
.nav_right .ear{
position: absolute;
top: -10px;
font-size: 5px;
left: 2px;
}
.nav_right .sort{
height: 32px;
line-height: 32px;
position: relative;
border-left: 1px solid #e7e7e7;
border-right: 1px solid #e7e7e7;
text-align: center;
}
.nav_right .back_top{
position: relative;
width: 54px;
line-height: 30px;
height: 32px;
text-align: center;
border: 1px solid #e7e7e7;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.sort .iconpaixu{
color: #999999;
}
.sort:hover{
background: #1890ff;
}
.sort:hover>i{
background: #1890ff;
color: #fff;
}
.back_top .iconxiangshang{
color: #999999;
}
.back_top:hover
{
background: #1890ff;
}
.back_top:hover>i{
background: #1890ff;
color: #fff;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
