本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对html，css，JavaScript等基础知识已经是相当熟悉了。但是没有一个自己的作品，那是因为缺乏练习一些实战项目。今天这个就是一个很好的实战例子——移动端网易云首页，刚开始就做一些简单的静态网页。

本人会用到很多标签，如果忘记了可以查看下面两篇博文。

标签详解第一篇

标签详解第二篇

一、效果展示

二、技术要求

因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就好了。其中images中存放的是需要用到的图片。

三、源代码讲解

HTML部分

第一步：首先编写首页的搜索框

<header><i class="iconfont"></i><form action=""><i class="iconfont"></i><input type="text" value="搜索音乐、歌词、电台"></form><i class="iconfont"></i></header>

第二步：中间的导航栏，包括个性推荐、歌单、主播电台、排行榜

<nav><a href="">个性推荐</a><a href="">歌单</a><a href="">主播电台</a><a href="">排行榜</a></nav>

第三步：中间的主体部分推荐歌单，其中图片的引入是一样的，我就用了几张一样的图片，省的浪费时间下载。

<main><section class="content"><article class="banner"><img src="../images/banner.png" alt=""></article><article class="adcontent"><dl><dt class="iconfont">
</dt><dd>私人FM</dd></dl><dl><dt class="iconfont"></dt><dd>开启个性推荐</dd></dl><dl><dt class="iconfont"></dt><dd>云音乐新歌榜</dd></dl></article><article class="title"><aside><i class="iconfont"></i><span>推荐歌单</span></aside><aside><i>更多</i><span>&gt;</span></aside></article><article class="imglist"><dl><dt><img src="../images/pic_07.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_09.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_11.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_07.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_09.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_11.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_07.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_09.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_11.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_07.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_09.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><img src="../images/pic_11.png" alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl></article></section></main>

第四步：最下方的页脚设置

<footer><aside><i class="iconfont"></i><span>发现音乐</span></aside><aside><i class="iconfont"></i><span>我的音乐</span></aside><aside><i class="iconfont"></i><span>朋友</span></aside><aside><i class="iconfont"></i><span>账号</span></aside></footer>

CSS部分

首先要在头标签中引入css样式

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>网易云</title><link rel="stylesheet" type="text/css" href="../css/reset.css"><link rel="stylesheet" type="text/css" href="../iconfont/iconfont.css"><link rel="stylesheet" type="text/css" href="../css/webapp.css">
</head>

1.anchor.css

@charset "UTF-8";
*{box-sizing: border-box;
}
html,body{height:100%;
}
html{font-size:26.67vw;
}
body{display: flex;flex-direction: column;
}
/*header*/
header{height:0.49rem;background:#d43b33;display: flex;justify-content: space-between;
}
header>.iconfont{width:0.54rem;font-size:0.24rem;color:#fcf3ff;display: flex;align-items: center;
}
header form{flex:1;background:#fff;height:0.3rem;align-self: center;display: flex;border-radius:5px;overflow:hidden;
}
header form .iconfont{padding-left:0.47rem;display: flex;align-items: center;font-size:0.14rem;color:#c8c8c8;
}
header form input{border:none;flex:1;font-size:0.14rem;color:#c8c8c8;padding-left:0.09rem;
}
header>.iconfont:first-child{padding-left:0.15rem;
}
header>.iconfont:last-child{padding-left:0.18rem;
}
/*nav*/
nav{height:0.4rem;display: flex;justify-content: space-between;padding:0 0.12rem;
}
nav a{border-bottom:4px solid #fff;display: flex;align-items: center;padding:0.06rem;
}
nav a:first-child{color:#c04033;border-color:#c04033;
}
/*footer*/
footer{height:0.48rem;width:100%;position:fixed;bottom:0;background:rgba(0,0,0,0.8);display: flex;justify-content: space-between;padding:0 0.27rem;
}
footer aside{display: flex;flex-flow:column;justify-content: center;align-items: center;
}
footer aside .iconfont{color:#b2a3a0;font-size:0.25rem;
}
footer aside span{color:#b2a3a0;font-size:0.1rem;
}
footer aside:first-child .iconfont{color: #fff;
}
footer aside:first-child span{color:#fff;
}

2.reset.css

@charset "utf-8";
html,body,ul,ol,dl,li,dt,dd,p,form,input,h1,h2,h3,h4,h5,h6,fieldset,select,img,textarea,legend{margin:0;padding:0;
}
body{font-size:16px;
}
img,fieldset{border:none;
}
img{vertical-align: middle;
}
b,strong,i,em,h1,h2,h3,h4,h5,h6{font-weight:500;font-style:normal;
}
a{text-decoration: none;color:#000;
}
ul,ol{list-style:none;
}
.clearfn:after{content:"";clear:both;display: block;overflow:hidden;height:0;visibility: hidden;
}

3.webapps.css

