经过了一个多月的学习，对HTML和CSS有了一定的了解。
在过去的两周里，独立完成了自己的第一个静态页面！尊嘟超级开心！
下面是我的一些分享。
HTML代码
主页面HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
<link rel="stylesheet" href="css/index.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<!--标题-->
<header class="header">
<div class="container clearfix">
<div class="logo left">
<a href="">
<img src="img/logo.png" alt="">
</a>
</div>
<div class="list left">
<ul class="clearfix">
<li class="left yin"><a href="" class="selected">音乐馆</a></li>
<li class="left"><a href="">我的音乐</a></li>
<li class="left biao">
<a href="" class="ke">客户端</a>
<div class="nav">
<p><i class="yi"></i>HQ高品质 全员开启</p>
<p><i class="er"></i>独家音效 全面升级</p>
<p><i class="san"></i> 轻盈视觉 动态皮肤</p>
<a href="" class="xiazai">下载体验</a>
</div>
<img src="img/特权1.png" alt="">
</li>
<li class="left"><a href="">开放平台</a></li>
<li class="left"><a href="">VIP</a></li>
</ul>
</div>
<div class="search left">
<input type="text" placeholder="搜索音乐、MV、歌单、用户">
<button>
<a href=""> <i class="iconfont icon-sousuo"></i></a>
</button>
</div>
<div class="login left ">
<a href="./login.html">登录</a>
</div>
<!-- <iframe class="right login-area" src="./login.html" frameborder="0"></iframe> -->
<div class="kaitong left">
<a href="" class="kai">开通VIP </a>
<div class="yiji-nav">
<ul>
<li><a href="" class="list yi">开通超级会员</a></li>
<li><a href="" class="list er">开通绿钻豪华版</a></li>
</ul>
</div>
</div>
<div class="chongzhi left">
<a href="" class="chong">充值</a>
<div class="menu">
<ul class="xiaofei">
<li><a href="" class="list">购买乐币</a></li>
<li>
<a href="" class="list er">充值饭票</a>
<ul class="zi">
<li>
<a href="" class="list erji">网银支付</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!--下面菜单-->
<div class="menu-xia">
<nav class="menu clearfix">
<a href="" class="left">首页</a>
<a href="" class="left">歌手</a>
<a href="" class="left">新碟</a>
<a href="" class="left">排行榜</a>
<a href="" class="left">分类歌单</a>
<a href="" class="left">电台</a>
<a href="" class="left">MV</a>
<a href="" class="left">数字专辑</a>
</nav>
</div>
</header>
<!--内容-->
<!--歌单推荐-->
<div class="content">
<div class="section clearfix tui">
<div class="zuo left ge-l">
<i class="zuo iconfont icon-xiangzuojiantou"></i>
</div>
<div class="you right ge-r">
<i class="you iconfont icon-xiangyoujiantou"></i>
</div>
<div class="header">
<h2>歌单推荐</h2>
</div>
<nav class="list clearfix">
<span class="left selected">为你推荐</span>
<span class="left">网络歌曲</span>
<span class="left">经典</span>
<span class="left">经典国语</span>
<span class="left">官方歌单</span>
<span class="left">情歌</span>
</nav>
<div class="tu">
<ul class="item-list clearfix">
<li class="one">
<div class="img">
<a href="">
<img src="img/歌单.webp" alt="">
<i class="biao"></i>
<i class="meng"></i>
</a>
</div>
<div class="words">
<a href="">伤恋DJ热情歌：入戏深的人最卑微</a>
<span>播放量：1759.9万</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/歌单.webp" alt="">
<i class="biao"></i>
<i class="meng"></i>
</a>
</div>
<div class="words">
<a href="">伤恋DJ热情歌：入戏深的人最卑微</a>
<span>播放量：1759.9万</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/歌单.webp" alt="">
<i class="biao"></i>
<i class="meng"></i>
</a>
</div>
<div class="words">
<a href="">伤恋DJ热情歌：入戏深的人最卑微</a>
<span>播放量：1759.9万</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/歌单.webp" alt="">
<i class="biao"></i>
<i class="meng"></i>
</a>
</div>
<div class="words">
<a href="">伤恋DJ热情歌：入戏深的人最卑微</a>
<span>播放量：1759.9万</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/歌单.webp" alt="">
<i class="biao"></i>
<i class="meng"></i>
</a>
</div>
<div class="words">
<a href="">伤恋DJ热情歌：入戏深的人最卑微</a>
<span>播放量：1759.9万</span>
</div>
</li>
</ul>
</div>
<div class="dian">
<ul class="point-list">
<li class="clearfix"><a href="" class="point left selected"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
</ul>
</div>
</div>
</div>
<!--新歌首发-->
<div class="content">
<div class="section clearfix xin">
<div class="zuo left ge-l">
<i class="zuo iconfont icon-xiangzuojiantou"></i>
</div>
<div class="you right ge-r">
<i class="you iconfont icon-xiangyoujiantou"></i>
</div>
<div class="header">
<h2>新歌首发</h2>
</div>
<nav class="list clearfix">
<span class="left selected">最新</span>
<span class="left">内地</span>
<span class="left">港台</span>
<span class="left">欧美</span>
<span class="left">韩国</span>
<span class="left">日本</span>
</nav>
<div class="tu-new">
<ul class="item-list-new clearfix">
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
<li class="one clearfix">
<div class="img left">
<a href="">
<img src="img/新歌.webp" alt="">
<i class="biao biao-new"></i>
<i class="meng meng-new"></i>
</a>
</div>
<div class="words clearfix">
<a href="" class=" yi">红蓝战歌</a>
<a href="" class=" er">王俊凯</a>
<span class="right">02:49</span>
</div>
</li>
</ul>
</div>
<div class="dian">
<ul class="point-list">
<li class="clearfix"><a href="" class="point left selected"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
</ul>
</div>
</div>
</div>
<!--精彩推荐-->
<div class="content">
<div class="section clearfix cai">
<div class="zuo left ge-l">
<i class="zuo iconfont icon-xiangzuojiantou"></i>
</div>
<div class="you right ge-r">
<i class="you iconfont icon-xiangyoujiantou"></i>
</div>
<div class="header">
<h2>精彩推荐</h2>
</div>
<div class="tu-cai">
<ul class="item-list clearfix">
<li class="left yi">
<div class="img">
<a href="">
<img class="tu-yi" src="img/精彩.png" alt="">
</a>
</div>
<div class="tu-cai-biao-yi-zuo ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao">
<div class="tu-cai-biao-er-zuo">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="tu-cai-biao-san-zuo">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
</li>
<li class="left">
<div class="img">
<a href="">
<img class="tu-er" src="img/精彩.png" alt="">
</a>
</div>
<div class="tu-cai-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao">
<div class="tu-cai-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="tu-cai-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
</li>
</ul>
</div>
<div class="dian">
<ul class="point-list">
<li class="clearfix"><a href="" class="point left selected"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
</ul>
</div>
</div>
</div>
<!--新碟首发-->
<div class="content">
<div class="section clearfix die">
<div class="zuo left die-l">
<i class="zuo iconfont icon-xiangzuojiantou"></i>
</div>
<div class="you right die-r">
<i class="you iconfont icon-xiangyoujiantou"></i>
</div>
<div class="header">
<h2>新歌首发</h2>
</div>
<nav class="list clearfix">
<span class="left selected">内地</span>
<span class="left">港台</span>
<span class="left">欧美</span>
<span class="left">韩国</span>
<span class="left">日本</span>
<span class="left">其他</span>
<span class="right duo">更多 ></span>
</nav>
<div class="tu">
<ul class="item-list clearfix">
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
<li class="one">
<div class="img">
<div class="die-biao-yi ">
<a href=""><i class="iconfont icon-sousuoleimu"></i></a>
</div>
<div class="biao-die">
<div class="die-biao-er">
<a href=""><i class=" iconfont icon-zuwenjianjia"></i></a>
</div>
<div class="die-biao-san">
<a href=""><i class=" iconfont icon-a-shenglvehao3x"></i></a>
</div>
</div>
<a href="">
<img src="img/新碟.webp" alt="">
<i class="biao biao-die-i"></i>
<i class="meng meng-die-i"></i>
</a>
</div>
<div class="words">
<a href="">念念相忘 </a>
<span>恋与白侍从</span>
</div>
</li>
</ul>
</div>
<div class="dian">
<ul class="point-list">
<li class="clearfix"><a href="" class="point left selected"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
</ul>
</div>
</div>
</div>
<!--排行榜-->
<div class="content">
<div class="section clearfix bang">
<div class="zuo left bang-l">
<i class="zuo iconfont icon-xiangzuojiantou"></i>
</div>
<div class="you right bang-r">
<i class="you iconfont icon-xiangyoujiantou"></i>
</div>
<div class="header">
<h2>排行榜</h2>
</div>
<div class="dan-bang">
<ul class="dan clearfix">
<li class="dan-li left">
<header>
<span class="dian-bang">巅峰榜</span>
<a href="" class="re">热歌</a>
</header>
<div class="tu-bang">
<a href="" class="qian"><i>——</i></a>
<a href="" class="hover"><i class="iconfont icon-bofang "></i></a>
</div>
<div class="bang-list">
<ul>
<li>
<a href="" class="before-yi ">西楼儿女</a>
<a href=""> 岳云鹏</a>
</li>
<li>
<a href="" class="before-er ">句号</a>
<a href="">G.E.M. 邓紫棋</a>
</li>
<li>
<a href="" class="before-san ">西楼儿女</a>
<a href="">海来阿木</a>
</li>
</ul>
</div>
</li>
<li class="dan-li left dan-li-er">
<header>
<span class="dian-bang">巅峰榜</span>
<a href="" class="re">热歌</a>
</header>
<div class="tu-bang">
<a href="" class="qian"><i>——</i></a>
<a href="" class="hover"><i class="iconfont icon-bofang "></i></a>
</div>
<div class="bang-list">
<ul>
<li>
<a href="" class="before-yi ">西楼儿女</a>
<a href=""> 岳云鹏</a>
</li>
<li>
<a href="" class="before-er ">句号</a>
<a href="">G.E.M. 邓紫棋</a>
</li>
<li>
<a href="" class="before-san ">西楼儿女</a>
<a href="">海来阿木</a>
</li>
</ul>
</div>
</li>
<li class="dan-li left dan-li-san">
<header>
<span class="dian-bang">巅峰榜</span>
<a href="" class="re">热歌</a>
</header>
<div class="tu-bang">
<a href="" class="qian"><i>——</i></a>
<a href="" class="hover"><i class="iconfont icon-bofang "></i></a>
</div>
<div class="bang-list">
<ul>
<li>
<a href="" class="before-yi ">西楼儿女</a>
<a href=""> 岳云鹏</a>
</li>
<li>
<a href="" class="before-er ">句号</a>
<a href="">G.E.M. 邓紫棋</a>
</li>
<li>
<a href="" class="before-san ">西楼儿女</a>
<a href="">海来阿木</a>
</li>
</ul>
</div>
</li>
<li class="dan-li left dan-li-si">
<header>
<span class="dian-bang">巅峰榜</span>
<a href="" class="re">热歌</a>
</header>
<div class="tu-bang">
<a href="" class="qian"><i>——</i></a>
<a href="" class="hover"><i class="iconfont icon-bofang "></i></a>
</div>
<div class="bang-list">
<ul>
<li>
<a href="" class="before-yi ">西楼儿女</a>
<a href=""> 岳云鹏</a>
</li>
<li>
<a href="" class="before-er ">句号</a>
<a href="">G.E.M. 邓紫棋</a>
</li>
<li>
<a href="" class="before-san ">西楼儿女</a>
<a href="">海来阿木</a>
</li>
</ul>
</div>
</li>
<li class="dan-li left dan-li-wu">
<header>
<span class="dian-bang">巅峰榜</span>
<a href="" class="re">热歌</a>
</header>
<div class="tu-bang">
<a href="" class="qian"><i>——</i></a>
<a href="" class="hover"><i class="iconfont icon-bofang "></i></a>
</div>
<div class="bang-list">
<ul>
<li>
<a href="" class="before-yi ">西楼儿女</a>
<a href=""> 岳云鹏</a>
</li>
<li>
<a href="" class="before-er ">句号</a>
<a href="">G.E.M. 邓紫棋</a>
</li>
<li>
<a href="" class="before-san ">西楼儿女</a>
<a href="">海来阿木</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--MV-->
<div class="content">
<div class="section clearfix mv">
<div class="zuo left mv-l">
<i class="zuo iconfont icon-xiangzuojiantou"></i>
</div>
<div class="you right mv-r">
<i class="you iconfont icon-xiangyoujiantou"></i>
</div>
<div class="header">
<h2>MV</h2>
</div>
<nav class="list clearfix">
<span class="left selected">内地</span>
<span class="left">港台</span>
<span class="left">欧美</span>
<span class="left">韩国</span>
<span class="left">日本</span>
<span class="left">其他</span>
<span class="right duo">更多 ></span>
</nav>
<div class="tu">
<ul class="item-list clearfix">
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv"></i>
<i class="meng meng-mv"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv"></i>
<i class="meng meng-mv"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv"></i>
<i class="meng meng-mv"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv"></i>
<i class="meng meng-mv"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv"></i>
<i class="meng meng-mv"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv-er"></i>
<i class="meng meng-mv-er"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv-er"></i>
<i class="meng meng-mv-er"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv-er"></i>
<i class="meng meng-mv-er"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv-er"></i>
<i class="meng meng-mv-er"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
<li>
<div class="img">
<a href="">
<img src="img/MV.webp" alt="">
<i class="biao biao-mv-er"></i>
<i class="meng meng-mv-er"></i>
</a>
</div>
<div class="words">
<a href="">今天也要加油鸭</a>
<a href=""> 龙战骑兵（KAFKA） </a>
<span><i class="iconfont icon-ai14"></i>
751</span>
</div>
</li>
</ul>
</div>
<div class="dian">
<ul class="point-list">
<li class="clearfix"><a href="" class="point left selected"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
<li class="clearfix"><a href="" class="point left"></a></li>
</ul>
</div>
</div>
</div>
<!--页尾-->
<div class="wei">
<div class="section">
<div class="top">
<div class="wei-yi">
<span class="header">下载QQ音乐客户端</span>
<ul class="clearfix">
<li class="yi-tu left"></li>
<li class="er-tu left"></li>
<li class="san-tu left"></li>
<li class="si-tu left"></li>
<div class="yi">
<li class="left"><a href="" class="zi ">PC版</a></li>
<li class="left"><a href="" class="zi">Mac版</a></li>
<li class="left"><a href="" class="zi">Android版</a></li>
<li class="left"><a href="" class="zi">iPhone版</a></li>
</div>
</ul>
</div>
<div class="wei-er">
<span class="header">特色产品</span>
<ul class="clearfix">
<li class="yi-tu yi left"></li>
<li class="er-tu er left" ></li>
<li class="san-tu san left"></li>
<li class="si-tu si left"></li>
<div class="yi">
<li class="left"><a href="" class="zi ">全民K歌</a></li>
<li class="left"><a href="" class="zi">银河音效</a></li>
<li class="left"><a href="" class="zi">QPlay</a></li>
<li class="left"><a href="" class="zi">Fan直播伴侣</a></li>
<li class="left"><a href="" class="zi ">车载互联</a></li>
<li class="left"><a href="" class="zi">QQ演出</a></li>
</div>
</ul>
</div>
<div class="wei-san">
<span class="header">合作链接</span>
<ul class="clearfix">
<li class="left"><a href="" class="zi ">CJ ENM</a></li>
<li class="left"><a href="" class="zi">腾讯视频</a></li>
<li class="left"><a href="" class="zi">手机QQ空间</a></li>
<li class="left"><a href="" class="zi">最新版QQ</a></li>
<li class="left"><a href="" class="zi ">腾讯社交广告</a></li>
<li class="left"><a href="" class="zi">电脑管家</a></li>
<li class="left"><a href="" class="zi">QQ浏览器</a></li>
<li class="left"><a href="" class="zi">腾讯微云</a></li>
<li class="left"><a href="" class="zi">腾讯云</a></li>
<li class="left"><a href="" class="zi">企鹅FM</a></li>
<li class="left"><a href="" class="zi">智能电视网</a></li>
<li class="left"><a href="" class="zi">当贝市场</a></li>
<li class="left"><a href="" class="zi">酷我音乐</a></li>
<li class="left"><a href="" class="zi">酷狗听书</a></li>
</ul>
</div>
<div class="wei-zhong-yi">
<span class="header">开放平台</span>
<ul class="clearfix">
<li class="left"><a href="" class="zi">QQ音乐开放平台</a></li>
<li class="left"><a href="" class="zi">腾讯音乐人</a></li>
<li class="left"><a href="" class="zi">音乐推-歌曲推广</a></li>
<li class="left"><a href="" class="zi">TME聚星-歌曲定制</a></li>
<li class="left"><a href="" class="zi">启明星Venus-词曲交易/歌曲推广</a></li>
<li class="left"><a href="" class="zi">TME Studio</a></li>
<li class="left"><a href="" class="zi">臻品音质认证</a></li>
</ul>
</div>
<div class="wei-zhong-er">
<span class="header">TME集团官网</span>
<ul class="clearfix">
<li class="left"><a href="" class="zi">腾讯音乐</a></li>
</ul>
</div>
</div>
<div class="bottom">
<p>
<a href="" class="left">关于腾讯</a>
<a href="" class="left">About Tencent </a>
<a href="" class="left">服务条款</a>
<a href="" class="left">用户服务协议</a>
<a href="" class="left">隐私政策 </a>
<a href="" class="left">权利声明</a>
<a href="" class="left">广告服务</a>
<a href="" class="left">腾讯招聘</a>
<a href="" class="left">客服中心</a>
<a href="" class="left">网站导航</a>
<a href="" class="left">举报中心</a>
</p>
<p class="p" >
<span class="span left">Copyright © 1998 - 2023 Tencent. </span>
<a href="" class="a left">All Rights Reserved.</a>
</p>
<p>
<span class="left">腾讯公司</span>
<a href="" class="left">版权所有</a>
<a href="" class="left">营业执照</a>
<span class="left">网络文化经营许可证：</span>
<a href="" class="left">粤网文[2023]2882-203号</a>
<span class="left">客服电话：</span>
<a href="" class="left">4006016666</a>
<span class="left">违法与不良信息举报邮箱：</span>
<a href="" class="left">tme_musicjubao@tencentmusic.com</a>
</p>
</div>
</div>
</div>
</body>
</html>登录区HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container clearfix">
<div class="header clearfix">
<h2><a href="" class="selected">QQ登录</a></h2>
<h2><a href="">微信登录</a></h2>
</div>
<div class="left">
<h1>快捷登录</h1>
<span>使用<a href="" class="qq">QQ手机版</a>扫码登录。</span>
<div class="tu">
<img src="img/ptqrshow.png" alt="">
</div>
<div class="wei">
<a href="" class="wei-zi">密码登录</a>
<a href="" class="wei-zi">注册账号</a>
<a href="" class="wei-zi">意见反馈</a>
</div>
</div>
<div class="right">
<div class="xuan">
<div class="kuang">
<input type="checkbox" id="xuan">
<span>全选 <a href="" class="qq">QQ音乐</a>将获取以下权限：</span></div>
<div class="kuang">
<input type="checkbox"id="xuan">
<span>使用你的QQ头像、昵称信息</span></div>
<div class="kuang">
<input type="checkbox" id="xuan">
<span>你的QQ好友关系
授权即同意<a href="" class="qq">服务协议</a>和<a href="" class="qq">QQ隐私保护指引</a></span></div>
</div>
</div>
<div class="button">
<a href="">下载客户端 体验更多内容</a>
</div>
</div>
</body>
</html>CSS代码
主页面CSS代码
/*通用样式 */
/**/
/* .login:hover+iframe{
display: block;
} */
iframe {
display: none;
width: 700px;
height: 500px;
position: absolute;
top: 120px;
left: 300px;
z-index: 2;
overflow: hidden;
background-color: #fff;
}
body {
width: 1440px;
overflow-x: hidden;
}
.container {
width: 1200px;
margin: 0 auto;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.left {
float: left;
}
.right {
float: right;
}
.content {
width: 100%;
background: url("../img/背景.webp")no-repeat;
background-position: 0 0;
overflow: hidden;
line-height: 1.5;
position: relative;
}
.content .section {
width: 1200px;
margin: 0 auto;
}
/*内容区菜单开始*/
.content .section .list span {
height: 51px;
display: inline-block;
padding: 10px;
line-height: 51px;
text-align: center;
font-size: 15px;
margin-right: 35px;
cursor: pointer;
}
.content .section .list span:hover {
color: #31c27c;
}
/*内容区菜单结束*/
/*内容区标题开始*/
.content .section .header {
text-align: center;
width: 100%;
padding-top: 30px;
padding-bottom: 5px;
}
.content .section h2 {
font-size: 30px;
margin: 0 auto;
width: 196px;
height: 40px;
padding-top: 50px 0;
}
/*内容区标题结束*/
/*箭头开始*/
.content .section .zuo {
display: block;
width: 80px;
height: 108px;
color: #636262;
background: rgba(0, 0, 0, .1);
text-align: center;
line-height: 108px;
font-size: 20px;
position: absolute;
display: none;
z-index: 1;
}
.content .section .you {
display: block;
width: 80px;
height: 108px;
background: rgba(0, 0, 0, .1);
color: #636262;
text-align: center;
line-height: 108px;
font-size: 20px;
position: absolute;
display: none;
z-index: 1;
}
.content:hover .zuo,
.content:hover .you {
display: block;
}
/*箭头结束*/
/*图片+文字*/
.item-list li {
display: inline-block;
float: left;
font-size: 14px;
margin-right: 20px;
}
.item-list li .img {
width: 224px;
height: 224px;
display: block;
padding-bottom: 15px;
}
.img:hover .biao,
.img:hover .meng {
display: block;
}
.img .meng {
background-color: rgba(0, 0, 0, .5);
width: 224px;
display: block;
height: 224px;
position: absolute;
display: none;
top: 147px;
}
.img .biao {
display: block;
height: 224px;
width: 224px;
background: url(../img/播放.png)no-repeat;
background-position: 50%;
position: absolute;
background-size: 60px;
top: 150px;
display: none;
}
.tu-new .img .biao-new {
width: 86px;
height: 86px;
background-size: 45px;
top: 2px;
}
.tu-new .meng-new {
width: 86px;
height: 86px;
background-size: 45px;
top: 0px;
}
.die .img .biao-die-i {
top: 5px;
}
.die .img .meng-die-i {
top: 0;
}
/*
.meng{z-index: 1;
background-color: rgba(0, 0, 0, .1);
z-index: 1; z-index: 1;
}
.img .iconfont{
display: none;
}
.item-list li .img img:hover+.iconfont{
display:block;
}*/
.item-list li img {
width: 100%;
display: block;
}
.item-list li .words a,
span {
display: block;
}
.item-list li:last-child {
margin-right: 0;
}
/*图片+文字结束*/
/*点开始*/
.dian {
width: 270px;
margin: 20px auto;
}
.dian .point-list .point {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ccc;
margin: 30px 15px;
}
.dian .point-list li {
display: inline-block;
}
.dian .point-list .selected {
background: #636262;
}
/*点结束*/
/*播放蒙层*/
/*播放蒙层结束*/
/*通用样式结束*/
/*标题*/
.header .container {
height: 90px;
position: relative;
}
.header .logo {
width: 170px;
height: 90px;
}
.header .logo img {
width: 100%;
margin-top: 20px;
}
.header .list li a {
height: 90px;
text-align: center;
line-height: 90px;
display: inline-block;
padding: 0 20px;
font-size: 18px;
}
.header .list {
display: inline-block;
}
.header .list li .selected {
background-color: #31c27c;
color: #fff;
}
.header .list .yin a {
margin-left: 45px;
}
/*标题结束*/
/*客户端开始*/
.header .list .biao {
position: relative;
font-size: 12px;
line-height: 1.5;
}
.header .list .biao img {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
height: 14px;
}
.header .list .biao .nav {
width: 160px;
height: 160px;
border: 1px solid #ccc;
position: absolute;
top: 60px;
left: 10px;
box-sizing: border-box;
border-radius: 5px;
background: #fff;
z-index: 1;
}
.header .list .biao .nav p {
margin: 10px 10px;
}
.header .list .biao .nav .yi {
background: url("/bank/img/1.png")no-repeat;
background-position: 0 0;
width: 14px;
height: 14px;
margin-right: 9px;
vertical-align: -3px;
display: inline-block;
}
.header .list .biao .nav .er {
background: url("/bank/img/1.png")no-repeat;
background-position: 0 -30px;
width: 14px;
height: 14px;
margin-right: 9px;
vertical-align: -3px;
display: inline-block;
}
.header .list .biao .nav .san {
background: url("/bank/img/1.png")no-repeat;
background-position: 0 -60px;
width: 14px;
height: 14px;
margin-right: 9px;
vertical-align: -3px;
display: inline-block;
}
.header .list .biao .nav .xiazai {
width: 110px;
height: 25px;
font-size: 12px;
line-height: 25px;
color: #fff;
text-align: center;
border-radius: 25px;
background-color: #31c27c;
background-image: linear-gradient(90deg, #24ccaa, #31c27c);
margin: 10px 5px;
}
.header .list .biao .nav {
display: none;
}
.header .list .biao .ke:hover+.nav {
display: block;
}
/*客户端结束*/
.header .search {
position: absolute;
top: 25px;
right: 300px;
color: #000;
}
.header .search button {
position: absolute;
top: 9px;
right: -3px;
background: transparent;
}
input[type=text] {
width: 195px;
height: 35px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.header .login a {
font-size: 16px;
display: block;
width: 38px;
height: 90px;
margin-right: 10px;
margin-left: 220px;
line-height: 80px;
}
.header .login a:hover {
font-size: 16px;
}
/*开通VIP开始*/
.header .kaitong {
position: absolute;
right: 98px;
top: 0;
}
.header .kaitong .kai {
font-size: 13px;
width: 122px;
display: block;
height: 38px;
background-color: #31c27c;
color: #fff;
border-color: #31c27c;
text-align: center;
line-height: 38px;
margin-top: 20px;
border-radius: 3px;
margin-right: 10px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
position: relative;
}
.header .kaitong .kai::after {
position: absolute;
content: "";
right: 16px;
top: 16px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #fff;
}
.header .kaitong .kai:hover::after {
border-bottom: 6px solid #fff;
border-top: 0;
}
.header .kaitong .list {
width: 122px;
height: 38px;
text-align: center;
line-height: 38px;
font-size: 13px;
color: #000;
border: 1px solid #ccc;
box-sizing: border-box;
}
.header .kaitong .yi {
margin-bottom: -1px;
border-top: 0;
}
.header .er {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.header .kaitong .list:hover {
background-color: #31c27c;
color: #fff;
border-color: #31c27c;
}
.header .yiji-nav {
display: none;
}
.header .kaitong .kai:hover+.yiji-nav {
display: block;
}
/*开通VIP结束*/
/*充值开始*/
.header .chongzhi {
position: absolute;
right: 0;
top: 0;
}
.header .chongzhi .chong {
display: block;
font-size: 13px;
width: 83px;
height: 38px;
line-height: 38px;
text-align: center;
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
position: relative;
}
.header .chongzhi .chong:hover {
background-color: #31c27c;
color: #fff;
border-color: #31c27c;
}
.header .chongzhi .menu {
display: none;
}
.header .chongzhi .list {
width: 83px;
height: 38px;
line-height: 38px;
text-align: center;
font-size: 13px;
color: #000;
border: 1px solid #ccc;
box-sizing: border-box;
border-top: 0;
}
.header .chongzhi .chong:hover+.menu {
display: block;
width: 83px;
}
.header .chongzhi .list:hover {
background-color: #31c27c;
color: #fff;
border-color: #31c27c;
}
.header .chongzhi .erji {
position: absolute;
right: -62px;
top: 95px;
border-top: 1px solid #ccc;
display: block;
}
.header .chongzhi .er:hover+.zi {
display: block;
}
.header .chongzhi .zi {
display: none;
}
.header .chongzhi .chong::after {
position: absolute;
content: "";
right: 13px;
top: 16px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid #000;
}
.header .chongzhi .chong:hover::after {
border-bottom: 6px solid #fff;
border-top: 0;
}
/*充值结束
*/
.header .menu-xia {
width: 750px;
margin: 0 auto;
border-top: 1px solid #f0efef;
}
.header .menu-xia a {
height: 51px;
display: inline-block;
padding: 10px;
line-height: 51px;
text-align: center;
font-size: 15px;
margin-right: 35px;
}
/*标题结束*/
/*歌单推荐*/
.content .tui .list {
width: 650px;
margin: 0 auto;
}
.tui {
height: 532px;
}
.content .section .ge-l {
top: 180px;
left: 0px;
}
.content .section .ge-r {
top: 180px;
right: 15px;
}
/*歌单推荐结束*/
/*新歌首发开始*/
.xin {
height: 566px;
}
.item-list-new {
width: 1210px;
margin: 0 auto;
}
.tu-new li {
width: 400px;
height: 110px;
font-size: 14px;
display: inline-block;
position: relative;
}
.tu-new .img {
width: 86px;
height: 86px;
}
.tu-new .img img {
width: 100%;
display: block;
overflow: hidden;
/*可以实现文字环绕*/
}
.tu-new .words a {
display: block;
/*元素换行，注意文字不浮动*/
padding: 10px 0;
padding-left: 95px;
max-width: 320px;
width: 320px;
text-overflow: ellipsis;
white-space: nowrap;
/*设置一个最大宽度，多余的用圆点代替*/
}
.tu-new .words span {
position: absolute;
top: 35px;
right: 5px;
cursor: pointer;
}
.content .xin .list {
width: 510px;
margin: 0 auto;
}
/*新歌首发结束*/
/*精彩推荐开始*/
.cai {
height: 458px;
}
.tu-cai li {
display: inline-block;
margin: 20px 0;
position: relative;
}
.tu-cai .img .tu-yi {
width: 610px;
height: 236px;
position: absolute;
left: -60px;
top: 30px;
}
.tu-cai .img .tu-er {
width: 610px;
height: 236px;
position: absolute;
right: -800px;
top: 30px;
}
.tu-cai .img:hover+.tu-cai-biao-yi {
display: block;
}
.tu-cai .tu-cai-biao-yi:hover+.biao {
display: block;
}
.tu-cai .biao {
display: none;
}
.tu-cai .tu-cai-biao-yi {
position: absolute;
top: 35px;
right: -795px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
display: none;
}
.tu-cai .tu-cai-biao-er {
position: absolute;
top: 65px;
right: -795px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
}
.tu-cai .tu-cai-biao-san {
position: absolute;
top: 95px;
right: -795px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
}
.tu-cai .tu-cai-biao-yi-zuo {
position: absolute;
top: 35px;
left: 520px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
display: none;
}
.tu-cai .tu-cai-biao-san-zuo {
position: absolute;
top: 95px;
left: 520px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
}
.tu-cai .tu-cai-biao-er-zuo {
position: absolute;
top: 65px;
left: 520px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
}
.tu-cai .img:hover+.tu-cai-biao-yi-zuo {
display: block;
}
.tu-cai .tu-cai-biao-yi-zuo:hover+.biao {
display: block;
}
.tu-cai .biao {
display: none;
}
/*精彩推荐结束*/
/*新碟首发开始*/
.die {
height: 818px;
}
.die .list {
width: 510px;
margin: 0 auto;
}
.die .item-list li {
margin-bottom: 10px;
margin-right: 16px;
}
.die .die-l {
top: 400px;
left: 0px;
}
.die .die-r {
top: 400px;
right: 15px;
}
.die .img {
position: relative;
}
.die .die-biao-yi {
position: absolute;
top: 5px;
left: 195px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
display: none;
z-index: 1;
}
.die .die-biao-er {
position: absolute;
top: 35px;
left: 195px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
}
.die .die-biao-san {
position: absolute;
top: 65px;
left: 195px;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: rgb(103, 217, 246);
background-color: #fff;
}
.die .img:hover .die-biao-yi {
display: block;
}
.die .die-biao-yi:hover+.biao-die {
display: block;
}
.die .biao-die {
display: none;
}
.die .list .duo {
position: absolute;
top: 73px;
right: 90px;
}
/*新碟首发结束*/
/*排行榜开始*/
.bang {
height: 670px;
}
.bang .dan-li {
width: 224px;
height: 500px;
color: #fff;
background: url("/qq音乐/img/排行榜.webp");
background-position: 0 0;
text-align: center;
margin-right: 20px;
}
.bang .dan-li-er {
background-position: 224px 0;
}
.bang .dan-li-san {
background-position: 448px 0;
}
.bang .dan-li-si {
background-position: 672px 0;
}
.bang .dan-liwur {
background-position: 896px 0;
}
.bang .dan-li:last-child {
margin-right: 0;
}
.bang .dan .dan-li {
display: inline-block;
}
.bang .bang-l {
top: 320px;
left: 0;
}
.bang .bang-r {
top: 320px;
right: 15px;
}
.bang .dan-li {
position: relative;
}
.bang .bang-list a {
display: block;
font-size: 14px;
width: 224px;
height: 20px;
margin: 20px 0;
}
.bang .tu-bang .hover {
display: none;
}
.bang .tu-bang .qian:hover+.hover {
display: block;
}
.bang .tu-bang .qian:hover {
display: none;
}
.bang .bang-list .before-yi::before {
content: "1.";
position: absolute;
top: 20px;
left: -15px;
}
.bang .bang-list .before-er::before {
content: "2.";
position: absolute;
top: 100px;
left: -15px
}
.bang .bang-list .before-san::before {
content: "3.";
position: absolute;
top: 180px;
left: -15px
}
.bang .dian-bang {
width: 224px;
font-size: 25px;
padding-top: 15px;
}
.bang .re {
font-size: 35px;
margin: 10px 0;
}
.bang .tu-bang {
margin: 20px 0;
}
.bang .tu-bang i {
font-size: 25px;
}
.bang .dan{
margin-top: 20px;
}
.bang .bang-list {
width: 224px;
height: 300px;
text-align: left;
position: absolute;
left: 90px;
top: 230px;
}
/*排行榜结束*/
/*MV开始*/
.mv {
height: 685px;
}
.mv .mv-l {
position: absolute;
top: 340px;
left: 0;
}
.mv .mv-r {
position: absolute;
top: 340px;
right: 15px;
}
.mv .img img {
width: 100%;
}
.mv .tu .item-list .img {
width: 224px;
height: 126px;
}
.mv .tu .item-list li {
margin-right: 16px;
}
.mv .list {
width: 510px;
margin: 0 auto;
}
.mv .list .duo {
position: absolute;
top: 75px;
right: 20px;
}
.mv .img .biao-mv {
top: 100px;
}
.mv .img .biao-mv-er {
top: 305px;
}
.mv .img .meng-mv {
height: 126px;
top: 146px;
}
.mv .img .meng-mv-er {
height: 126px;
top: 353px;
}
/*MV结束*/
/*页尾开始*/
.wei {
height: 710px;
background-color: #333;
}
.wei .section {
position: relative;
}
.wei a {
color: #999;
font-size: 14px;
}
.wei .top {
height: 610px;
}
.wei .top .wei-yi {
width: 320px;
height: 213px;
position: absolute;
top: 0px;
left: 30px;
margin-left: 50px;
}
.wei .top .wei-er {
width: 360px;
height: 270px;
position: absolute;
left: 500px;
margin-left: 50px;
top: 0px;
}
.wei .top .wei-san {
width: 320px;
height: 420px;
position: absolute;
right: 100px;
top: 0px;
}
.wei .top .wei-zhong-yi {
width: 320px;
position: absolute;
top: 300px;
left: 30px;
margin-left: 50px;
}
.wei .top .wei-zhong-er {
width: 304px;
position: absolute;
top: 300px;
left: 500px;
margin-left: 50px;
}
.wei .bottom {
width: 900px;
height: 120px;
position: absolute;
bottom: -90px;
left: 250px;
}
.wei .yi-tu {
background-image: url("../img/页尾.png");
background-position: 20px 0;
width: 80px;
height: 50px;
}
.wei .er-tu {
background-image: url("../img/页尾.png");
background-position: -75px 0;
width: 80px;
height: 50px;
}
.wei .san-tu {
background-image: url("../img/页尾.png");
background-position: -170px 0;
width: 80px;
height: 50px;
}
.wei .si-tu {
background-image: url("../img/页尾.png");
background-position: -258px 0;
width: 80px;
height: 50px;
}
.wei .wei-yi .yi {
display: block;
}
.wei .zi {
display: block;
width: 80px;
height: 20px;
text-align: center;
line-height: 20px;
margin: 5px 0;
}
.wei .header {
height: 60px;
text-align: left;
line-height: 60px;
margin: 20px;
font-weight: normal;
color: #999;
}
.wei .wei-er .yi {
background-position: -350px 0;
}
.wei .wei-er .er {
background-position: -440px 0;
}
.wei .wei-er .san {
background-position: -540px 0;
}
.wei .wei-er .si {
background-position: -630px 0;
}
.wei .wei-san .zi {
width: 100px;
height: 21px;
}
.wei .wei-zhong-yi li {
min-width: 100px;
margin: 0 5px 12px 0;
text-indent: 25px;
}
.wei .wei-zhong-yi .zi {
width: auto;
height: auto;
}
.wei .wei-zhong-yi span {
margin-left: 25px;
}
.wei .wei-zhong-er .zi {
width: 100px;
}
.wei .bottom {
text-align: center;
line-height: 28px;
margin-top: 28px;
font-size: 12px;
color: #999;
}
.wei .bottom p {
display: block;
width: 1000px;
height: 25px;
}
.wei .bottom .p {
position: relative;
}
.wei .bottom .span {
position: absolute;
top: 0;
left: 300px;
}
.wei .bottom .a {
position: absolute;
top: 0;
left: 500px;
}
.wei .bottom a {
display: inline;
margin: 0 5px;
font-size: 12px;
}
.wei .bottom p:first-child {
padding-top: 30px;
padding-left: 80px;
}
.wei .bottom a::after {
content: " | ";
}
.wei .bottom a:last-child:after {
content: "";
}
/*页尾结束*/登录区CSS代码
.container{
width: 700px;
height: 500px;
background-color: #fff;
position: absolute;
top: 120px;
left: 400px;
}
.clearfix{
content: " ";
display: block;
clear: both;
}
.header{
width: 700px;
height: 50px;
text-align: center;
line-height: 30px;
border-bottom: 1px solid #ecebeb;
}
.header a{float: left;
width: 350px;
text-align: center;
line-height: 30px;
height: 30px;
}
.header h2{
float: left;
width: 350px;
text-align: center;
line-height: 30px;
height: 30px;
margin-top: 10px;
}
.qq:hover{
color: rgb(76, 131, 247);
}
.header a{
float: left;
font-size: 17px;
}
.selected{
color: #24ccaa;
}
.left{display: inline-block;
width: 410px;
height: 330px;
}
.left h1{
width: 300px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 20px;
margin: 10px 0;
}
.left span{
font-size: 12px;
width: 300px;
display: block;
text-align: center;
line-height: 30px;
}
.tu{
display: block;
width: 300px;
height: 250px;
position: relative;
}
.tu img{
position: absolute;
top: 20px;
left: 90px;
}
.wei
{
text-align: center;
width: 300px;
height: 30px;
position: absolute;
top: 330px;
}
.wei .wei-zi::after{
content: " |";
color: #e8e7e7;
}
.wei .wei-zi:last-child::after{
content: " ";
}
.wei .wei-zi{
margin: 5px 10px;
}
.right{
display: inline-block;
width: 230px;
height: 300px;
float: right;
}
.xuan{
display: block;
position: absolute;
top: 130px;
right: -130px;
}
input{
margin: 10px 0;
display: inline-block;
vertical-align: middle;
}
.qq{
color: rgb(76, 131, 247);
}
.button{
position: absolute;
top: 400px;
left: 230px;
display: inline-block;
padding: 0 30px;
height: 40px;
line-height: 40px;
font-size: 16px;
color: #fff;
cursor: pointer;
border-radius: 20px;
background-color: #31c27c;
background-image: linear-gradient(90deg,#24ccaa,#31c27c);
}
.kuang{
width: 350px;
height: 30px;
}
.right span{
display: inline-block;
font-size: 13px;
}效果
注意事项
1. 要紧跟在com后面加 /favicon.ico来查看网站的图标
2. 查找到图标后用
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
来引用
3. 可以在html文件中导入需要的每个css文件，也可以导入本身的css文件，其他的放到css文件中用@import导入
4. 设置图片的高可以改变图片大小
5.hover
- 点击img时显示before内容
.music-area .music-player-list li .player .img:hover::before{
display: block;}
- 点击.ke可以显示nav的内容
.header .list .biao .ke:hover+.nav{
display: block;
}
6. 当边框重复时可以将一个元素的 margin-bottom: -1px; 以解决这个问题，只留下一个边框
7. 可以单独设置某一边的弧度
8. /*设置一个最大高度，多余的用圆点代替*/
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
9. 给图片设置 overflow: hidden;可以实现文字环绕
10. 元素换行，注意文字不能浮动
a{
display: block;}
11.
想要达到鼠标移上去时是这种效果，是一个蒙层，加一个超链接字体图标完成的
想要再谁上面有这种效果，可以在其class属性中直接加icon-24gl-play
好啦！本周的分享到这里就结束啦！进入期末周，大家要好好复习！我们考完试同一时间同一地点不见不散！！！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
