HTML+CSS实现网易云音乐首页的主播电台页面_yujiaj_网易云音乐html代码

网络投稿 02-07 6341

HTML+CSS实现网易云音乐首页的主播电台页面这个页面首先使用了css的定位（postion）属性、弹性盒子（display）属性以及VM与REM，图标使用了阿里巴巴矢量图标库的矢量图标。下面让我们来看看最终效果图和代码吧。效果图：

使用到的源文件中的图片：（底部使用的矢量图标，非JPG） HTML代码：（style.css是公共样式及头部和footer的CSS样式，anchor.css是主播电台的CSS样式，iconfont.css是引入footer的矢量图标）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>主播电台</title> <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/> <link rel="stylesheet" type="text/css" href="css/anchor.css"/> <link rel="stylesheet" href="css/style.css" /> </head> <body>  <div class="top_big"> <div class="top"> <img src="img/top-01.png"/> <input type="search" name="" class="iconfont font22" value="" placeholder="  搜索音乐、歌词、电台" /> <img src="img/top-02.png"/> </div> </div>  <div class="main">  <div class="main_nav"> <a href="#">个性推荐</a> <a href="#">歌单</a> <a href="#">主播电台</a> <a href="#">排行榜</a> </div>  <div class="one_main"> <a href="#"> <img src="img/twocontent-01.png"/> 明星做主播 </a> <a href="#"> <img src="img/twocontent-02.png"/> 创作|翻唱 </a> <a href="#"> <img src="img/twocontent-03.png"/> 脱口秀 </a> <a href="#"> <img src="img/twocontent-04.png"/> 美文读物 </a> <a href="#"> <img src="img/twocontent-05.png"/> 音乐故事 </a> <a href="#"> <img src="img/twocontent-06.png"/> 情感调频 </a> <a href="#"> <img src="img/twocontent-07.png"/> 有声小说 </a> <a href="#"> <img src="img/twocontent-08.png"/> 人文历史 </a> </div>  <div class="ranking_list_big"> <div class="ranking_list"> 主播电台排行榜 最火的节目和电台，每天更新 <img src="img/twocontent-09.png"/> </div> </div>  <div class="recommend"> <h2>精彩节目推荐</h2> <ul> <li> <a href="#"> <img src="img/twocontent-10.png"/> 特别的人 最美不过告白当前唱的歌 </a> </li> <li> <a href="#"> <img src="img/twocontent-11.png"/> 什么？唐朝人不爱胖子！ 为什么糖厂审美不一样呢？ </a> </li> <li> <a href="#"> <img src="img/twocontent-12.png"/> 惨就一个字 你遇到最惨的事是什么？ </a> </li> <li> <a href="#"> <img src="img/twocontent-11.png"/> 什么？唐朝人不爱胖子！ 为什么糖厂审美不一样呢？ </a> </li> <li> <a href="#"> <img src="img/twocontent-12.png"/> 惨就一个字 你遇到最惨的事是什么？ </a> </li> </ul> </div> </div>  <div class="footer">  发现音乐  我的音乐  朋友  账号 </div> </body> </html>

style.css代码：

