网页制作---简易版B站

本人实在太懒,做的及其粗糙,在此只是抛砖引玉,细节读者可自行补充。

效果图如下:

头部: 

导航栏:(鼠标放到图标上会自动弹出视频详情)

直播导航页:

 番剧导航页:

站内音乐导航页:

 仿制网页尾部:

代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicons/bilibili-fill.png" />
    <title>盗版bilibili注册网</title>
    <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高燃" />
		<link rel="stylesheet" href="css/detail-description.css" type="text/css" />
		<link rel="stylesheet" href="css/main-part.css" type="text/css" />

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      a,
      ul,
      li {
        list-style: none;
        text-decoration: none;
        color: #ffffff;
      }
      button,
      input {
        text-decoration: none;
        border: none;
      }
      input:hover {
        text-decoration: none;
      }
      input,
      button:focus {
        text-decoration: none;
        outline: none;
        border: none;
      }
      .nav {
        position: relative;
        margin: 0;
        padding: 0;
      }
      .mini-header-content {
        color: #ffffff;
        box-sizing: border-box;
        padding: 10px 24px;
        line-height: 30px;
        position: relative;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        z-index: 100;
      }

      .nav-link .nav-link-ul {
        height: 36px;
        display: flex;
        align-items: center;
        font-size: 14px;
      }
      .nav-link .nav-link-ul .nav-link-item {
        margin-right: 12px;
      }
      .nav-link-item-img {
        width: 18px;
        height: 18px;
        vertical-align: middle;
      }

      /* 导航搜索 */
      .nav-search-box {
        margin: 0 10px;
        width: 500px;
        transition: width 0.3s;
      }
      .nav-search {
        position: relative;
      }
      .nav-search #nav-searchform {
        display: block;
        padding: 0 38px 0 16px;
        border: 1px solid hsla(0, 0%, 100%, 0);
        border-radius: 2px;
        background-color: #fff;
      }

      .search-input {
        width: 431px;
        height: 32px;
      }
      .nav-search .nav-search-keyword {
        overflow: hidden;
        width: 100%;
        height: 34px;
        border: none;
        background-color: transparent;
        box-shadow: none;
        color: #999;
        font-size: 14px;
        line-height: 34px;
        transition: all 0.2s;
      }
      .nav-search .nav-search-btn {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        width: 48px;
        height: 35px;
        border: none;
        border-radius: 2px;
        background: #e7e7e7;
        line-height: 35px;
      }
      .nav-search-btn-img {
        width: 16px;
        height: 16px;
        padding: 8px 16px;
      }

      /* 用户中心页面 */
      .nav-user-center {
        font-size: 14px;
        display: flex;
        flex-shrink: 0;
      }
      .nav-user-center .user-con {
        display: flex;
        align-items: center;
      }
      .nav-user-center .user-con .item {
        position: relative;
        display: flex;
        margin-left: 12px;
        cursor: pointer;
      }
      .user-img {
        width: 32px;
        height: 32px;
        border-radius: 20px;
        vertical-align: middle;
      }
      .user-login {
        line-height: 32px;
        vertical-align: middle;
      }
      .upload {
        position: relative;
        color: #fff;
        font-size: 14px;
        display: block;
        width: 100px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background: #fb7299;
        border-radius: 2px;
        margin-left: 14px;
      }

      /* 背景图 */
      .layer {
        width: 100%;
        height: 800px;
        background-image: url(./Screenshot_20200125_112706_tv.danmaku.bili.jpg);
      }
      .bili-banner {
        position: relative;
        top: -56px;
      }

      /* logo */
      .logo-img {
        position: relative;
        top: 60px;
        left: 110px;
      }
      </style>
    <style>
 {
margin: 0;
padding: 0;
}  
header {
position: relative;
width: 100%;
min-width: 1300px;
height: 170px;
margin: 0px;
padding: 0px;
background-color: aquamarine;
background-image: url(…/img/header-background-1.png);
background-repeat: no-repeat;
 background-position:center;
background-size: 100%;
}
nav{
width: 100%;
min-width: 1300px;
height: 90px;
background-color: rosybrown;
}
article{
width: 100%;
height: 3000px;
background-color:pink;
}
.article-left div{
position: fixed;
top: 400px;
left: 0px;
width: 30px;
height: 80px;
font-size: 16px;
text-align: center;
border: solid 1px gainsboro;
border-radius: 2px;
background-color: whitesmoke;
 box-shadow: #000000;
}
.article-left a{
text-decoration: none;
color: black;
}
.article-right img{
width: 70px;
position: fixed;
right: 80px;
top: 235px;
}
.article-right ul{
position: fixed;
right: 80px;
top: 250px;
width: 70px;
height: 500px;
 background-color: darkcyan;
list-style-type: none;
border: 2px solid gainsboro;
border-radius: 5px;
}
.article-right li{
width: 70px;
height: 25px;
 background-color: darkorange;
font-size: 12px;
color: #000000;
text-align: center;
line-height: 20px;
}
article-right a:hover{
color: dodgerblue;
}
.article-right a{
text-decoration: none;
color: #000000;
}
footer{
width: 100%;
height: 450px;
background-color: whitesmoke;
}

.header-Layout {
width: 100%;
min-width: 1300px;
height: 70px;
background-color: bisque;
}

.header-Layout div {
width: 33%;
min-width:33%;
height: 56px;
/* min-width: 500px;*/
border: 1px solid red;
float: left;
display: block;
margin: 6px auto;
line-height: 56px;
}

.header-Layout div:after {
clear: both;
}

.header-Layout-left ul {
list-style-type: none;
margin: 0 auto;
position: relative;
height: 56px;
line-height: 56px;
/* ling*/
min-width: 500px;
/* width: 40%;/
/ background-color: goldenrod;/
/ position: relative;*/
}

.header-Layout-left li {
height: 30px;
width: 53px;
margin-top: 13px;
/* border: 1px solid purple;*/
float: left;
text-align: center;
line-height: 30px;
overflow: hidden;
padding-left: 10px;
}

.header-Layout-left a,
.header-Layout-right a {
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0px 0px 5px black;
}

.header-Layout-left li:nth-child(3) {
width: 75px;
}

.header-Layout-left li:first-child {
width: 65px;
text-align: end;
text-align:-moz-center;
padding-right: 20px;
position: absolute;
right: 10px;
background-image: url(…/img/TV.png);
background-size: 65%;
background-repeat: no-repeat;
background-position-x: -5px;
background-position-y: -10px;
}

.header-Layout-left li:last-child {
width: 85px;
text-align: end;
background-image: url(…/img/phone.png);
background-size: 43%;
background-repeat: no-repeat;
background-position-x: -5px;
background-position-y: -3px;
}

#game-center {
position: absolute;
left: 400px;
top: 400px;
/* display: block;*/
width: 400px;
height: 300px;
background-color: cornflowerblue;
}

#sharp-corner {
position: absolute;
height: 0px;
width: 0px;
line-height: 0px;
border-bottom: 20px solid gold;
border-left: 20px solid gold;
border-right: 20px solid gold;
/* z-index: 2;*/
left: 400px;
top: 500px top-30px;
}

.input-11 {
width: 450px;
height: 40px;
border: 1px solid darkgray;
border-radius: 2px;
margin-left: 5px;
background-color: yellowgreen;
}

.submit-11 {
width: 40px;
height: 40px;
margin-left: -5px;
/* background-color: gainsboro;*/
background-image: url(…/img/search-black.png);
background-position: center;
background-size: 90%;
background-repeat: no-repeat;
background-position-x: -5px;
background-position-y: -3px;
border: none;
}

.submit-11:hover {
background-image: url(…/img/search-blue.png);
background-position: center;
background-size: 90%;
background-repeat: no-repeat;
}

.header-Layout-right {
min-width: 450px;
height: 50px;
/* background-color: fuchsia;*/
}

.header-Layout-right ul {
list-style-type: none;
}

.header-Layout-right li {
width: 52px;
height: 40px;
margin-top: 6px;
background-color: darkorange;
float: left;
/* border: solid grey 1px;*/
text-align: center;
line-height: 40px;
}

.header-Layout-right li:nth-child(7) {
width: 60px;
}

/*.header-Layout-right li:last-child{

}*/

.header-Layout-right button {
width: 100px;
height: 40px;
margin-left: 10px;
background-color: #FB7299;
border-radius: 2px;
border: 0px;
margin: auto;
}

.header-Layout-right button a {
text-decoration: none;
color: white;
line-height: 40px;
text-align: center;
text-shadow: none;
}

.header-Layout-right button:hover {}

.header-Layout-right li img {
border-radius: 50%;
overflow: hidden;
height: 50px;
}

.header-Layout-right a{
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0px 0px 5px black;
}



.nav-left {
width: 26%;
height: 70px;
/* border: solid 1px black;*/
background-color: tomato;
display: block;
float: left;
}

.nav-left:after {
clear: both;
}

.nav-left ul {
list-style-type: none;
/* background-color: royalblue;*/
margin-right: px;
}

.nav-left li {
width: 55px;
height: 70px;
background-color: chartreuse;
/* border: solid 1px black;*/
margin-right: 5px;
float: right;
text-align: center;
line-height: 120px;
}

.nav-left li a {
text-decoration: none;
font-size: 15px;
color: black;
}

.nav-left li a:hover {
color: royalblue;
}

