用HTML+CSS简单仿制了一个bilibili电脑界面⚆_⚆(做着玩的)

本文作者使用HTML和CSS简单地仿制了一个bilibili的电脑界面,虽然没有加入JS和轮播功能,但详细展示了如何通过CSS实现页面布局和样式。代码分为main-part.css和detail-description.css两部分,包括header、nav、article等元素的样式设定,适合初学者了解网页制作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

**

效果图

**:两边的的标签是因为长截图滑动时,它会跟着一起动,实际并没有那么长(⑉・̆-・̆⑉),截图对跟着跑的东西默认截图成这样,这页面里没有js和轮播,本身想加上去,还是太懒了…

在这里插入图片描述

下面上代码,真的很简单,没有一点技术含量,更像是在拼图 ( ˶˙º̬˙˶ )୨⚑︎,不过代码超级无敌多,有4000+行,不过大部分都是重复的。

首先是主体HTML

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8" />
		<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" />
	</head>

	<body>
		<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="歪嘴战神在b站恰饭的日子" />
						<input type="submit" value="" class="submit-11" />
					</form>

				</div>
				<div class="header-Layout-right">
					<ul>
						<li>
							
							<a href=""><img src="img/ada.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">112</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">107</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">304</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">105</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">332</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/BV1Sf4y1D7H1">
									<p>
										<span>【围炉夜话】鲁迅是被吹捧出来的吗?(谈鲁迅1)<br>
									<span style="border: 1px solid white;border-radius: 3px">up</span>智能路障
										<br>42.9w播放
										</span>
									</p>
								</a>
							</li>
							<li>
								<a href="https://www.bilibili.com/video/BV1Sf4y1D7H1">
									<p>
										<span>【围炉夜话】鲁迅是被吹捧出来的吗?(谈鲁迅1)<br>
									<span style="border: 1px solid white;border-radius: 3px">up</span>智能路障
										<br>42.9w播放
										</span>
									</p>
								</a>
							</li>
							<li>
								<a href="https://www.bilibili.com/video/BV1Sf4y1D7H1">
									<p>
										<span>【围炉夜话】鲁迅是被吹捧出来的吗?(谈鲁迅1)<br>
									<span style="border: 1px solid white;border-radius: 3px">up</span>智能路障
										<br>42.9w播放
										</span>
									</p>
								</a>
							</li>
							<li>
								<a href="https://www.bilibili.com/video/BV1Sf4y1D7H1">
									<p>
										<span>【围炉夜话】鲁迅是被吹捧出来的吗?(谈鲁迅1)<br>
									<span style="border: 1px solid white;border-radius: 3px">up</span>智能路障
										<br>42.9w播放
										</span>
									</p>
								</a>
							</li>
							<li>
								<a href="https://www.bilibili.com/video/BV1Sf4y1D7H1">
									<p>
										<span>【围炉夜话】鲁迅是被吹捧出来的吗?(谈鲁迅1)<br>
									<span style="border: 1px solid white;border-radius: 3px">up</span>智能路障
										<br>42.9w播放
										</span>
									</p>
								</a>
							</li>
							<li>
								<a href="https://www.bilibili.com/video/BV1Sf4y1D7H1">
									<p>
										<span>【围炉夜话】鲁迅是被吹捧出来的吗?(谈鲁迅1)<br>
									<span style="border: 1px solid white;border-radius: 3px">up</span>智能路障
										<br>42.9w播放
										</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="">每逢开学胖10斤</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/BV1yi4y177vY?spm_id_fr
								om=333.851.b_7265706f7274466972737432.6">
										<img src="img/小猫咪.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>张超_baritone
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1yi4y177vY?spm_id_fr
								om=333.851.b_7265706f7274466972737432.6">
											<img src="img/小猫咪.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>张超_baritone
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1yi4y177vY?spm_id_fr
								om=333.851.b_7265706f7274466972737432.6">
										<img src="img/小猫咪.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>张超_baritone
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1yi4y177vY?spm_id_fr
								om=333.851.b_7265706f7274466972737432.6">
										<img src="img/小猫咪.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>张超_baritone
											</a>
										</div>
									</a>
								</li>
							</ul>
						</div>
						<a href="https://www.bilibili.com/read/cv7529071?from=1002
							&spm_id_from=333.851.b_7265706f7274466972737432.17">
							<div class="article-middle-01-B-right">

							</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>当前共有 4468 个在线直播</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/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</a>
										</div>
									</a>
								</li>
							</ul>
						</div>

						<!--第二行图片,直接复制上面一段代码-->
						<div class="articlemiddle-LivingStream-leftBottom">
							<ul>
								<li>
									<a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://live.bilibili.com/22425416?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.8" target="_blank">
										<img src="img/豹猫研究所.png" />
										<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">
												<span>up</span>豹猫的日常生活~
												<br>
												<p>萌宠</p>
											</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/blackboard/live/activity-gwKxu9qvU.ht
							ml?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.23">
								<img src="img/CSGO擂台挑战赛.jpg" />
							</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://live.bilibili.com/?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.2" target="_blank">
										<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="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank">
										<img src="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank">
										<img src="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank">
										<img src="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</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="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank">
										<img src="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank">
										<img src="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
								<li>
									<a href="https://www.bilibili.com/video/BV1i7411W79V?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.24" target="_blank">
										<img src="img/前方核能.png" />
										<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">
												<span>up</span>LexBurner
												<br>
												<!--<p>萌宠</p>-->
											</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="img/布加拉提.png"/></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">综合得分:406.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/BV1J541187uD?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.43">
									评分6.5! 烂俗之极的动画!却改变了整个业界!【诚实吐槽】
								</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/BV16i4y177Uc?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.45">
									克苏鲁神话入门,“阴乐”鬼才,死后拉琴《埃里奇·赞之曲》
								</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-Domestic">
					<div class="articlemiddle-Domestic-left">
						<div class="articlemiddle-Domestic-leftTop">
							<ul>
								<li class="Domestic-A1-left">国产原创相关</li>
								<li>
									<!--<p>当前共有 4468 个在线直播</p>-->
								</li>
								<li>
									<a>
										<button class="Domestic-button-1">换一换</button>
									</a>
									<a href="https://live.bilibili.com/?spm_id_from=333.851.b_62696c695f7265706f72745f6c697665.2" target="_blank">
										<button class="Domestic-button-2">更多  ></button>
									</a>
								</li>
							</ul>
						</div>
						<!--第一行图片-->
						<div class="articlemiddle-Domestic-leftBottom">
							<ul>
								<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
										<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
										<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
										<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
									<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
							</ul>
						
						</div>

						<!--第二行图片,直接复制上面一段代码-->
					<div class="articlemiddle-Domestic-leftBottom">
							<ul>
								<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
									<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
										<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
										<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV1hy4y1y7ui?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.64" target="_blank">
										<img src="img/与君共勉.jpg" />
										<div class="articlemiddle-Domestic-leftBottom--top">
											与 君 共 勉,觉 化 成 仙
										</div>
										<div class="articlemiddle-Domestic-leftBottom--bottom">
											<a href="https://space.bilibili.com/39532101/?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.66" target="_blank">
												<span>up</span>莱落ii
												<br>
												<!--<p>萌宠</p>-->
											</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/168/0/3?spm_id_from=333.851.b_62696c695f7265706f72745f67756f636875616e67.85">
									<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="img/王也.png"/></a>
									</div>
								<div class="Domestic-ranklistNumber-TopestRight">
									<div class="TopestRight-A"><a href="https://www.bilibili.com/video/BV1rZ4y1N7gt">【高燃/踩点】当国产动画遇上唢呐,瞬间燃爆"</a></div>
										<div class="TopestRight-B">综合得分:212.6万</div>
								</div>
								</div>
								
							</li>
							<li>
								<div class="Domestic-ranklistNumber-topthree">2</div>
								<a target="_blank" href="https://www.bilibili.com/video/BV1d5411b745?spm_id_from
									=333.851.b_62696c695f7265706f72745f646f756761.42">
									修仙界的扛把子,凡人流的开山鼻祖,让粉丝苦等多年的《凡人修仙传》</a></li>
							<li>
								<div class="Domestic-ranklistNumber-topthree">3</div>
								<a target="_blank" href="https://www.bilibili.com/video/BV1J541187uD?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.43">
									潇洒哥辣评《凡人修仙传》【国动万象】
								</a>
								</li>
							<li>
								<div class="Domestic-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="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/BV1554y1y7hw?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.46">
									【斗罗大陆】122集!小舞回归!5年后的小舞竟如此惊艳!
								</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/BV1Vz4y1Z7LL?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.48">
									【斗罗大陆】没看错。就是一集封神!播放破亿</a>
							</li>
							<li>
								<div class="Domestic-ranklistNumber-extra">9</div>
								<a target="_blank" href="https://www.bilibili.com/video/BV1Ak4y1C7gK?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.50">
									解析绝活爷陆瑾的逆生三重,含三化一 顺人逆仙!</a>
							</li>
						</ul>
						</div>
					</div>
				
			</div>

			<!--音乐版块-->
			<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/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</a>
										</div>
									</a>
								</li>
						<li>
									<a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</a>
										</div>
									</a>
								</li>
							</ul>
						
						</div>

						<!--第二行图片,直接复制上面一段代码-->
								<div class="articlemiddle-Music-leftBottom">
							<ul>
								<li>
									<a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</a>
										</div>
									</a>
								</li>
						<li>
									<a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</a>
										</div>
									</a>
								</li>
							<li>
									<a href="https://www.bilibili.com/video/BV12E411D77B?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.6" target="_blank">
										<img src="img/耳机超享受.png" />
										<div class="articlemiddle-Music-leftBottom--top">
											【听歌向】戴上耳机,享受世界  12个小时超<!--级大满足作业BGM  前二十期大合集!!!!!!"-->
										</div>
										<div class="articlemiddle-Music-leftBottom--bottom">
											<a href="https://space.bilibili.com/4651232/?spm_id_from=333.851.b_62696c695f7265706f72745f6d75736963.8" target="_blank">
												<span>up</span>佻-丞
												<br>
											</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="img/挑战书.png"/></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">综合得分:120.1万</div>
								</div>
								</div>
								
							</li>
							<li>
								<div class="Domestic-ranklistNumber-topthree">2</div>
								<a target="_blank" href="https://www.bilibili.com/video/BV1d5411b745?spm_id_from
									=333.851.b_62696c695f7265706f72745f646f756761.42">
									修仙界的扛把子,凡人流的开山鼻祖,让粉丝苦等多年的《凡人修仙传》</a></li>
							<li>
								<div class="Domestic-ranklistNumber-topthree">3</div>
								<a target="_blank" href="https://www.bilibili.com/video/BV1J541187uD?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.43">
									潇洒哥辣评《凡人修仙传》【国动万象】
								</a>
								</li>
							<li>
								<div class="Domestic-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="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/BV1554y1y7hw?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.46">
									【斗罗大陆】122集!小舞回归!5年后的小舞竟如此惊艳!
								</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/BV1Vz4y1Z7LL?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.48">
									【斗罗大陆】没看错。就是一集封神!播放破亿</a>
							</li>
							<li>
								<div class="Domestic-ranklistNumber-extra">9</div>
								<a target="_blank" href="https://www.bilibili.com/video/BV1Ak4y1C7gK?spm_id_from=333.851.b_62696c695f7265706f72745f646f756761.50">
									解析绝活爷陆瑾的逆生三重,含三化一 顺人逆仙!</a>
							</li>
						</ul>
						</div>
					</div>
				
			</div>

			</div>
			
			<div class="article-right">
				<div>
					<img src="img/边框耳朵11.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="">
									<img src="img/下载.png" />
									<p>下载APP</p>
								</a>
							</li>
								<li >
									<a href="">
										<img src="img/微博.png" />
											<p>新浪微博</p>
									</a>
								</li>
									<li >
										<a href="">
											<img src="img/微信.png" />
											<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">
						<img src="img/底部广告.png" /></a>
				</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>