/*全局样式*/ *{margin:0;padding: 0;box-sizing: border-box;} li{list-style:none;} a{text-decoration: none;} i{font-style: normal;} img{display:block;border:none;} html,body{height:100%;} html{font-size:26.66667vw;} body{font-size:14px;} .left{float: left;} .right{float: right;} /*头部*/ .top_big{ width:100%; height:0.44rem; color: #cbcbcb; font-size: 26px; position: absolute; top:0; left:0; background:#d43b33; z-index: 999; } .top{ display: flex; justify-content: space-between; height: 100%; align-items: center; padding:0 0.125rem 0 0.14rem; } .top>i:first-child>img{ width: 0.19rem; height: 0.25rem; } .top>i:last-child>img{ width: 0.23rem; height: 0.23rem; } .top>input{ width: 2.67rem; height: 0.3rem; color: #dbdbdb; font-size: 14px; text-align: center; border: none; outline: none; border-radius: 0.05rem; } /*主体内容*/ /*导航*/ .main{ width: 100%; height: 100%; overflow: auto; padding: 0.44rem 0 0 0; padding-bottom: 0.7rem; } .main_nav{ width: 100%; height: 0.4rem; display: flex; line-height: 0.4rem; font-size: 14px; justify-content: space-between; padding: 0 0.25rem 0 0.13rem; border-bottom: 0.005rem solid #cdc2c8; } .main_nav a{ color: #393939; text-align: center; } .main_nav a:first-child{ width: 0.7rem; height: 100%; color: #bb4537; border-bottom: 0.02rem solid #ca403d; box-sizing: border-box; } /*焦点图*/ .banner,.banner>img{ width: 100%; height: 1.38rem; } /*内容二*/ .main_two{ width: 100%; height: 1.04rem; display: flex; justify-content: space-between; padding: 0.15rem 0.345rem 0.15rem 0.43rem; border-bottom: 0.005rem solid #e0e1e3; margin-bottom: 0.2rem; } .main_two>span{ width: 0.72rem; height: 100%; font-size: 12px; text-align: center; position: relative; } .main_two>span>img{ width: 0.55rem; height: 0.55rem; display: inline-block; vertical-align: middle; } .main_two>span>p{ position: absolute; bottom: 0; left: 0; right: 0; } /*推荐歌单*/ .recommend{ width: 100%; padding: 0 0.1rem 0 0.1rem; } .recommend_top{ height: 0.16rem; color: #323335; display:flex; justify-content: space-between; } .recommend_top>span>img{ width: 0.16rem; height: 0.16rem; display: inline-block; margin-right: 0.06rem; } .recommend_top>span>span{font-size: 14px;} .recommend_top>a{font-size: 12px;color: #696b6a;} .recommend_content{ width: 100%; padding-top: 0.2rem; } .recommend_content span{ display:flex; justify-content: space-between; } .recommend_content i{ width: 1.13rem; height: 1.52rem; font-size: 12px; position: relative; } .recommend_content i>a>img{ width: 100%; height: 1.13rem; } .recommend_content i>a{color: #424345;} .recommend_content i>a>p{ height: 0.34rem; position: absolute; bottom: 0; left: 0; } .recommend_content span:first-child{margin-bottom: 0.18rem;} /*脚部*/ .footer{ width: 100%; height: 0.49rem; position: absolute; bottom:0; left:0; background-color: rgba(0,0,0,0.75); display:flex; justify-content: space-between; padding: 0.07rem 0.28rem 0 0.28rem; } .footer>i{ width: 0.5rem; height: 0.42rem; color: #a6a8a7; text-align: center; font-size: 10px; } .footer>i>span{font-size: 25px;} .footer>i:first-child{color: #fff;}

anchor.css代码：

/*主体内容*/ /*导航*/ .main_nav a:first-child{ color: #393939!important; border-bottom: none!important; } .main_nav a:nth-child(3){ width: 0.7rem; height: 100%; color: #bb4537; border-bottom: 0.02rem solid #ca403d; box-sizing: border-box; } /*主体内容一*/ .one_main{ width: 100%; height: 1.5rem; padding: 0.18rem 0.2rem 0.1rem 0.175rem; } .one_main p{ width: 100%; height: 0.42rem; display: flex; justify-content: space-between; margin-bottom: 20px; } .one_main a{ width: 0.6rem; height: 0.42rem; text-align: center; font-size: 11px; color: #838584; position: relative; } .one_main a>img{ width: 0.26rem; height: 0.24rem; margin: 0 auto; } .one_main a>span{ position: absolute; bottom: 0; left: 0; right: 0; margin: auto; } .one_main>p:last-child{ width: 0.27rem; height: 0.06rem; display: flex; justify-content: space-between; margin: 0 auto; } .one_main>p:last-child>i{ width: 0.06rem; height: 0.06rem; border-radius: 50%; } .one_main>p:last-child>i:first-child{ background-color: #c64629; } .one_main>p:last-child>i:nth-child(2),.one_main>p:last-child>i:nth-child(3){background-color: #e2e3e5;} /*主播电台排行榜*/ .ranking_list_big{ width: 100%; height: 0.8rem; padding: 0 0.06rem; margin-top: 0.1rem; margin-bottom: 0.3rem; } .ranking_list{ width: 3.64rem; height: 0.8rem; border: 0.01rem solid #d5d6d8; box-sizing: border-box; padding: 0.11rem 0.15rem 0 0.15rem; display: flex; justify-content: space-between; } .ranking_list>span:first-child{ width: 1.69rem; height: 0.37rem; font-size: 15px; color: #313234; margin-top: 0.1rem; } .ranking_list span>p:last-child{font-size: 12px;color: #5b5c5e;margin-top: 0.1rem;} .ranking_list span>p:last-child span{color: #a04847;} .ranking_list span:last-child,.ranking_list span>img{ width: 0.865rem; height: 0.67rem; } /*精彩节目推荐*/ .recommend{ width:100%; color: #3f4042; padding: 0 0.1rem; } .recommend h2{ width: 100%; height: 0.17rem; font-size: 16px; font-weight: normal; box-sizing: border-box; padding-left: 0.06rem; border-left: 0.03rem solid #d33c31; margin-bottom: 0.14rem; } .recommend li{ width: 3.56rem; height: 0.68rem; border-top: 0.05px solid #e2e3e5; padding: 0.06rem 0 0.07rem 0; } .recommend li>a>span>img{ width: 0.56rem; height: 0.56rem; margin-right: 0.08rem; } .recommend li>a>span:last-child{ height: 0.38rem; line-height: 0.22rem; margin-top: 0.11rem; } .recommend li>a>span:last-child p:first-child{font-size: 13px;color: #323335;} .recommend li>a>span:last-child p:last-child{font-size: 12px;color: #848486;}

在这里附上源文件地址链接：https://pan.baidu.com/s/1j9_zvovted9zeNSOPoCxUQ 提取码：y1yw