.navleft-images-A {
width: 60px;
height: 60px;
/* background-color: hotpink;*/
background-image: url(…/img/home.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}

.navleft-images-B {
width: 60px;
height: 60px;
background-color: hotpink;
background-image: url(…/img/dynamic.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}

.navleft-images-C {
width: 60px;
height: 60px;
background-color: hotpink;
background-image: url(…/img/ranking-list.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}

.navleft-images-D {
width: 60px;
height: 60px;
background-color: hotpink;
background-image: url(…/img/channel.png);
background-position: top;
background-size: 85%;
background-repeat: no-repeat;
}

.nav-middle {
width: 49%;
height: 70px;
border: solid 1px red;
background-color: palegreen;
display: block;
float: left;
border-left-color: #E7E7E7 solid 1px;
border-right-color: #E7E7E7 solid 1px;
}

.nav-middle:after {
clear: both;
}

.nav-middle ul {
list-style-type: none;
background-color: #FB7299;
/* margin-left: 14px;*/
}

.nav-middle li {
width: 79px;
height: 30px;
margin-bottom: 5px;
padding-left: 5px;
/* background-color: thistle;/
/ border: solid 1px black;*/
float: left;
line-height: 30px;
text-align: left;
}

.nav-middle li:nth-child(9) {
width: 85px;
}

.nav-middle li:nth-child(10) {
width: 98px;
}

.nav-middle a {
text-decoration: none;
font-size: 14px;
color: #000000;
}

.nav-middle a:hover {
color: cornflowerblue;
}

.nav-middle-number {
font-size: 14px;
background-color: #73C9E5;
border-radius: 3px;
line-height: 30px;
color: white;
}

.nav-middle li:after {
clear: both;
}

.nav-right {
width: 19%;
height: 70px;
border: solid 1px teal;
background-color: deeppink;
display: block;
float: left;
}

.nav-right ul {
list-style-type: none;
background-color: yellow;
/* margin-left: 10px;*/
width: 87%;
}

.nav-right li {
width: 58px;
height: 30px;
margin-bottom: 5px;
margin-right: 2px;
background-color: thistle;
border: solid 1px black;
float: left;
line-height: 30px;
text-align: right;
}

.nav-right li:nth-child(3) {
width: 88px;
}

.nav-right li:nth-child(6) {
width: 120px;
}

.navright-image-A {
background-image: url(…/img/spical-column.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
}

.navright-image-B {
background-image: url(…/img/activities.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
}

.navright-image-C {
background-image: url(…/img/small-dark-room.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}

.navright-image-D {
background-image: url(…/img/direct-seeding.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}

.navright-image-E {
background-image: url(…/img/classroom.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}

.navright-image-F {
background-image: url(…/img/music-plus.png);
background-position: left;
background-size: 48%;
background-repeat: no-repeat;
text-align: right;
}

.nav-right li a {
text-decoration: none;
font-size: 15px;
color: black;
}

.nav-left li a:hover {
color: royalblue;
}

.nav-right li a:hover {
color: royalblue;
}

.nav-right:after {
clear: both;
}


.article-left {
width: 10%;
height: 3000px;
background-color: paleturquoise;
float: left;
display: block;
}

.article-left:after {
clear: both;
}

.article-middle {
width: 80%;
height: 2000px;
background-color: #6495ED;
float: left;
display: block;
margin-top: 10px;
}

.article-middle:after {
clear: both;
}

.article-right {
width: 10%;
height: 3000px;
background-color: paleturquoise;
float: left;
display: block;
}

.article-right:after {
clear: both;
}

.article-middle-00 {
width: 100%;
height: 335px;
background-color: chartreuse;
}

.articlemiddle-00-left {
width: 45%;
height: 300px;
background-color: red;
background-image: url(…/img/动物成精.png);
background-size: 120%;
background-repeat: no-repeat;
background-position: top;
float: left;
}

.articlemiddle-00-left:after {
clear: both;
}

.articlemiddle-00-right {
width: 55%;
height: 300px;
background-color: plum;
float: left;
}

.articlemiddle-00-right:after {
clear: both;
}

.articlemiddle-00-right ul {
width: 100%;
height: 300px;
list-style-type: none;
/* background-color: #6495ED;*/
}

.articlemiddle-00-right li {
width: 210px;
height: 140px;
float: left;
margin-left: 10px;
margin-bottom: 10px;
background-color: gold;
background-image: url(./006mowZngy1gk763lxsekg309g06bx6p.gif);
background-position: center;
background-size: 115%;
background-repeat: no-repeat;
background: no-repeat 100% center;
overflow: hidden;
}

.articlemiddle-00-right ul a {
width: 210px;
height: 130px;
position: relative;
}

.articlemiddle-00-right ul p {
position: absolute;
/* top: 27px;left: 0px;*/
top: 133px;
left: 0px;
width: 210px;
height: 140px;
background-color: black;
opacity: 0.5;
background: rgba(0, 0, 0, 0.5);
}

.articlemiddle-00-right ul span {
color: white;
}

@keyframes uphill {
from {
top: 133px;
}
to {
top: 17px;
}
}

.articlemiddle-00-right li:hover p {
animation: uphill 1s;
top: 17px;
}

.article-middle-01 {
width: 100%;
height: 285px;
background-color: navajowhite;
}

.article-middle-01-A {
width: 100%;
height: 50px;
background-color: #98FB98;
margin-bottom: 10px;
}

.article-middle-01-A ul {
list-style-type: none;
}

.article-middle-01-A li {
float: left;
width: 165px;
height: 50px;
margin-left: 10px;
background-color: darkorange;
line-height: 50px;
text-align: right;
}

.article-middle-01-A li a {
text-decoration: none;
color: black;
}

.article-middle-01-A li a:hover {
color: deepskyblue;
}

.article-middle-01-A li:first-child {
width: 100px;
}

.article-middle-01-A li:last-child {
width: 180px;
}

.article-middle-01-A li:after {
clear: both;
}

.article-middle01-Aleft {
background-image: url(…/img/大喇叭.png);
background-size: 50%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}

.article-middle01-Amid {
background-image: url(…/img/火苗.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
}

.article-middle01-Aright {
float: right;
width: 350px;
height: 50px;
/* background-color: hotpink;*/
}

.article-middle01-Aright button {
width: 350px;
height: 40px;
margin-top: 5px;
background-color: #F4F4F4;
border-radius: 3px;
border: 1px solid gainsboro;
font-size: 17px;
}

.article-middle01-Aright button:hover {
color: dodgerblue;
}

.article-middle01-Aright:after {
clear: both;
}

.article-middle-01-B {
width: 100%;
height: 235px;
/* background-color: lightcoral;*/
/**/
margin: 0;
padding: 0;
}

.article-middle-01-B-left {
width: 70%;
height: 200px;
margin-top: 15px;
background-color: cyan;
float: left;
}

.article-middle-01-B-left:after {
clear: both;
}

.article-middle-01-B-left ul {
list-style-type: none;
}

.article-middle-01-B-left li {
width: 202px;
height: 200px;
margin-right: 10px;
background-color: tomato;
float: left;
}

.article-middle-01-B-left li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}

.article-middle-01-B-left a {
font-size: 17px;
text-decoration: none;
color: #000000;
}

.article-middle-01-B-left–top {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}

.article-middle-01-B-left ul a:hover {
color: dodgerblue;
}

.article-middle-01-B-left–bottom {
height: 38px;
width: 202px;
margin-top: 165px;
background-color: palevioletred;
color: darkgray;
font-size: 16px;
}

.article-middle-01-B-leftbottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
padding-top: -3px;
}

.article-middle-01-B-leftbottom a {
text-decoration: none;
color: darkgrey;
}

.article-middle-01-B-leftbottom a:hover {
color: dodgerblue;
}

.article-middle-01-B-right {
width: 28%;
height: 200px;
margin-top: 15px;
background-color: yellowgreen;
background-image: url(…/img/时空幻境.png);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
float: right;
}

.article-middle-01-B-right:after {
clear: both;
}

.article-middle-advertisementA {
width: 100%;
height: 100px;
background-color: fuchsia;
background-image: url(…/img/笔记本电脑广告.jpg);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
}

.article-middle-LivingStream {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}

.articlemiddle-LivingStream-left {
width: 70%;
height: 520px;
background-color: gold;
float: left;
}

.articlemiddle-LivingStream-left:after {
clear: both;
}

.articlemiddle-LivingStream-leftTop {
width: 100%;
height: 50px;
/* background-color: #98FB98;*/
margin-bottom: 10px;
}

.articlemiddle-LivingStream-leftTop ul {
list-style-type: none;
}

.articlemiddle-LivingStream-leftTop li {
float: left;
width: 165px;
height: 50px;
margin-left: 10px;
background-color: darkorange;
line-height: 50px;
text-align: right;
}

.articlemiddle-LivingStream-leftTop li a {
text-decoration: none;
color: black;
}

.articlemiddle-LivingStream-leftTop li a:hover {
color: deepskyblue;
}

.articlemiddle-LivingStream-leftTop li:first-child {
width: 150px;
}

.articlemiddle-LivingStream-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 450px;
text-align: left;
line-height: 50px;
background-color: turquoise;
}

.articlemiddle-LivingStream-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}

.articlemiddle-LivingStream-leftTop li:after {
clear: both;
}

.LivingStream-A1-left {
background-image: url(…/img/direct-seeding.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}

.articlemiddle-LivingStream-leftTop li {
float: left;
}

.articlemiddle-LivingStream-leftTop .button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
margin-right: 40px;
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}

.button-1:hover {
background-color: gainsboro;
}

.button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}

.button-2:hover {
background-color: gainsboro;
}

.articlemiddle-LivingStream-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
background-color: red;
float: left;
}

.articlemiddle-LivingStream-leftBottom:after {
clear: both;
}

.articlemiddle-LivingStream-leftBottom ul {
list-style-type: none;
}

.articlemiddle-LivingStream-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
background-color: tomato;
float: left;
}

.articlemiddle-LivingStream-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}

.articlemiddle-LivingStream-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}

.articlemiddle-LivingStream-leftBottomtop {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}

.articlemiddle-LivingStream-leftBottom ul a:hover {
color: dodgerblue;
}

.articlemiddle-LivingStream-leftBottombottom {
height: 38px;
width: 202px;
margin-top: 165px;
/* background-color: palevioletred;*/
color: darkgray;
}

.articlemiddle-LivingStream-leftBottombottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
padding-top: -3px;
}

.articlemiddle-LivingStream-leftBottombottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
margin-right: 5px;
}

