图片素材：https://pan.baidu.com/s/1oRvsTYl3_zIvkbt4Kqg2Tg
提取码：9m6z
*HTML*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ音乐-千万正版音乐海量无损由</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="header-top">
<img src="./img/logo.png" alt="">
<div class="box-left active">音乐馆</div>
<div class="box-left">我的音乐</div>
<div class="box-left">客户端
<img class="img-k" src="./img/mark_1.png" alt="">
</div>
<div class="box-left">开放平台</div>
<div class="box-left">VIP</div>
<div class="input-box">
<input type="text" name="" id="" placeholder="搜索音乐，MV，歌单，用户">
<span></span>
</div>
<div class="login-btn">登录</div>
<div class="vip">开通VIP</div>
<div class="c-btn">充值</div>
</div>
<div>
<span>首页</span>
<span>歌手</span>
<span>新碟</span>
<span>排行榜</span>
<span>分类歌单</span>
<span>电台</span>
<span>MV</span>
<span>数字专辑</span>
<span>票务</span>
</div>
</div>
<!-- 歌单推荐 -->
<div class="song_list">
<div class="list-title">
<h2>歌单推荐</h2>
<p>
<span>为你推荐</span>
<span>情歌</span>
<span>网络歌曲</span>
<span>经典</span>
<span>官方歌曲</span>
<span>KTV热歌</span>
</p>
</div>
<div class="list_box">
<div>
<img src="./img/300.png" alt="">
<p>欧美热歌丨惊艳耳膜的快乐音符</p>
<p>播放量：1500万</p>
</div>
<div>
<img src="./img/301.png" alt="">
<p>神仙片段翻唱合集|治愈系</p>
<p>播放量：598.9万</p>
</div>
<div>
<img src="./img/302.png" alt="">
<p>小众英文|耳边拂过浪漫与温柔</p>
<p>播放量：2006万</p>
</div>
<div>
<img src="./img/303.png" alt="">
<p>甜系rap丨你是始料不及的心动</p>
<p>播放量：659.9万</p>
</div>
<div>
<img src="./img/304.png" alt="">
<p>古风丨红尘一醉，愿得一人心</p>
<p>播放量：1498万</p>
</div>
</div>
<div class="list_d">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<!-- 新歌首发 -->
<div class="new_song">
<div class="list-title">
<h2>新歌首发</h2>
<p>
<span>最新</span>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
</p>
</div>
<div class="song-box">
<div>
<img src="./img/T001.jpg" alt="">
<div>
<p>빛이 되어줘 (你成为我的光芒)</p>
<p>金在奂 (김재환)</p>
</div>
<span>03:54</span>
</div>
<div>
<img src="./img/T002.jpg" alt="">
<div>
<p>LOCO</p>
<p>ITZY (있지)</p>
</div>
<span>03:54</span>
</div>
<div>
<img src="./img/T003.jpg" alt="">
<div>
<p>黎明破晓《天谕》手游主题曲</p>
<p>黄子韬</p>
</div>
<span>03:54</span>
</div>
<div>
<img src="./img/T004.jpg" alt="">
<div>
<p>情谣《国子监来了个女弟子》</p>
<p>井胧</p>
</div>
<span>03:54</span>
</div>
<div>
<img src="./img/T005.jpg" alt="">
<div>
<p>广仔传</p>
<p>旅行团乐队</p>
</div>
<span>03:54</span>
</div>
<div>
<img src="./img/T006.jpg" alt="">
<div>
<p>过错《光芒》电视剧片尾曲</p>
<p>胡夏</p>
</div>
<span>03:54</span>
</div>
<div class="border">
<img src="./img/T007.jpg" alt="">
<div>
<p>神预言 (TIVA000)</p>
<p>袁娅维</p>
</div>
<span>03:54</span>
</div>
<div class="border">
<img src="./img/T008.jpg" alt="">
<div>
<p>Crazy Family (From "The Add)</p>
<p>Megan Thee Stallion /Maluma /</p>
</div>
<span>03:54</span>
</div>
<div class="border">
<img src="./img/T009.jpg" alt="">
<div>
<p>遊生夢死</p>
<p>Eve</p>
</div>
<span>03:54</span>
</div>
<br clear="both">
<p class="btn">播放全部</p>
</div>
<div class="list_d">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 精彩推荐 -->
<div class="wondenrful">
<div class="list-title">
<h2>精彩推荐</h2>
</div>
<div class="box">
<img src="./img/aa.jpg" alt="">
<img src="./img/bb.jpg" alt="">
</div>
<div class="list_d">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 新碟首发 -->
<div class="new_disc">
<div class="list-title">
<h2>新碟首发</h2>
<p>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
<span>其他</span>
</p>
</div>
<div class="list_box">
<div>
<img src="./img/R300x300M000000Dcv8u2KXIOu_1.jpg" alt="">
<p>你应该藏在心里</p>
<p>熊猫堂ProducePandas</p>
</div>
<div>
<img src="./img/R300x300M000000samtR2nxNIi_1.jpg" alt="">
<p>emo了</p>
<p>新声主义</p>
</div>
<div>
<img src="./img/R300x300M000000YgdTo3rQHKV_1.jpg" alt="">
<p>让我看到你</p>
<p>井胧</p>
</div>
<div>
<img src="./img/R300x300M000001booHJ2dDbPF_5.jpg" alt="">
<p>情谣</p>
<p>等什么君(邓寓君)</p>
</div>
<div>
<img src="./img/R300x300M000002dPVV40eOgci_1.jpg" alt="">
<p>寻洛</p>
<p>陈楚生</p>
</div>
<div>
<img src="./img/R300x300M000002ZX6WS0BjsRr_1.jpg" alt="">
<p>仲夏夜之梦</p>
<p>陈楚生</p>
</div>
<div>
<img src="./img/R300x300M000003ILTDN45nwdf_1.jpg" alt="">
<p>声生不息（脉冲计划Ⅱ音乐人发片季）</p>
<p>腾讯音乐人 /Techaos汰敖斯 /B</p>
</div>
<div>
<img src="./img/R300x300M000004Spm3b22o8TF_1.jpg" alt="">
<p>你若不爱</p>
<p>小沈阳</p>
</div>
<div>
<img src="./img/R300x300M000004Z47Kv2tQuGd_2.jpg" alt="">
<p>摇摆教官</p>
<p>黄旭</p>
</div>
<div>
<img src="./img/304.png" alt="">
<p>过错</p>
<p>胡夏</p>
</div>
<br clear="both">
<p class="btn">更多 ></p>
</div>
<div class="list_d">
<span class="active"></span>
<span></span>
</div>
</div>
<!-- 排行榜 -->
<div class="ranking-list">
<div class="list-title">
<h2>排行榜</h2>
</div>
<div class="toplist">
<div class="img">
<p class="xiaohao_size">巅峰榜</p>
<p class="toplist_head2">热歌</p>
<h3 class="toplist_head">——</h3>
<p class="toplist_head4">1.自娱自乐<br />金志文<br /><br />2.花海<br />周杰伦<br /><br />3.晴天<br />周杰伦</p>
</div>
<div class="img2">
<p class="xiaohao_size">巅峰榜</p>
<p class="toplist_head2">新歌</p>
<h3 class="toplist_head">——</h3>
<p class="toplist_head4">1.自娱自乐<br />金志文<br /><br />2.花海<br />周杰伦<br /><br />3.晴天<br />周杰伦</p>
</div>
<div class="img3">
<p class="xiaohao_size">巅峰榜</p>
<p class="toplist_head2">流行指数</p>
<h3 class="toplist_head">——</h3>
<p class="toplist_head4">1.自娱自乐<br />金志文<br /><br />2.花海<br />周杰伦<br /><br />3.晴天<br />周杰伦</p>
</div>
<div class="img4">
<p class="xiaohao_size">巅峰榜</p>
<p class="toplist_head2">欧美</p>
<h3 class="toplist_head">——</h3>
<p class="toplist_head4">1.自娱自乐<br />金志文<br /><br />2.花海<br />周杰伦<br /><br />3.晴天<br />周杰伦</p>
</div>
<div class="img5">
<p class="xiaohao_size">巅峰榜</p>
<p class="toplist_head2">韩国</p>
<h3 class="toplist_head">——</h3>
<p class="toplist_head4">1.自娱自乐<br />金志文<br /><br />2.花海<br />周杰伦<br /><br />3.晴天<br />周杰伦</p>
</div>
<p class="btn2">更多 ></p>
</div>
</div>
<!-- MV -->
<div class="MV-vido">
<div class="list-title">
<h2>MV</h2>
<p>
<span>精选</span>
<span>内地</span>
<span>港台</span>
<span>欧美</span>
<span>韩国</span>
<span>日本</span>
</p>
</div>
<div class="list-box1">
<div>
<img src="./img/R300x300M000000Dcv8u2KXIOu_1.jpg" alt="">
<p>你应该藏在心里</p>
<p>熊猫堂ProducePandas</p>
</div>
<div>
<img src="./img/R300x300M000000samtR2nxNIi_1.jpg" alt="">
<p>emo了</p>
<p>新声主义</p>
</div>
<div>
<img src="./img/R300x300M000000YgdTo3rQHKV_1.jpg" alt="">
<p>让我看到你</p>
<p>井胧</p>
</div>
<div>
<img src="./img/R300x300M000001booHJ2dDbPF_5.jpg" alt="">
<p>情谣</p>
<p>等什么君(邓寓君)</p>
</div>
<div>
<img src="./img/R300x300M000002dPVV40eOgci_1.jpg" alt="">
<p>寻洛</p>
<p>陈楚生</p>
</div>
<div>
<img src="./img/R300x300M000002ZX6WS0BjsRr_1.jpg" alt="">
<p>仲夏夜之梦</p>
<p>陈楚生</p>
</div>
<div>
<img src="./img/R300x300M000003ILTDN45nwdf_1.jpg" alt="">
<p>声生不息（脉冲计划Ⅱ音乐人发片季）</p>
<p>腾讯音乐人 /Techaos汰敖斯 /B</p>
</div>
<div>
<img src="./img/R300x300M000004Spm3b22o8TF_1.jpg" alt="">
<p>你若不爱</p>
<p>小沈阳</p>
</div>
<div>
<img src="./img/R300x300M000004Z47Kv2tQuGd_2.jpg" alt="">
<p>摇摆教官</p>
<p>黄旭</p>
</div>
<div>
<img src="./img/304.png" alt="">
<p>过错</p>
<p>胡夏</p>
</div>
<br clear="both">
<p class="btn">更多 ></p>
</div>
<div class="list_d">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- 底部版权 -->
<div class="footer">
<div class="later">
<div class="first">
<div class="load">
<div class="explain">
<span>下载QQ音乐客户端</span>
</div>
<div class="locn1">
<div class="PC">
<img src="img/images01.png" alt="PC版">
<br>
<span>PC版</span>
</div>
<div class="Mac">
<img src="img/images02.png" alt="Mac版">
<br>
<span>Mac版</span>
</div>
<div class="Android">
<img src="img/images03.png" alt="Android版">
<br>
<span>Android版</span>
</div>
<div class="iPhone">
<img src="img/images04.png" alt="iPhone版">
<br>
<span>iPhone版</span>
</div>
</div>
</div>
<div class="product">
<div class="explain">
<span>特色产品</span>
</div>
<div class="locn2">
<div class="Ksong">
<img src="img/image05.png" alt="全民K歌">
<br>
<span>全民K歌</span>
<br>
<span>车载互联</span>
</div>
<div class="Super">
<img src="img/images06.png" alt="Super Sound">
<br>
<span>Super Sound</span>
<br>
<span>QQ演出</span>
</div>
<div class="Qplay">
<img src="img/images07.png" alt="QPlay">
<br>
<span>QPlay</span>
</div>
</div>
</div>
<div class="compete">
<div class="explain">
<span>合作链接</span>
</div>
<div class="locn3">
<div class="left">
<ul>
<li>CJ E&M</li>
<li>最新版QQ</li>
<li>QQ浏览器</li>
<li>星钻</li>
</ul>
</div>
<div class="mid">
<ul>
<li>腾讯视频</li>
<li>腾讯社交广告</li>
<li>画报</li>
<li>腾讯微云</li>
</ul>
</div>
<div class="right">
<ul>
<li>手机QQ空间</li>
<li>电脑管家</li>
<li>黄钻活动</li>
<li>更多</li>
</ul>
</div>
</div>
</div>
</div>
<div class="about">
<span class="last">
关于腾讯 | About Tencent | 服务条款 | 用户服务协议 | 隐私政策 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航
</span>
<br>
<span class="last">
Copyright 1998 - 2017 Tencent. All Rights Reserved.
</span>
<br>
<span class="last">
腾讯公司©版权所有 腾讯网络文化经营许可证
</span>
</div>
</div>
</div>
</body>
</html>*CSS*
*{
margin: 0;
padding: 0;
/* color:#000; */
}
/*公共标题 */
.list-title{
text-align: center;
}
.list-title>p>span{
margin: 0 20px;
cursor: pointer;
font-size: 15px;
}
.list-title>p>span:hover{
color:#31c27c;
}
.list-title>h2{
color:rgb(34, 30, 30);
letter-spacing: 15px;
margin-bottom: 28px;
}
/* 公共样式：小圆点 */
.list_d{
text-align: center;
margin-top: 10px;
}
.list_d>span{
display: inline-block;
width:10px;
height:10px;
background-color: rgb(240, 237, 237);
margin: 0 7px;
border-radius: 50%;
}
.list_d>span:hover{
background-color: rgb(165,165,165);
}
.list_d .active{
background-color: rgb(165,165,165);
}
/* 头部 */
.header{
width:1200px;
height:142px;
/* border:1px solid red; */
margin: 0 auto;
}
.header-top{
height: 90px;
border-bottom:1px solid #ddd;
}
.header-top>img{
margin: 20px;
vertical-align:middle;
/* margin-top: 22px; */
}
.header-top>.box-left{
height:90px;
font-size: 18px;
padding: 0 13px;
display: inline-block;
line-height: 90px;
cursor: pointer;
}
.header-top>.box-left>.img-k{
width:38px;
position: relative;
top:-17px;
right:-14px;
margin-left: -38px;
}
.header-top>.box-left:hover{
color:#31c27c;
}
.header-top .active{
color:white;
background-color: #31c27c;
}
.header-top .active:hover{
color:white;
}
.header-top>.input-box{
position: relative;
display: inline-block;
}
.header-top>.input-box>input{
margin-left: 10px;
width:220px;
border-radius: 3px;
padding: 0 30px 0 10px;
height:36px;
box-sizing: border-box;
border: 1px solid #c9c9c9;
}
.header-top>.input-box>input:focus{
outline: none;
}
.header-top>.input-box>span{
position: absolute;
right:2px;
top:-1px;
width:36px;
height: 33px;
background-image: url("./img/icon_sprite.png");
background-repeat: no-repeat;
background-size: 250px;
background-position:11px -42px;
}
.header-top>.login-btn{
margin: 0 20px;
display: inline-block;
}
.header-top>.login-btn:hover{
color:#31c27c;
cursor: pointer;
}
.header-top>.vip{
display: inline-block;
line-height:38px;
width:122px;
color:white;
text-align: center;
border-radius: 3px;
background-color:#31c27c ;
font-size: 10px;
cursor: pointer;
}
.header-top>.vip::after{
position:relative;
content: "";
right: -19px;
top: 11px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid;
}
.header-top>.c-btn{
display: inline-block;
line-height:38px;
width:100px;
text-align: center;
border-radius: 3px;
border:1px solid #c9c9c9;
font-size: 10px;
cursor: pointer;
}
.header-top>.c-btn::after{
position: relative;
content: "";
right: -24px;
top: 11px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid;
}
.header>div:last-child{
/* border:1px solid red; */
line-height: 42px;
text-align: center;
}
.header>div:last-child>span{
cursor: pointer;
margin:0 24px;
font-size: 15px;
}
.header>div:last-child>span:hover{
color: aquamarine;
}
/* 歌单推荐 */
.song_list{
padding-top: 40px;
height:550px;
box-sizing: border-box;
background-image: linear-gradient(to bottom,rgba(243, 243, 243) , rgba(255, 255, 255));
}
.song_list .list_box{
width:1200px;
height:300px;
margin: 25px auto 0;
/* border:1px solid red; */
}
.song_list .list_box>div{
/* border:1px solid red; */
width:240px;
height:300px;
padding: 0 10px;
box-sizing: border-box;
float: left;
}
.song_list .list_box>div>img{
width:100%;
}
.song_list .list_box>div>p:last-child{
margin-top: 10px;
color:#999;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
/* border: 1px solid red; */
text-overflow: ellipsis;
}
.song_list .list_box>div>p:first-of-type{
/* font-size: 14px; */
display: -webkit-box;
white-space: nowrap;
overflow: hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
text-overflow: ellipsis;
}
.song_list .list_box>div>p:first-of-type:hover{
color: #31c27c;
cursor: pointer;
}
/* 新歌首发 */
.new_song{
padding-top: 40px;
background-image: linear-gradient(to bottom,rgba(243, 243, 243) , rgba(255, 255, 255));
margin-top: -36px;
/* border:1px solid red; */
background-color: white;
/* height:400px; */
}
.new_song .song-box{
width:1200px;
margin:50px auto 0;
position: relative;
/* border: 1px solid red;; */
}
.new_song >.list_d{
margin-top: 25px;
}
.new_song .song-box>div{
float: left;
width:386px;
box-sizing: border-box;
height:110px;
margin-right: 20px;
border-bottom:1px solid rgb(250, 242, 242);
padding:10px 0;
}
.new_song .song-box>div:nth-child(3n){
margin-right: 0px;
}
.new_song .song-box>div.border{
border-bottom: none;
}
.new_song .song-box>div>div{
margin-top: 20px;
float:left;
width:189px;
/* border:1px solid red; */
}
.new_song .song-box>div>div>p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.new_song .song-box>div>div>p:hover{
color:#31c27c;
cursor: pointer;
}
.new_song .song-box>div>div>p:last-child{
margin-top: 10px;
color:#999;
}
.new_song .song-box>div>div>p:last-child:hover{
margin-top: 10px;
color:#31c27c;
}
.new_song .song-box>div>span{
float: right;
line-height: 90px;
color:#999
}
.new_song .song-box>div>span:hover{
color:#31c27c;
cursor: pointer;
}
.new_song .song-box>div>img{
height:100%;
float: left;
margin-right: 10px;
}
.new_song .song-box .btn{
position: absolute;
top:-80px;
left:0;
width:123px;
height: 38px;
text-align: center;
line-height:38px;
border-radius: 3px;
border:1px solid #c9c9c9;
cursor: pointer;
}
.new_song .song-box .btn:hover{
background-color: rgb(100,98,98)9c9;
}
/* 精彩推荐 */
.wondenrful{
margin-top: 20px;
padding-top: 40px;
/* border:1px solid red; */
background-image: linear-gradient(to bottom,rgba(243, 243, 243) , rgba(255, 255, 255));
/* height:400px; */
background-color:white;
}
.wondenrful>.box{
width:1200px;
margin: 0 auto;
text-align: center;
/* border: 1px solid red; */
}
.wondenrful>.box>img{
width:587px;
}
.wondenrful>.box>img:first-child{
margin-right:20px;
}
.wondenrful>.list_d{
margin: 20 0px;
}
/* 新碟首发 */
.new_disc{
margin-top: 20px;
padding-top: 40px;
background-image: linear-gradient(to bottom,rgba(243, 243, 243) , rgba(255, 255, 255));
}
.new_disc .list_box{
width:1200px;
/* height:300px; */
margin: 25px auto 0;
/* border:1px solid red; */
position: relative;
}
.new_disc .list_box>div{
/* border:1px solid red; */
/* margin-bottom: 20px; */
width:240px;
height:300px;
padding: 0 10px;
box-sizing: border-box;
float: left;
}
.new_disc .list_box>div>img{
width:100%;
}
.new_disc .list_box>div>p:last-child{
margin-top:5px;
color:#999;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
/* border: 1px solid red; */
text-overflow: ellipsis;
}
.new_disc .list_box>div>p:first-of-type{
/* font-size: 14px; */
white-space: nowrap;
overflow: hidden;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
text-overflow: ellipsis;
}
.new_disc .list_box .btn{
position: absolute;
top:-43px;
right:12px;
font-size: 14px;
}
.new_disc .list_box .btn:hover{
color:#31c27c;
cursor: pointer;
}
.new_disc>.list_d{
margin: 0 0 30px;
}
.new_disc .list_box>div>p:hover{
color:#31c27c;
cursor: pointer;
}
/* 排行榜 */
.ranking-list{
margin-top: 20px;
padding-top: 40px;
background-image: linear-gradient(to bottom,rgba(243, 243, 243) , rgba(255, 255, 255));
}
.toplist{
margin: 0 127px auto;
display: inline-block;
}
.toplist >div.img{
width:200px;
height:480px;
/* border:1px solid red; */
/* display: inline-block; */
padding: 10px;
margin: 0 13px auto;
background-image: url("./img/bg_index_top1.jpg");
position: absolute;
}
.toplist >div.img2{
width:200px;
height:480px;
/* border:1px solid red; */
/* display: inline-block; */
padding: 10px;
margin: 0 262px auto;
background-image: url("./img/bg_index_top1.jpg");
position: absolute;
}
.toplist >div.img3{
width:200px;
height:480px;
/* border:1px solid red; */
/* display: inline-block; */
padding: 10px;
margin: 0 512px auto;
position: absolute;
background-image: url("./img/bg_index_top2.jpg");
}
.toplist >div.img4{
width:200px;
height:480px;
/* border:1px solid red; */
/* display: inline-block; */
padding: 10px;
margin: 0 766px auto;
position: absolute;
background-image: url("./img/bg_index_top3.jpg");
}
.toplist >div.img5{
width:200px;
height:480px;
/* border:1px solid red; */
/* display: inline-block; */
padding: 10px;
margin: 0 1015px auto;
position: absolute;
background-image: url("./img/bg_index_top4.jpg");
}
.toplist_head {
position: absolute;
top: 119px;
left: 50%;
margin-left: -100px;
width: 200px;
text-align: center;
color:white;
/* border:1px solid red; */
}
.toplist_head2 {
position: absolute;
top: 70px;
left: 50%;
margin-left: -100px;
width: 200px;
text-align: center;
color:white;
/* border:1px solid red; */
font-size:30px;
}
.toplist_head4{
position: absolute;
top: 179px;
left: 22%;
margin-left: -100px;
width: 200px;
text-align: center;
color:white;
/* border:1px solid red; */
font-size:17px;
}
.xiaohao_size{
position: absolute;
top: 35px;
left: 50%;
margin-left: -100px;
width: 200px;
text-align: center;
color:white;
/* border:1px solid red; */
font-size: 20px;
}
.toplist> .btn2{
position: relative;
left:1195px;
font-size: 14px;
top: -32px;
}
.toplist> .btn2:hover{
color:#31c27c;
cursor: pointer;
}
/* MV */
.MV-vido{
margin-top: 542px;
padding-top: 40px;
background-image: linear-gradient(to bottom,rgba(243, 243, 243) , rgba(255, 255, 255));
}
.MV-vido .list-box1{
width:1200px;
margin: 25px auto 0;
/* border:1px solid red; */
position: relative;
}
.MV-vido .list-box1>div{
/* border:1px solid red; */
/* margin-bottom: 20px; */
width:240px;
height:220px;
padding: 0 10px;
box-sizing: border-box;
float: left;
}
.MV-vido .list-box1>div>img{
width:100%;
height:50%;
}
.MV-vido .list-box1>p:hover{
color:#31c27c;
cursor: pointer;
}
.MV-vido .list-box1 .btn{
position: absolute;
top:-43px;
right:12px;
font-size: 14px;
}
.MV-vido .list-box1>div>p:first-of-type {
/* font-size: 14px; */
white-space: nowrap;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.MV-vido .list-box1>div>p:last-child {
margin-top: 5px;
color: #999;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
/* border: 1px solid red; */
text-overflow: ellipsis;
}
.MV-vido .list-box1>div>p:hover{
color:#31c27c;
cursor: pointer;
}
.MV-vido>.list_d{
margin: 0 0 30px;
}
/* 底部版权 */
.footer {
width: 100%;
height: 350px;
background-color: #333333;
padding-top: 60px;
}
.first {
margin: 0 auto;
width: 990px;
display: flex;
justify-content: space-between;
}
.explain {
color:#7f7f7f;
}
.locn1 {
display: flex;
justify-content: space-between;
margin-top: 50px;
width: 270px;
}
.locn1>div {
width: 60px;
/*text-align: center;*/
font-size: 6px;
color: #7f7f7f;
}
.locn2 {
display: flex;
justify-content: space-between;
margin-top: 50px;
width: 270px;
}
.locn2>div {
width: 88px;
/*text-align: center;*/
font-size: 6px;
color: #7f7f7f;
}
.locn3 {
display: flex;
width: 320px;
justify-content: space-between;
}
.locn3 ul li {
list-style: none;
font-size: 10px;
margin-top: 3px;
color: #7f7f7f;
}
.locn3>div {
margin-top: 50px;
}
.about {
width: 990px;
text-align: center;
margin: 100px auto;
}
.last {
font-size: 7px;
color:#7f7f7f;
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