**

第一张CSS main-part.css

**

  • {
    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;
    }

**

接下来是第二张CSS detail-description.css

**

/=头部/

.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=/

.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=/

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

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

.article-middle {
width: 80%;
height: 3000px;
/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(…/img/鲁迅到底有多强.jpg);
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-left–bottom span {
border: solid 1px darkgray;
border-radius: 3px;
margin-left: 10px;
margin-right: 5px;
/padding-top: -3px;/
}

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

.article-middle-01-B-left–bottom 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-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}

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

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

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

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

.articlemiddle-LivingStream-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-LivingStream-leftBottom–bottom 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: red;/
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-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/background-color: thistle;/
font-size: 17px;
}

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

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

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

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

.articlemiddle-Animation-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-Animation-leftBottom–bottom 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-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/* background-color: thistle;*/
font-size: 17px;
}

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

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

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

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

.articlemiddle-Domestic-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-Domestic-leftBottom–bottom 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: dodgerblue;/
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-leftBottom–top {
height: 50px;
width: 202px;
margin-top: -5px;
/background-color: thistle;/
font-size: 17px;
}

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

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

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

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

.articlemiddle-Music-leftBottom–bottom a {
text-decoration: none;
color: darkgrey;
}

.articlemiddle-Music-leftBottom–bottom 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;
}

**

最后是图片:

**
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值