.articlemiddle-LivingStream-leftBottombottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-LivingStream-leftBottombottom a:hover {
color: dodgerblue;
}

.article-middle-LivingStream-A1right {
width: 30%;
height: 520px;
background-color: yellowgreen;
float: left;
}

.article-middle-LivingStream-A1right:after {
clear: both;
}

.articlemiddle-LivingStream-A1right-top {
width: 100%;
height: 50px;
/* background-color: thistle;*/
}

.articlemiddle-LivingStream-A1right-top span {
margin-right: 20px;
font-size: 13px;
line-height: 50px;
text-align: center;
}

.articlemiddle-LivingStream-A1right-top a {
list-style-type: none;
}

.articlemiddle-LivingStream-A1right-bottom {
width: 100%;
height: 470px;
}

.articlemiddle-LivingStream-A1right-bottom img {
margin-top: 15px;
width: 102%;
}



.article-middle-Animation {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}

.articlemiddle-Animation-left {
width: 70%;
height: 520px;
background-color: gold;
float: left;
}

.articlemiddle-Animation-left:after {
clear: both;
}

.articlemiddle-Animation-leftTop {
width: 100%;
height: 50px;
background-color: #98FB98;
margin-bottom: 10px;
}

.articlemiddle-Animation-leftTop ul {
list-style-type: none;
}

.articlemiddle-Animation-leftTop li {
float: left;
width: 165px;
height: 50px;
margin-left: 10px;
/* background-color: darkorange;*/
line-height: 50px;
text-align: center;
}

.articlemiddle-Animation-leftTop li a {
text-decoration: none;
color: black;
}

.articlemiddle-Animation-leftTop li a:hover {
color: deepskyblue;
}

.articlemiddle-Animation-leftTop li:first-child {
width: 150px;
}

.articlemiddle-Animation-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 450px;
text-align: left;
line-height: 50px;
/* background-color: turquoise;*/
}

.articlemiddle-Animation-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}

.articlemiddle-Animation-leftTop li:after {
clear: both;
}

.Animation-A1-left {
background-image: url(…/img/动画图标.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}

.articlemiddle-Animation-leftTop li {
float: left;
}

.articlemiddle-Animation-leftTop .Animation-button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
margin-right: 40px;
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}

.Animation-button-1:hover {
background-color: gainsboro;
}

.Animation-button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}

.Animation-button-2:hover {
background-color: gainsboro;
}

.articlemiddle-Animation-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
background-color: rgb(245, 241, 11);
float: left;
}

.articlemiddle-Animation-leftBottom:after {
clear: both;
}

.articlemiddle-Animation-leftBottom ul {
list-style-type: none;
}

.articlemiddle-Animation-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
/* background-color: tomato;*/
float: left;
}

.articlemiddle-Animation-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}

.articlemiddle-Animation-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}

.articlemiddle-Animation-leftBottomtop {
height: 50px;
width: 202px;
margin-top: -5px;
background-color: thistle;
font-size: 17px;
}

.articlemiddle-Animation-leftBottom ul a:hover {
color: dodgerblue;
}

.articlemiddle-Animation-leftBottombottom {
height: 38px;
width: 202px;
margin-top: 165px;
background-color: palevioletred;
color: darkgray;
}

.articlemiddle-Animation-leftBottombottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
padding-top: -3px;
}

.articlemiddle-Animation-leftBottombottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
margin-right: 5px;
}

.articlemiddle-Animation-leftBottombottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-Animation-leftBottombottom a:hover {
color: dodgerblue;
}

.article-middle-Animation-A1right {
width: 30%;
height: 520px;
background-color: yellowgreen;
float: left;
}

.article-middle-Animation-A1right:after {
clear: both;
}

.articlemiddle-Animation-A1right-top {
width: 100%;
height: 50px;
background-color: thistle;
font-size: 25px;
line-height: 50px;
display: block;
position: relative;
}

.articlemiddle-Animation-A1right-top button{
position: absolute;
right: 0px;
width: 70px;
height: 30px;
margin-top: 10px;
/* margin-left: 100px;/
border: 1px solid darkgray;
/ text-align: right;*/
border-radius: 2px;
}
.articlemiddle-Animation-A1right-top button:hover{
background-color: gainsboro;
}
.articlemiddle-Animation-A1right-top a {
list-style-type: none;
}

.articlemiddle-Animation-A1right-bottom {
width: 100%;
height: 470px;
}

.articlemiddle-Animation-A1right-bottom img {
margin-top: 15px;
width: 102%;
}
.articlemiddle-Animation-A1right-bottom ul{
list-style-type: none;
}
.articlemiddle-Animation-A1right-bottom li{
float: left;
width: 100%;
height: 40px;
margin-bottom: 5px;
/* background-color: orchid;/
font-size: 16px;
line-height: 40px;
text-align: left;
overflow: hidden;
}
.articlemiddle-Animation-A1right-bottom li a{
text-decoration: none;
color: #000000;
}
.articlemiddle-Animation-A1right-bottom a:hover{
color: dodgerblue;
}
.articlemiddle-Animation-A1right-bottom li:first-child{
width: 100%;
height: 100px;
/background-color: sandybrown;/
}
.Animation-ranklistNumber-topthree{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/ background-color: dodgerblue;/
color: white;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.Animation-ranklistNumber-topthree:after{
clear: both;
}
.Animation-ranklistNumber-Topest{
width: 100%;
height: 100px;
/background-color: #F79909;/
}
.Animation-ranklistNumber-TopestLeft{
float: left;
width: 45%;
height: 100px;
/ background-color: #FFC0CB;*/

}
.Animation-ranklistNumber-TopestLeft img{
width: 100%;

}
.Animation-ranklistNumber-TopestLeft:after{
clear: both;
}
.Animation-ranklistNumber-TopestRight{
float: right;
width: 45%;
height: 100px;
background-color: teal;
}

.Animation-ranklistNumber-TopestRight:after{
clear: both;
}
.TopestRight-A{
width: 100%;
height: 70px;
font-size: 16px;
}
.TopestRight-A a{
list-style-type: none;
}
.TopestRight-A:hover{
color: dodgerblue;
}
.TopestRight-B{
width: 100%;
height: 70px;

font-size: 14px;
color: gainsboro;
}
.Animation-ranklistNumber-extra{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
background-color: transparent;
color: darkgray;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}

.article-middle-advertisementB{
width: 100%;
height: 100px;
/* background-color: fuchsia;*/
background-image: url(…/img/横条广告2.jpg);
background-size: 100%;
background-position: top;
background-repeat: no-repeat;
}

.article-middle-Domestic {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}

.articlemiddle-Domestic-left {
width: 70%;
height: 520px;
/* background-color: gold;*/
float: left;
}

.articlemiddle-Domestic-left:after {
clear: both;
}

.articlemiddle-Domestic-leftTop {
width: 100%;
height: 50px;
/* background-color: #98FB98;*/
margin-bottom: 10px;
}

.articlemiddle-Domestic-leftTop ul {
list-style-type: none;
}

.articlemiddle-Domestic-leftTop li {
float: left;
width: 165px;
height: 50px;
margin-left: 10px;
/* background-color: darkorange;*/
line-height: 50px;
text-align: right;
}

.articlemiddle-Domestic-leftTop li a {
text-decoration: none;
color: black;
}

.articlemiddle-Domestic-leftTop li a:hover {
color: deepskyblue;
}

.articlemiddle-Domestic-leftTop li:first-child {
width: 200px;
}

.articlemiddle-Domestic-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 400px;
text-align: left;
line-height: 50px;
/* background-color: turquoise;*/
}

.articlemiddle-Domestic-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}

.articlemiddle-Domestic-leftTop li:after {
clear: both;
}

.Domestic-A1-left {
width: 500px;
background-image: url(…/img/国漫.png);
background-size: 20%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}

.articlemiddle-Domestic-leftTop li {
float: left;
}

.articlemiddle-Domestic-leftTop .Domestic-button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
margin-right: 40px;
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}

.Domestic-button-1:hover {
background-color: gainsboro;
}

.Domestic-button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}

.Domestic-button-2:hover {
background-color: gainsboro;
}

.articlemiddle-Domestic-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
background-color: red;
float: left;
}

.articlemiddle-Domestic-leftBottom:after {
clear: both;
}

.articlemiddle-Domestic-leftBottom ul {
list-style-type: none;
}

.articlemiddle-Domestic-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
/* background-color: tomato;*/
float: left;
}

.articlemiddle-Domestic-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}

.articlemiddle-Domestic-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}

.articlemiddle-Domestic-leftBottomtop {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}

.articlemiddle-Domestic-leftBottom ul a:hover {
color: dodgerblue;
}

.articlemiddle-Domestic-leftBottombottom {
height: 38px;
width: 202px;
margin-top: 165px;
background-color: palevioletred;
color: darkgray;
}

.articlemiddle-Domestic-leftBottombottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
padding-top: -3px;
}

.articlemiddle-Domestic-leftBottombottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
margin-right: 5px;
}

.articlemiddle-Domestic-leftBottombottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-Domestic-leftBottombottom a:hover {
color: dodgerblue;
}

.article-middle-Domestic-A1right {
width: 30%;
height: 520px;
background-color: yellowgreen;
float: left;
}

.article-middle-Domestic-A1right:after {
clear: both;
}

.articlemiddle-Domestic-A1right-top {
width: 100%;
height: 50px;
/* background-color: thistle;*/
font-size: 25px;
line-height: 50px;
display: block;
position: relative;
}

.articlemiddle-Domestic-A1right-top button{
position: absolute;
right: 0px;
width: 70px;
height: 30px;
margin-top: 10px;
/* margin-left: 100px;/
border: 1px solid darkgray;
/ text-align: right;*/
border-radius: 2px;
}
.articlemiddle-Domestic-A1right-top button:hover{
background-color: gainsboro;
}
.articlemiddle-Domestic-A1right-top a {
list-style-type: none;
}