@charset "UTF-8";
*{box-sizing: border-box;
}
html,body{height:100%;
}
html{font-size:26.67vw;
}
body{display: flex;flex-direction: column;
}
/*header*/
header{height:0.49rem;background:#d43b33;display: flex;justify-content: space-between;
}
header>.iconfont{width:0.54rem;font-size:0.24rem;color:#fcf3ff;display: flex;align-items: center;
}
header form{flex:1;background:#fff;height:0.3rem;align-self: center;display: flex;border-radius:5px;overflow:hidden;
}
header form .iconfont{padding-left:0.47rem;display: flex;align-items: center;font-size:0.14rem;color:#c8c8c8;
}
header form input{border:none;flex:1;font-size:0.14rem;color:#c8c8c8;padding-left:0.09rem;
}
header>.iconfont:first-child{padding-left:0.15rem;
}
header>.iconfont:last-child{padding-left:0.18rem;
}
/*nav*/
nav{height:0.4rem;display: flex;justify-content: space-between;padding:0 0.12rem;
}
nav a{border-bottom:4px solid #fff;display: flex;align-items: center;padding:0.06rem;
}
nav a:first-child{color:#c04033;border-color:#c04033;
}
/*content*/
main{flex:1;background:#fff;overflow:auto;
}
main .content .banner{height:1.39rem;
}
main .content .banner img{height:100%;width:100%;
}
main .content .adcontent{display: flex;align-items: center;height:1.03rem;border-bottom: 1px solid #999;
}
main .content .adcontent dl{width:33.3%;display: flex;justify-content: center;align-items: center;flex-direction: column;
}
main .content .adcontent dl .iconfont{width:0.54rem;height:0.54rem;border:1px solid #d63934;border-radius:50%;font-size:0.25rem;color:#d2382c;display: flex;justify-content: center;align-items: center;
}
main .content .adcontent dl:nth-child(2) .iconfont{font-size:0.35rem;
}
main .content .adcontent dl dd{font-size:0.11rem;margin-top:0.07rem;
}
main .title{height:0.45rem;display: flex;justify-content: space-between;padding:0 0.1rem;
}
main .title aside:first-child{padding-top:0.2rem;
}
main .title aside:first-child .iconfont{font-size:0.15rem;color:#c04736;
}
main .title aside:first-child span{font-size:0.15rem;
}
main .title aside:last-child{font-size:0.1rem;padding-top:0.23rem;
}
main .imglist{display: flex;flex-flow:wrap;justify-content: space-between;padding:0 0.1rem;
}
main .imglist dl{width:1.14rem;margin-top:0.18rem;
}
main .imglist dl dt img{width:1.14rem;height:1.14rem;
}
main .imglist dl dd{font-size:0.12rem;line-height:0.16rem;margin-top:0.07rem;
}
/*footer*/
footer{height:0.48rem;width:100%;position:fixed;bottom:0;background:rgba(0,0,0,0.8);display: flex;justify-content: space-between;padding:0 0.27rem;
}
footer aside{display: flex;flex-flow:column;justify-content: center;align-items: center;
}
footer aside .iconfont{color:#b2a3a0;font-size:0.25rem;
}
footer aside span{color:#b2a3a0;font-size:0.1rem;
}
footer aside:first-child .iconfont{color: #fff;
}
footer aside:first-child span{color:#fff;
}

四、结语：

原创不易，本人花时间重新整理了一遍，在线求三连

精讲前端实战项目之移动端网易云首页（附源码）相关推荐

【Android App】实战项目之仿微信的视频通话（附源码和演示超详细必看）
需要源码请点赞关注收藏后评论区留言私信~~~ 虽然手机出现许多年了,它具备的功能也越来越丰富,但是最基本的通话功能几乎没有变化.从前使用固定电话的时候,通话就是听声音:如今使用最新的智能手机,通话仍旧 ...
Java毕设项目大学生校园兼职系统计算机（附源码+系统+数据库+LW）
Java毕设项目大学生校园兼职系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ E ...
03【Verilog实战】UART通信协议，半双工通信方式（附源码）
脚本:makefile(点击直达) 应用工具:vcs 和 verdi 写在前面这个专栏的内容记录的是个人学习过程,博文中贴出来的代码是调试前的代码,方便bug重现. 调试后的程序提供下载,[下载地 ...
Java毕设项目超市会员积分管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目超市会员积分管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
Java毕设项目保险公司风险测评管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目保险公司风险测评管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行) ...
Java毕设项目茶店订购管理系统2021计算机（附源码+系统+数据库+LW）
Java毕设项目茶店订购管理系统2021计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行) ...
Java毕设项目学生二手书籍交易平台计算机（附源码+系统+数据库+LW）
Java毕设项目学生二手书籍交易平台计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...
Java毕设项目社区团购系统计算机（附源码+系统+数据库+LW）
Java毕设项目社区团购系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecli ...
Java毕设项目羽毛球馆场地管理系统计算机（附源码+系统+数据库+LW）
Java毕设项目羽毛球馆场地管理系统计算机(附源码+系统+数据库+LW) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ ...

精讲前端实战项目之移动端网易云首页（附源码）