.articlemiddle-Domestic-A1right-bottom {
width: 100%;
height: 470px;
}
.articlemiddle-Domestic-A1right-bottom ul{
list-style-type: none;
}
.articlemiddle-Domestic-A1right-bottom li{
float: left;
width: 100%;
height: 40px;
margin-bottom: 5px;
/* background-color: orchid;/
font-size: 16px;
line-height: 40px;
text-align: left;
overflow: hidden;
}
.articlemiddle-Domestic-A1right-bottom li a{
text-decoration: none;
color: #000000;
}
.articlemiddle-Domestic-A1right-bottom a:hover{
color: dodgerblue;
}
.articlemiddle-Domestic-A1right-bottom li:first-child{
width: 100%;
height: 100px;
/ background-color: sandybrown;*/
}
.Domestic-ranklistNumber-topthree{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
background-color: rgb(183, 10, 169);
color: white;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.Domestic-ranklistNumber-topthree:after{
clear: both;
}
.Domestic-ranklistNumber-Topest{
width: 100%;
height: 100px;
background-color: #F79909;
}
.Domestic-ranklistNumber-TopestLeft{
float: left;
width: 45%;
height: 100px;
background-color: #FFC0CB;

}
.Domestic-ranklistNumber-TopestLeft img{
width: 100%;

}
.Domestic-ranklistNumber-TopestLeft:after{
clear: both;
}
.Domestic-ranklistNumber-TopestRight{
float: right;
width: 45%;
height: 100px;
background-color: teal;
}

.Domestic-ranklistNumber-TopestRight:after{
clear: both;
}
.TopestRight-A{
width: 100%;
height: 70px;
/* background-color: royalblue;/
font-size: 16px;
}
.TopestRight-A a{
list-style-type: none;
}
.TopestRight-A:hover{
color: dodgerblue;
}
.TopestRight-B{
width: 100%;
height: 70px;
/ background-color: #7B68EE;/
font-size: 14px;
color: gainsboro;
}
.Domestic-ranklistNumber-extra{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/ background-color: transparent;*/
color: darkgray;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}


.article-middle-Music {
width: 100%;
height: 520px;
/* background-color: rosybrown;*/
}

.articlemiddle-Music-left {
width: 70%;
height: 520px;
background-color: gold;
float: left;
}

.articlemiddle-Music-left:after {
clear: both;
}

.articlemiddle-Music-leftTop {
width: 100%;
height: 50px;
/* background-color: #98FB98;*/
margin-bottom: 10px;
}

.articlemiddle-Music-leftTop ul {
list-style-type: none;
}

.articlemiddle-Music-leftTop li {
float: left;
width: 165px;
height: 50px;
margin-left: 10px;
/* background-color: darkorange;*/
line-height: 50px;
text-align: right;
}

.articlemiddle-Music-leftTop li a {
text-decoration: none;
color: black;
}

.articlemiddle-Music-leftTop li a:hover {
color: deepskyblue;
}

.articlemiddle-Music-leftTop li:first-child {
width: 100px;
}

.articlemiddle-Music-leftTop li:nth-child(2) {
font-size: 14px;
color: black;
width: 500px;
text-align: left;
line-height: 50px;
/* background-color: turquoise;*/
}

.articlemiddle-Music-leftTop li:last-child {
width: 180px;
text-align: right;
margin-left: 40px;
}

.articlemiddle-Music-leftTop li:after {
clear: both;
}

.Music-A1-left {
width: 500px;
background-image: url(…/img/音乐.png);
background-size: 50%;
background-position: left;
background-repeat: no-repeat;
font-size: 25px;
font-weight: 500;
}

.articlemiddle-Music-leftTop li {
float: left;
}

.articlemiddle-Music-leftTop .Music-button-1 {
width: 70px;
height: 30px;
margin-top: 10px;
margin-right: 40px;
background-image: url(…/img/刷新.png);
background-size: 30%;
background-position: left;
background-repeat: no-repeat;
text-align: right;
border-radius: 2px;
border: 1px solid gainsboro;
color: black;
}

.Music-button-1:hover {
background-color: gainsboro;
}

.Music-button-2 {
width: 70px;
height: 30px;
margin-top: 10px;
text-align: center;
border-radius: 2px;
border: 1px solid gainsboro;
}

.Music-button-2:hover {
background-color: gainsboro;
}

.articlemiddle-Music-leftBottom {
width: 100%;
height: 200px;
margin-top: 15px;
background-color: red;
float: left;
}

.articlemiddle-Music-leftBottom:after {
clear: both;
}

.articlemiddle-Music-leftBottom ul {
list-style-type: none;
}

.articlemiddle-Music-leftBottom li {
width: 202px;
height: 200px;
margin-right: 10px;
/* background-color: tomato;*/
float: left;
}

.articlemiddle-Music-leftBottom li img {
width: 202px;
/* height: 200px;*/
z-index: -1;
}

.articlemiddle-Music-leftBottom a {
font-size: 17px;
text-decoration: none;
color: #000000;
}

.articlemiddle-Music-leftBottomtop {
height: 50px;
width: 202px;
margin-top: -5px;
background-color: thistle;
font-size: 17px;
}

.articlemiddle-Music-leftBottom ul a:hover {
color: dodgerblue;
}

.articlemiddle-Music-leftBottombottom {
height: 38px;
width: 202px;
margin-top: 165px;
background-color: palevioletred;
color: darkgray;
}

.articlemiddle-Music-leftBottombottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
font-size: 16px;
/* line-height: ;*/
padding-top: -3px;
}

.articlemiddle-Music-leftBottombottom p {
font-size: 14px;
color: lightgray;
margin-left: 10px;
margin-right: 5px;
}

.articlemiddle-Music-leftBottombottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-Music-leftBottombottom a:hover {
color: dodgerblue;
}

.article-middle-Music-A1right {
width: 30%;
height: 520px;
/* background-color: yellowgreen;*/
float: left;
}

.article-middle-Music-A1right:after {
clear: both;
}

.articlemiddle-Music-A1right-top {
width: 100%;
height: 50px;
background-color: thistle;
font-size: 25px;
line-height: 50px;
display: block;
position: relative;
}

.articlemiddle-Music-A1right-top button{
position: absolute;
right: 0px;
width: 70px;
height: 30px;
margin-top: 10px;
/* margin-left: 100px;/
border: 1px solid darkgray;
/ text-align: right;*/
border-radius: 2px;
}
.articlemiddle-Music-A1right-top button:hover{
background-color: gainsboro;
}
.articlemiddle-Music-A1right-top a {
list-style-type: none;
}

.articlemiddle-Music-A1right-bottom {
width: 100%;
height: 470px;
}
.articlemiddle-Music-A1right-bottom ul{
list-style-type: none;
}
.articlemiddle-Music-A1right-bottom li{
float: left;
width: 100%;
height: 40px;
margin-bottom: 5px;
background-color: orchid;
font-size: 16px;
line-height: 40px;
text-align: left;
overflow: hidden;
}
.articlemiddle-Music-A1right-bottom li a{
text-decoration: none;
color: #000000;
}
.articlemiddle-Music-A1right-bottom a:hover{
color: dodgerblue;
}
.articlemiddle-Music-A1right-bottom li:first-child{
width: 100%;
height: 100px;
/* background-color: sandybrown;/
}
.Music-ranklistNumber-topthree{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/background-color: dodgerblue;/
color: white;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.Music-ranklistNumber-topthree:after{
clear: both;
}
.Music-ranklistNumber-Topest{
width: 100%;
height: 100px;
/ background-color: #F79909;*/
}
.Music-ranklistNumber-TopestLeft{
float: left;
width: 45%;
height: 100px;
background-color: #FFC0CB;

}
.Music-ranklistNumber-TopestLeft img{
width: 100%;

}
.Music-ranklistNumber-TopestLeft:after{
clear: both;
}
.Music-ranklistNumber-TopestRight{
float: right;
width: 45%;
height: 100px;
background-color: teal;
}

.Music-ranklistNumber-TopestRight:after{
clear: both;
}
.TopestRight-A{
width: 100%;
height: 70px;
/* background-color: royalblue;/
font-size: 16px;
}
.TopestRight-A a{
list-style-type: none;
}
.TopestRight-A:hover{
color: dodgerblue;
}
.TopestRight-B{
width: 100%;
height: 70px;
/background-color: #7B68EE;/
font-size: 14px;
color: gainsboro;
}
.Music-ranklistNumber-extra{
width: 30px;
height: 30px;
margin-top: 5px;
margin-right: 5px;
/background-color: transparent;/
color: darkgray;
float: left;
line-height: 30px;
text-align: center;
font-weight: bold;
border-radius: 2px;
}
.footer-top{
width: 100%;
height: 225px;
/background-color: tomato;/
}
.footer-top ul{
list-style-type: none;
}
.footer-top li{
float: left;
width: 33%;
height: 225px;
/background-color: hotpink;/
/ border: 1px solid gold;/
/border-right: 1px solid lightgray;/
}
.footer-top li:after{
clear: both;
}
.footer-top li:last-child{
border:none;
}
.footer-top-A{
width: 100%;
height: 50px;
/ border: 1px solid gold;/
/ background-color:peachpuff;*/

			line-height: 50px;
			color: gray;
}
.footer-top-B{
width: 100%;
height: 175px;
/* background-color: red;*/

}
.footer-top-B ul{
list-style-type: none;
float: left;
width: 150px;
height: 175px;
/* background-color: teal;*/
}
.footer-top-B ul:after{
clear: both;
}
.footer-top-B li{
width: 140px;
height: 30px;
background-color: antiquewhite;
margin-bottom: 5px;
line-height: 30px;
}
.footer-top-B a{
text-decoration: none;
color: black;
}
.footer-top-B a:hover{
color: dodgerblue;
}
.footer-top-B-ul2{
float: left;
}
.footer-top-B-ul2:after{
clear: both;
}

.footer-top-left{
list-style-type: none;
width: 450px;
height: 70px;
border: none;
margin-left: 50px;
}
.footer-top-left li{
width: 80px;
height: 225px;
margin-left: 10px;
border: none;
/* background-color: rosybrown;/
}
.footer-top-left img{
width: 100%;
margin-top: 50px;
}
.footer-top-left p{
font-size: 17px;
color: #000000;
font-weight: 400;
text-align: center;
}
.footer-top-left p:hover{
color: dodgerblue;
}
.footer-top-left a{
text-decoration: none;
}
.footer-bottom{
width: 100%;
height: 225px;
/ background-color: gray;/
/line-height: 50px;/
color: gray;
}
.footer-bottom-left{
width: 7%;
height: 225px;
/background-color: thistle;/
margin-left: 150px;
float: left;
}
.footer-bottom-left:after{
clear: both;
}
.footer-bottom-left img{
width: 100%;
}
.footer-bottom-right{
width: 83%;
height: 225px;
/background-color: orchid;/
font-size: 13px;
color: gray;
float: right;
}
.footer-bottom-right:after{
clear: both;
}
.footer-bottom-right span{
height: 20px;
/ background-color: white;*/
margin-bottom: 10px;
margin-right: 5px;
display: inline-block;
}
.footer-bottom-right a{
text-decoration: none;
color: gray;
}
.footer-bottom-right a:hover{
color: dodgerblue;
}

    </style>
  
  </head>




  <body>
    <div class="nav">
      <div class="mini-header">
        <div class="mini-header-content">
          <div class="nav-link">
            <ul class="nav-link-ul">
              <li class="nav-link-item">
                <img
                  class="nav-link-item-img"
                  src="./006mowZngy1gk763lxsekg309g06bx6p.gif"
                  alt=""
                />
                
                <a href="#">主站</a>
              </li>
              <li class="nav-link-item">
                <a href="#">番剧</a>
              </li>
              <li class="nav-link-item">
                <a href="#">游戏中心</a>
              </li>
              <li class="nav-link-item">
                <a href="#">直播</a>
              </li>
              <li class="nav-link-item">
                <a href="#">会员购</a>
              </li>
              <li class="nav-link-item">
                <a href="#">漫画</a>
              </li>
              <li class="nav-link-item">
                <a href="#">赛事</a>
              </li>
              <li class="nav-link-item">
                <a href="#">鬼畜</a>
              </li>
              <li class="nav-link-item">
                <span>
                  <div>
                    <img
                      class="nav-link-item-img"
                      src="./006mowZngy1gk763lxsekg309g06bx6p.gif"
                      alt=""
                    />
                    下载APP
                  </div>
                </span>
              </li>
            </ul>
          </div>
          <div class="nav-search-box">
            <div class="nav-search">
              <form id="nav-searchform">
                <input
                  class="search-input"
                  type="text"
                  placeholder="铃芽之旅破内地动漫电影票房纪录"
                />
                <div class="nav-search-btn">
                  <button>
                    <img
                      class="nav-search-btn-img"
                      src="./006mowZngy1gk763lxsekg309g06bx6p.gif"
                      alt=""
                    />
                  </button>
                </div>
              </form>
            </div>
          </div>
          <div class="nav-user-center">
            <div class="user-con">
              <div class="item">
                <span>
                  <img
                    class="user-img"
                    src="https://static.hdslb.com/images/akari.jpg"
                    alt=""
                  />
                  <a class="user-login" href="#">登录</a>
                </span>
              </div>
              <div class="item">
                <span><a class="user-login" href="#">注册</a></span>
              </div>
              <div>
                <span class="upload">投稿</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bili-banner">
          <!-- <div class="layer">
              <img
                src="https://i0.hdslb.com/bfs/archive/0b7eef054547750e6bfeff6f36c83e83d2a058fb.png"
                alt=""
                style="
                  transform: translate(0px, 0px) rotate(0deg);
                  height: 165px;
                  width: 100%;
                  background-size: cover;
                "
              />
            </div> -->

          <div class="layer">
            <div class="b-logo">
              <a href="https://www.bilibili.com/">
                <img
                  class="logo-img"
                  src="https://i0.hdslb.com/bfs/archive/622017dd4b0140432962d3ce0c6db99d77d2e937.png"
                  alt=""
                />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    


  <header>
    <div class="header-Layout">
        <div class="header-Layout-left">
            <ul>
                <li>
                    <a href="https://www.bilibili.com/">主站</a>
                </li>
                <li>
                    <a href="https://www.bilibili.com/anime/?spm_id_from=333.851.b_696e7465726e6
                        174696f6e616c486561646572.2" target="_blank">番剧</a>
                </li>
                <li>
                    <a href="https://game.bilibili.com/?spm_id_from=333.851.b_696e7465726e61
                        74696f6e616c486561646572.3" target="_blank">游戏中心</a>

                </li>
                <li>
                    <a href="https://live.bilibili.com/?spm_id_from=555.43.b_696e7465726e6
                        174696f6e616c486561646572.26" target="_blank">直播</a>
                </li>
                <li>
                    <a href="https://show.bilibili.com/platform/home.htm
                        l?msource=pc_web&spm_id_from=333.851.b_696e7465726e6174696f6e616c486561646572.5" target="_blank">会员购</a>
                </li>
                <li>
                    <a href="https://manga.bilibili.com/?from=bill_top_mnav&spm_id_from=333.851.b_696e
                        7465726e6174696f6e616c486561646572.6" target="_blank">漫画</a>
                </li>
            
                <li>
                    <a href="https://app.bilibili.com/?spm_id_from=333.851.b_696e7465726e617469
                        6f6e616c486561646572.8" target="_blank">下载APP</a>
                </li>
            </ul>
        </div>
        <div class="header-Layout-middle">
            <form action="">
                <input class="input-11" type="text" name="the-input" value="" placeholder="铃芽之旅最后场次" />
                <input type="submit" value="" class="submit-11" />
            </form>

        </div>
        <div class="header-Layout-right">
            <ul>
                <li>
                    
                    <a href=""><img src="./imskt=url&at=smstruct&key=aHR0cHM6Ly9pMC5oZHNsYi5(1).jpg" /></a>
                </li>
                <li>
                    <a href="https://account.bilibili.com/account/big" target="_blank">大会员</a>
                </li>
                <li>
                    <a href="https://message.bilibili.com/#/reply" target="_blank">消息</a>
                </li>
                <li>
                    <a href="https://t.bilibili.com/?spm_id_from=333.851.b_696e746
                        5726e6174696f6e616c486561646572.11" target="_blank">动态</a>
                </li>
                <li>
                    <a href="https://space.bilibili.com/369769759/favlist" target="_blank">收藏</a>
                </li>
                <li>
                    <a href="https://www.bilibili.com/account/history" target="_blank">历史</a>
                </li>
                <li>
                    <a href="https://member.bilibili.com/v2?spm_id_from=333.851.b_696e74657
                        26e6174696f6e616c486561646572.12#/home" target="_blank">创作中心</a>
                </li>
                
                <button><a href="https://member.bilibili.com/v2#/upload/video/frame">投稿</a></button>
            </ul>
        </div>
    </div>

</header>
<nav>
    <div class="nav-left">
        <ul>
            <li>
                <a href="https://www.bilibili.com/v/channel/218245?spm_id_from=333.851.b_7072696d61727950616765546162.4&tab=multiple" target="_blank">
                    <div class="navleft-images-D">
                        频道
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/ranking?spm_id_from=333.851.b_7072696d61727950616765546162.3" target="_blank">
                    <div class="navleft-images-C">
                        排行榜
                    </div>
                </a>
            </li>
            <li>
                <a href="https://t.bilibili.com/?spm_id_from=333.851.b_7072696d61727950616765546162.2" target="_blank">
                    <div class="navleft-images-B">
                        动态
                    </div>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/" target="_blank">
                    <div class="navleft-images-A">
                        首页
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="nav-middle">
        <ul>
            <li>
                <a href="https://www.bilibili.com/v/douga/?spm_id_from=333.851.b_7072696d6172794368616e6e656c4d656e75.1" target="_blank">
                    <span>动画</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/music/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.9" target="_blank">
                    <span>音乐</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/dance/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.24" target="_blank">
                    <span>舞蹈</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/technology/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.45" target="_blank">
                    <span>知识</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/life/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.57" target="_blank">
                    <span>生活</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/fashion/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.77" target="_blank">
                    <span>时尚</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/ent/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.83" target="_blank">
                    <span>娱乐</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/cinema/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.96" target="_blank">
                    <span>放映厅</span>
                    <span class="nav-middle-number">87</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/life/animal#/" target="_blank">
                    <span>动物圈</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <!--<li>
                <a href="https://www.bilibili.com/v/game/stand_alone#/"target="_blank">
                    <span>单机游戏</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>-->
            <li>
                <a href="https://www.bilibili.com/anime/?spm_id_from=333.6.b_7072696d6172794368616e6e656c4d656e75.8" target="_blank">
                    <span>番剧</span>
                    <span class="nav-middle-number">409</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/guochuang/?spm_id_from=666.4.b_7072696d6172794368616e6e656c4d656e75.26" target="_blank"></a>
                <span>国创</span>
                <span class="nav-middle-number">84</span>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/game/?spm_id_from=666.5.b_7072696d6172794368616e6e656c4d656e75.34" target="_blank">
                    <span>游戏</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <!--<li>
                <a href="https://www.bilibili.com/v/digital/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.49"target="_blank">
                    <span>数码</span>
                    <span class="nav-middle-number">939</span>
                </a>
            </li>-->
            <li>
                <a href="https://www.bilibili.com/v/kichiku/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.68" target="_blank">
                    <span>鬼畜</span>
                    <span class="nav-middle-number">896</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/information/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.83" target="_blank">
                    <span>资讯</span>
                    <span class="nav-middle-number">447</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/cinephile/?spm_id_from=333.5.b_7072696d6172794368616e6e656c4d656e75.87" target="_blank">
                    <span>影视</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/life/funny#/" target="_blank">
                    <span>搞笑</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/food" target="_blank">
                    <span>美食</span>
                    <span class="nav-middle-number">999+</span>
                </a>
            </li>
            <li>
                <a href="https://www.bilibili.com/v/life/daily/#/530003" target="_blank">
                    <span>VLOG</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="nav-right">
        <ul>
            <li>
                <a href="">
                    <div class="navright-image-A">专栏</div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="navright-image-B">活动</div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="navright-image-C">小黑屋</div>
                </a>
            </li>

            <li>
                <a href="">
                    <div class="navright-image-D">直播</div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="navright-image-E">课堂</div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="navright-image-F">音乐PLUS</div>
                </a>
            </li>
        </ul>
    </div>
</nav>
<article>
    <div class="article-left">
        <div><a href="https://www.bilibili.com/v/customer-service">
            联系客服</a></div>
    </div>
    <div class="article-middle">
        <div class="article-middle-00">
            <div class="articlemiddle-00-left">
            </div>
            <div class="articlemiddle-00-right">
                <ul>
                    <li>
                        <a href="https://www.bilibili.com/video/BV1jN41117UF/?spm_id_from=333.1007.tianma.1-2-2.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            <p>
                                <span>找两个王者solo,分别告诉他们对方是黄金<br>
                                <img src="./Screenshot_20190618_212616_tv.danmaku.bili.jpg" alt="My Image" style="width: 240px; height: 160px;">
                            <span style="border: 1px solid white;border-radius: 3px">up</span>西北孤狼-
                                <br>184.9w播放
                                </span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/video/BV1uN41117WQ/?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            <p>
                                <span>于嘉盛赞热火晋级:立大志者,不惟有超世之才,亦必有坚忍不拔之志<br>
                                <img src="./odHRwJTNBJTJGJTJGY21zLWJ1Y2tldC53cy4xMjYubmV0JTJG.jpg" alt="My Image" style="width: 240px; height: 160px;">
                            <span style="border: 1px solid white;border-radius: 3px">up</span>滚球体育
                                <br>13.5w播放
                                </span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/video/BV1RM4y1q7dQ/?spm_id_from=333.1007.tianma.6-2-20.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            <p>
                                <span>【舔狗之王】“谁没有为爱情受过伤?”<br>
                                <img src="./IMG_20200728_200716.png" alt="My Image" style="width: 240px; height: 160px;">
                            <span style="border: 1px solid white;border-radius: 3px">up</span>我叫孙火旺
                                <br>66.0w播放
                                </span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/video/BV1yM4y1b7vG/?spm_id_from=333.1007.tianma.9-1-31.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            <p>
                                <span>“都什么年代了还有人爱看纯爱番”<br>
                                <img src="./null-1de39576c8d1cf8a.jpg" alt="My Image" style="width: 240px; height: 160px;">
                            <span style="border: 1px solid white;border-radius: 3px">up</span>Anime_灰烬
                                <br>16.0w播放
                                </span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/video/BV1t24y1c7sk/?spm_id_from=333.1007.tianma.5-3-17.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            <p>
                                <span>“所以爱情啊,它苦涩如歌”<br>
                                <img src="./688312@1624976006@2.png" alt="My Image" style="width: 240px; height: 160px;">
                            <span style="border: 1px solid white;border-radius: 3px">up</span>银发的半精灵
                                <br>96.6w播放
                                </span>
                            </p>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/video/BV1nc411P7wt/?spm_id_from=333.1007.tianma.7-1-23.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            <p>
                                <span>“每年校园歌手大赛都有一个接近神的!”<br>
                                <img src="./null-71c681d7e959be56.jpg" alt="My Image" style="width: 240px; height: 160px;">
                            <span style="border: 1px solid white;border-radius: 3px">up</span>老橘长
                                <br>201.7w播放
                                </span>
                            </p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="article-middle-01">
            <div class="article-middle-01-A">
                <ul>
                    <li class="article-middle01-Aleft">推广</li>
                    <li class="article-middle01-Amid">
                        <a href="">纯爱战神大战牛头人</a>
                    </li>
                    <li class="article-middle01-Amid">
                        <a href="">欢迎来到实力至上主义教室</a>
                    </li>
                </ul>
                <div class="article-middle01-Aright">
                    <button>我们结婚吧!</button>
                </div>
            </div>

            <div class="article-middle-01-B">
                <div class="article-middle-01-B-left">
                    <ul>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1aP411R7pG/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./006mowZngy1gk763lxsekg309g06bx6p.gif" />
                                <div class="article-middle-01-B-left--top">
                                    马宝国跳 极乐净土
                                </div>
                                <div class="article-middle-01-B-left--bottom">
                                    <a href="https://space.bilibili.com/491671795/?s
                        pm_id_from=333.851.b_7265706f7274466972737432.7">
                                        <span>up</span>绫小路
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV18z4y187Ci/?spm_id_from=333.1007.tianma.14-3-53.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                    <img src="./imskt=url&at=smstruct&key=aHR0cHM6Ly9jLXNzbC5kdWl.jpg" />
                                <div class="article-middle-01-B-left--top">
                                    “送你上路,挚友”
                                </div>
                                <div class="article-middle-01-B-left--bottom">
                                    <a href="https://space.bilibili.com/491671795/?s
                        pm_id_from=333.851.b_7265706f7274466972737432.7">
                                        <span>    up</span>不哭大魔王
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1bT411b7qs/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./16825799691964292.jpg" />
                                <div class="article-middle-01-B-left--top">
                                    爆笑!小鬼居然还有这么多奇葩故事!一个视频带你了解“泰裤辣”爆红之路!
                                </div>
                                <div class="article-middle-01-B-left--bottom">
                                    <a href="https://space.bilibili.com/491671795/?s
                        pm_id_from=333.851.b_7265706f7274466972737432.7">
                                        <span></span>
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1AV4y1678L/?spm_id_from=333.1007.tianma.17-4-66.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./3621616286136602.png" alt="My Image" style="width: 240px; height: 160px;">
                                <div class="article-middle-01-B-left--top">
                                    "所以你宁愿错过也不愿主动,对吗?”
                                </div>
                                <div class="article-middle-01-B-left--bottom">
                                    <a href="https://space.bilibili.com/491671795/?s
                        pm_id_from=333.851.b_7265706f7274466972737432.7">
                                        <span>up</span>樱染祭
                                    </a>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <a href="https://www.bilibili.com/video/BV1Xo4y1x7Ek/?spm_id_from=333.1007.tianma.17-3-65.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                    <div class="article-middle-01-B-right">
                        <img src="./16985916128371862.png" alt="My Image" style="width: 400px; height: 160px;">
                        <div class="article-middle-01-B-left--top">
                           《晴天》“从前从前 有个人爱你很久”
                        </div>
                    </div>
                </a>
            </div>
        </div>

        <!--横条广告1-->
        <a href="https://pro.jd.com/mall/activ
        e/SiW9ix69AMqDQ9tVFcYZQntcSvP/index.html">
            <div class="article-middle-advertisementA"></div>
        </a>
        <!--直播板块-->
        <div class="article-middle-LivingStream">
            <div class="articlemiddle-LivingStream-left">
                <div class="articlemiddle-LivingStream-leftTop">
                    <ul>
                        <li class="LivingStream-A1-left">正在直播</li>
                        <li>
                            <p>当前共有 5946 个在线直播</p>
                        </li>
                        <li>
                            <a>
                                <button class="button-1">换一换</button>
                            </a>
                            <a href="https://live.bilibili.com/?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.2" target="_blank">
                                <button class="button-2">更多  ></button>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--第一行图片-->
                <div class="articlemiddle-LivingStream-leftBottom">
                    <ul>
                        <li>
                            <a href="https://live.bilibili.com/6?live_from=71002&visit_id=9o90ziiij300" target="_blank">
                                <img src="./EDG.jpg" alt="My Image" style="width: 200px; height: 160px;">
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                   2023LPL夏季赛
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
      
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://live.bilibili.com/27212793?hotRank=0&session_id=42959dbae2a618c11c28ae547d64783e_1D396761-38FC-4690-B2F7-4440A6747092&launch_id=1000229&live_from=71003">
                                <img src="./null-71c681d7e959be56.jpg "  alt="My Image" style="width: 200px; height: 160px;"/>
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                    给仙女喂点露水
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://live.bilibili.com/27316882?hotRank=0&session_id=033c95966861fca07ce9c1f68bf7124c_3F004B02-A668-4ED2-B7FB-54DCFFDDA70F&live_from=77002&visit_id=9o90ziiij300">
                                <img src="./Screenshot_20190618_212621_tv.danmaku.bili.jpg"  alt="My Image" style="width: 200px; height: 160px;"/>
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                    来跟姐姐一起过六一
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://live.bilibili.com/81414?hotRank=0&session_id=033c95966861fca07ce9c1f68bf7124c_116651E6-0BEB-4FF5-8CF1-2CAEEB696669&live_from=77002&visit_id=9o90ziiij300">
                                <img src="./1565671752.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                    B站最温柔的女人【5点二路】
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <!--第二行图片,直接复制上面一段代码-->
                <div class="articlemiddle-LivingStream-leftBottom">
                    <ul>
                        <li>
                            <a href="https://live.bilibili.com/25026709?hotRank=0&session_id=df03163c3d782892a949ec4bfb3d8339_B93ECBE2-1627-4524-9515-BCBA5F8D8074&live_from=77002&visit_id=9o90ziiij300">
                                <img src="./79681016672195952.png"  alt="My Image" style="width: 200px; height: 160px;"/>
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                    老嫂子快开炮!
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://live.bilibili.com/23970174?hotRank=0&session_id=df03163c3d782892a949ec4bfb3d8339_0402CEEC-AAA1-472F-9CB6-85642315461A&live_from=77002&visit_id=9o90ziiij300">
                                <img src="./cbbc2f8e298d75ec41b832619a2b3969.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                    峰哥亡命天涯-最新十天录播24小时大轮播
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://live.bilibili.com/25478844?hotRank=0&session_id=7f594d45fcc4132b7ade2aec81647843_66657320-BBB2-444C-B935-2A3B1B1D7080&launch_id=1000154&live_from=77002&visit_id=9o90ziiij300">
                                <img src="./null40ae85d7b4366198.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                    是你喜欢的甜御姐姐吗
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://live.bilibili.com/27841639?hotRank=0&session_id=4ec83d1c55544c8018f2958f15647843_0D9221D1-5112-476D-B1B5-E15399EA063A&launch_id=1000154&live_from=77002&visit_id=9o90ziiij300">
                                <img src="./Screenshot_20210821_093133_tv.danmaku.bili.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-LivingStream-leftBottom--top">
                                    近我者富 进来点关注!
                                </div>
                                <div class="articlemiddle-LivingStream-leftBottom--bottom">
                                    <a href="https://live.bilibili.com/22425416?spm_id_from=
                                333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="article-middle-LivingStream-A1right">
                <div class="articlemiddle-LivingStream-A1right-top">
                    <span><a>直播排行</a></span>
                    <span><a>关注的主播</a></span>
                    <span style="border-bottom: solid 1px dodgerblue;
                    color: dodgerblue;
                    padding-bottom: 5px;
                    ">
                    <a>为你推荐</a></span>
                </div>
                <div class="articlemiddle-LivingStream-A1right-bottom">
                    <a href="https://www.bilibili.com/video/BV1od4y1f7ua/?spm_id_from=333.1007.tianma.7-2-24.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                        <img src="./2809416289434962.png" alt="My Image" style="width: 350px; height: 300px;"/>
                    </a>
                </div>
            </div>
        </div>

        <!--动画板块-->
        <div class="article-middle-Animation">

            <div class="articlemiddle-Animation-left">
                <div class="articlemiddle-Animation-leftTop">
                    <ul>
                        <li class="Animation-A1-left">动画</li>
                        <li>
                            <!--	<p >当前共有 4468 个在线直播</p>-->
                        </li>
                        <li>
                            <a>
                                <button class="Animation-button-1">换一换</button>
                            </a>
                            <a href="https://www.bilibili.com/anime/?spm_id_from=333.1007.0.0">
                                <button class="Animation-button-2">更多  ></button>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--第一行图片-->
                <div class="articlemiddle-Animation-leftBottom">
                    <ul>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank">
                                <img src="./841916119142462.png"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    轰动全网!当初看过这片的人都说了句卧槽!
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                        <br>
                                        <!--<p>萌宠</p>-->
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/bangumi/play/ep748240?from_spmid=666.4.banner.2">
                                <img src="./imskt=url&at=smstruct&key=aHR0cDovL3BpYzM1Ni5uaXB.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    Dr.STONE 石纪元(第三季)
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV16s411r7vu/?spm_id_from=333.337.search-card.all.click">
                                <img src="./imskt=url&at=smstruct&key=aHR0cDovL2Itc3NsLmR1aXR.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    反叛的鲁路修
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/bangumi/play/ss25742?spm_id_from=333.337.0.0">
                                <img src="./imskt=url&at=smstruct&key=aHR0cDovL2kwLmhkc2xiLmN.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    强风吹拂
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <!--第二行图片,直接复制上面一段代码-->
                <div class="articlemiddle-Animation-leftBottom">
                    <ul>
                        <li>
                            <a href="https://www.bilibili.com/bangumi/play/ss34543?spm_id_from=333.337.0.0">
                                <img src="./imskt=url&at=smstruct&key=aHR0cHM6Ly9ia2ltZy5jZG4.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    来自深渊
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/bangumi/play/ss26283?spm_id_from=333.337.0.0">
                                <img src="./imskt=url&at=smstruct&key=aHR0cHM6Ly9ia2ltZy5jZG4(1).jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    五等分的花嫁
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1Pt41157sF/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./kkimgs.yisou.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    死亡笔记
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/bangumi/play/ss3467?theme=movie&spm_id_from=333.337.0.0">
                                <img src="./null-1de39576c8d1cf8a.jpg"  alt="My Image" style="width: 200px; height: 150px;"/>
                                <div class="articlemiddle-Animation-leftBottom--top">
                                    命运石之门
                                </div>
                                <div class="articlemiddle-Animation-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/777536/?spm_id_from=333.851.b_6269
                                        6c695f7265706f72745f646f756761.26" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

            </div>
            
            <div class="article-middle-Animation-A1right">
                <div class="articlemiddle-Animation-A1right-top">
                    排行榜
                    <a href="	https://www.bilibili.com/ranking/all/1/0/3?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.39">
                            <button style="margin-left: 10px;">更多 ></button>
                    </a>
                </div>
                <div class="articlemiddle-Animation-A1right-bottom">
                <ul>
                    <li>
                        <div class="Animation-ranklistNumber-topthree">1</div>
                        <div class="Animation-ranklistNumber-Topest">
                            <div class="Animation-ranklistNumber-TopestLeft">
                                <a target="_blank" href="https://www.bilibili.com/video/BV1Dz4y1Q7pi">
                                    <img src="./null184641b0663d7c39.jpg"/></a>
                            </div>
                        <div class="Animation-ranklistNumber-TopestRight">
                            <div class="TopestRight-A"><a href="https://www.bilibili.com/video/BV1Dz4y1Q7pi">你的名字</a></div>
                                <div class="TopestRight-B">综合得分:517.2万</div>
                        </div>
                        </div>
                        
                    </li>
                    <li>
                        <div class="Animation-ranklistNumber-topthree">2</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1d5411b745?spm_id_from
                            =333.851.b_62696c695f7265706f72745f646f756761.42">
                            学到了!柯南竟推理出小兰内
                        衣情况【阅片无数动漫篇10】</a></li>
                    <li>
                        <div class="Animation-ranklistNumber-topthree">3</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1Ms4y1A7eJ/?spm_id_from=333.1007.tianma.1-1-1.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            探秘纽约最贵餐厅!一顿饭吃了1200美金!!到底吃了点啥?
                        </a>
                        </li>
                    <li>
                        <div class="Animation-ranklistNumber-extra">4</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1di4y177n1?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.44">
                            蝙蝠侠:这个可比猫女带劲多了!
                        </a></li>
                    <li>
                        <div class="Animation-ranklistNumber-extra">5</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1Sa4y1g7e2/?spm_id_from=333.1007.tianma.1-3-3.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            一首《Barricades》带你感受一下地鸣的绝望与巨人的魅力!!!塔塔开!
                        </a>
                        </li>
                    <li>
                        <div class="Animation-ranklistNumber-extra">6</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1554y1y7hw?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.46">
                            舰长身份终于揭秘?!崩坏3新剧情福利全梳理!「崩坏3剧情讲堂#08」
                        </a>
                        </li>
                    <li>
                        <div class="Animation-ranklistNumber-extra">7</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1pK4y1a7Gu?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.47">
                            前方核能!让傲慢的神明彻底失业,她是象征恶魔的少女
                        </a>
                    </li>
                    <li>
                        <div class="Animation-ranklistNumber-extra">8</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1Vz4y1Z7LL?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.48">
                            当代大学生毕业现状</a>
                    </li>
                    <li>
                        <div class="Animation-ranklistNumber-extra">9</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1Ak4y1C7gK?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.50">
                            dio你这瓜保熟吗</a>
                    </li>
                </ul>
                </div>
            </div>
        
        </div>
    <!--横条广告2-->
        <a href="https://mz.tanzhouedu.com/?s=a88c93826434d765&track_id=HlKGoGdqtyuBhQYQ1WDD5gPPpiRBsVAS2nm0iD90Mrhg4CDd4_VfEcfyguwLi5l7Nh9PjyeCpiewP0HtENxSn2Y1TKY-PQMI92w78UORTh0IxjACOoctJeVzgfRZxdV49N2k_cuzVj
            Vyo5zEJ023dKCu2qrbr5KlqHiUKLnRwwEviaGIOBGx5U4P-6Djy3HG">
            <div class="article-middle-advertisementB"></div>
    </a>
  


    <!--音乐版块-->
    <div class="article-middle-Music">
            <div class="articlemiddle-Music-left">
                <div class="articlemiddle-Music-leftTop">
                    <ul>
                        <li class="Music-A1-left">音乐</li>
                        <li>
                            <!--<p>当前共有 4468 个在线直播</p>-->
                        </li>
                        <li>
                            <a>
                                <button class="Music-button-1">换一换</button>
                            </a>
                            <a href="https://www.bilibili.com/v/music?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.2" target="_blank">
                                <button class="Music-button-2">更多  ></button>
                            </a>
                        </li>
                    </ul>
                </div>
                <!--第一行图片-->
                <div class="articlemiddle-Music-leftBottom">
                    <ul>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1rV4y1G7Vg/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./imskt=url&at=smstruct&key=aHR0cDovL2hiaW1nLmIwLnV.jpg"  alt="My Image" style="width: 200px; height: 170px;"/>
                                <div class="articlemiddle-Music-leftBottom--top">
                                    打上花火
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                    <li>
                            <a href="https://www.bilibili.com/video/BV1Dt411W7qN/?spm_id_from=333.337.search-card.all.click">
                                <img src="./imskt=url&at=smstruct&key=aHR0cDovL2ltYWdlLnVjLmN.jpg" alt="My Image" style="width: 200px; height: 170px;">
                                <div class="articlemiddle-Music-leftBottom--top">
                                    没什么大不了
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1HF411e78o/?spm_id_from=333.337.search-card.all.click">
                                <img src="./pbWFnZS9SZkU5QlZiYll4blBQfm5vb3AuaW1hZ2U_X2l6PTU4.jpg" alt="My Image" style="width: 200px; height: 170px;">
                                <div class="articlemiddle-Music-leftBottom--top">
                                    愛にできることはまだあ
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1dm4y1w7KW/?spm_id_from=333.337.search-card.all.click">
                                <img src="./imskt=url&at=smstruct&key=aHR0cDovL2Mtc3NsLmR1aXR.jpg" alt="My Image" style="width: 200px; height: 170px;">
                                <div class="articlemiddle-Music-leftBottom--top">
                                    米津玄師-KICK BACK
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1Pe4y147Ur/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./imskt=url&at=smstruct&key=aHR0cHM6Ly9pMC5oZHNsYi5(1).jpg" alt="My Image" style="width: 200px; height: 170px;">
                                <div class="articlemiddle-Music-leftBottom--top">
                                    RADWIMPS - すずめの涙
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1Q4411x7FM/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./null-66eab3b50b318590.jpg" alt="My Image" style="width: 200px; height: 170px;">
                                <div class="articlemiddle-Music-leftBottom--top">
                                    Aimer - LAST STARDUST
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1tW411R7WZ/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./imskt=url&at=smstruct&key=aHR0cHM6Ly9jLXNzbC5kdHN.jpg" alt="My Image" style="width: 200px; height: 170px;">
                                <div class="articlemiddle-Music-leftBottom--top">
                                    Aimer - Ref rain
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.bilibili.com/video/BV1sB4y147MZ/?spm_id_from=333.337.search-card.all.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                                <img src="./imskt=url&at=smstruct&key=aHR0cHM6Ly9pMS5oZHNsYi5.jpg" alt="My Image" style="width: 200px; height: 170px;">
                                <div class="articlemiddle-Music-leftBottom--top">
                                    宮本浩次 - 冬の花
                                </div>
                                <div class="articlemiddle-Music-leftBottom--bottom">
                                    <a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
                                    </a>
                                </div>
                            </a>
                        </li>
                    </ul>
                
                </div>
            </div>

            <div class="article-middle-Domestic-A1right">
                <div class="articlemiddle-Domestic-A1right-top">
                    排行榜
                    <a target="_blank" href="https://www.bilibili.com/ranking/all/3/0/3?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.39">
                            <button style="margin-left: 10px;">更多 ></button>
                    </a>
                </div>
                <div class="articlemiddle-Domestic-A1right-bottom">
                <ul>
                    <li>
                        <div class="Domestic-ranklistNumber-topthree">1</div>
                        <div class="Domestic-ranklistNumber-Topest">
                            <div class="Domestic-ranklistNumber-TopestLeft">
                                <a target="_blank" href="https://www.bilibili.com/video/BV1rZ4y1N7gt">
                                    <img src="./Screenshot_20190714_123811.jpg" alt="My Image" style="width: 200px; height: 170px;"></a>
                            </div>
                        <div class="Domestic-ranklistNumber-TopestRight">
                            <div class="TopestRight-A"><a href="https://www.bilibili.com/video/BV1Cf4y1D79d?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.41">
                                你好世界</a></div>
                                <div class="TopestRight-B">综合得分:99.1万</div>
                        </div>
                        </div>
                        
                    </li>
                    <li>
                        <div class="Domestic-ranklistNumber-topthree">2</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1Eu411t78Q/?spm_id_from=333.1007.tianma.2-2-5.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            请允许我成为你的夏天吧|《夏天的风》cover</a></li>
                    <li>
                        <div class="Domestic-ranklistNumber-topthree">3</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV18h4y1x7UR/?spm_id_from=333.1007.tianma.3-2-8.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            “可惜我相貌平平,惊艳不了你的青春”
                        </a>
                        </li>
                    <li>
                        <div class="Domestic-ranklistNumber-extra">4</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV13s4y127oY/?spm_id_from=333.1007.tianma.5-3-17.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            漫 展 测 量 师
                        </a></li>
                    <li>
                        <div class="Domestic-ranklistNumber-extra">5</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV16i4y177Uc?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.45">
                            同人VS正版,这部国漫从3.8到9.8经历了什么?异常生物见闻录的神级逆转
                        </a>
                        </li>
                    <li>
                        <div class="Domestic-ranklistNumber-extra">6</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1HX4y1y7GN/?spm_id_from=333.1007.tianma.6-1-19.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            “须知少年凌云志,曾许人间第一流。”
                        </a>
                        </li>
                    <li>
                        <div class="Domestic-ranklistNumber-extra">7</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1pK4y1a7Gu?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.47">
                            用核爆神曲来打开喜羊羊!!
                        </a>
                    </li>
                    <li>
                        <div class="Domestic-ranklistNumber-extra">8</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1gP411R7Kp/?spm_id_from=333.1007.tianma.7-4-26.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            东京时装秀2023最新 大长腿性感可爱美女小姐姐走秀 比维密更符合东方人审美</a>
                    </li>
                    <li>
                        <div class="Domestic-ranklistNumber-extra">9</div>
                        <a target="_blank" href="https://www.bilibili.com/video/BV1Vd4y1f7km/?spm_id_from=333.1007.tianma.7-3-25.click&vd_source=0862f7eb6a6e62476ad31df6aed9ab54">
                            续作扎堆!经典回归!2023七月新番扫雷推荐!</a>
                    </li>
                </ul>
                </div>
            </div>
        
    </div>

    </div>
    
    <div class="article-right">
        <div>
            <img src="./16985916128371862.png" />
            <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>
                <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>
                <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="">Tv剧</a></li>
                <li><a href="">影视</a></li>
                <li><a href="">纪录片</a></li>
                
            </ul>
        </div>
    </div>
</article>
<footer>
    <div class="footer-top">
        <ul>
            <li>
                <div class="footer-top-A" style="	margin-left: 150px;">bilibili</div>
                <div class="footer-top-B" style="	margin-left: 150px;">
                    <ul>
                        <li><a href="">关于我们</a></li>
                        <li><a href="">联系我们</a></li>
                        <li><a href="">用户协议</a></li>
                        <li><a href="">加入我们</a></li>
                    </ul>
                    <ul class="footer-top-B-ul2">
                        <li><a href="">友情链接</a></li>
                        <li><a href="">隐私政策</a></li>
                        <li><a href="">bilibili认证</a></li>
                        <li><a href="">Investor Relations</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="footer-top-A">传送门</div>
                    <div class="footer-top-B">
                    <ul>
                        <li><a href="">帮助中心</a></li>
                        <li><a href="">高级弹幕</a></li>
                        <li><a href="">活动专题页</a></li>
                        <li><a href="">侵权申诉</a></li>
                    </ul>
                    <ul class="footer-top-B-ul2">
                        <li><a href="">活动中心</a></li>
                        <li><a href="">用户反馈论坛</a></li>
                        <li><a href="">壁纸站</a></li>
                        <li><a href="">广告合作</a></li>
                    </ul>
                        <ul class="footer-top-B-ul2">
                        <li><a href="">名人堂</a></li>
                        <li><a href="">MCN管理中心</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <ul class="footer-top-left">
                    <li >
                        <a href="">
                            <p>下载APP</p>
                        </a>
                    </li>
                        <li >
                            <a href="">
                                    <p>新浪微博</p>
                            </a>
                        </li>
                            <li >
                                <a href="">
                                    <p>官方微信</p>
                                </a>
                            </li>
                </ul>
            </li>
        </ul>
    </div>
    <div  class="footer-bottom">
        <div class="footer-bottom-left">
            <a href="https://webcert.cnmstl.net
                /cert/grade?sn=d3ec53ae63a84350945198bab0251d59">
        </div>
            <div class="footer-bottom-right">
                <span> <a href="//static.hdslb.com/images/yyzz.png">营业执照</a></span>
                <span> 信息网络传播视听节目许可证:0910417</span>
                <span> 网络文化经营许可证 沪网文【2019】3804-274号</span>
                <span> 广播电视节目制作经营许可证:(沪)字第01248号</span>
                <br />
                <span> 增值电信业务经营许可证 沪B2-20100043</span>
                <span> <a href="http://beian.miit.gov.cn/">
                    沪ICP备13002172号-3</a></span>
                    <span> 出版物经营许可证 沪批字第U6699 号</span>
                        <span> 互联网药品信息服务资格证 沪-非经营性-2016-0143</span>
                        <br />
                            <span> 营业性演出许可证 沪市文演(经)00-2253</span>
                            <br />
                                <span> 违法不良信息举报邮箱:help@bilibili.com |违法不良信息举报电话:4000233233转3</span>
                                <br />
                                <span>
                                    <a href="http://www.shjbzx.cn">
                                        上海互联网举报中心  |
                                    </a>
                                </span>
                                    <span>
                                    <a href="http://jbts.mct.gov.cn/">
                                    12318全国文化市场举报网站  |
                                    </a>
                                </span>
                                    <span>
                                    <a href="http://jbts.mct.gov.cn/">
                                沪公网安备31011002002436号  |
                                    </a>
                                </span>
                                <span>
                                    <a href="http://jbts.mct.gov.cn/">
                                    儿童色情信息举报专区  |
                                    </a>
                                </span>
                                <span>
                                    <a href="href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011002002436"">
                                        扫黄打非举报  |
                                    </a>
                                </span>
                                <br />
                                <span>
                                    <a href="http://jbts.mct.gov.cn/">
                                          |网上有害信息举报专区:
                                    </a>
                                </span>
                                
                                <span>
                                    <a href="http://jbts.mct.gov.cn/">
                                    中国互联网违法和不良信息举报中心
                                    </a>
                                </span>
                                <br />
                                <span>
                                    亲爱的市民朋友,上海警方反诈劝阻电话“962110”系专门针对避免您财
                                    产被骗受损而设,请您一旦收到来电,立即接听。
                                </span>
                                <br />
                                        <span> 公司名称:上海宽娱数码科技有限公司|公司地址:上海市杨
                                            浦区政立路485号|电话:021-25099888</span>
            
            
            
            
            </div>
    </div>
</footer>
</body>
</html>

 

 

 

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值