精讲前端实战项目之移动端网易云首页（附源码）-阿里云开发者社区

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

2021-12-07 866

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

一、效果展示

二、技术要求

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

网络异常，图片无法展示

三、源代码讲解

HTML部分

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

<header><iclass="iconfont">&#xe62f;</i><formaction=""><iclass="iconfont">&#xe660;</i><inputtype="text"value="搜索音乐、歌词、电台"></form><iclass="iconfont">&#xe513;</i></header>

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

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

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

<main><sectionclass="content"><articleclass="banner"><imgsrc="../images/banner.png"alt=""></article><articleclass="adcontent"><dl><dtclass="iconfont">&#xe627;</dt><dd>私人FM</dd></dl><dl><dtclass="iconfont">&#xe611;</dt><dd>开启个性推荐</dd></dl><dl><dtclass="iconfont">&#xe513;</dt><dd>云音乐新歌榜</dd></dl></article><articleclass="title"><aside><iclass="iconfont">&#xe637;</i><span>推荐歌单</span></aside><aside><i>更多</i><span>&gt;</span></aside></article><articleclass="imglist"><dl><dt><imgsrc="../images/pic_07.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_09.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_11.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_07.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_09.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_11.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_07.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_09.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_11.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_07.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_09.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl><dl><dt><imgsrc="../images/pic_11.png"alt=""></dt><dd>网易云音乐好嗨呦网易云音乐好嗨呦</dd></dl></article></section></main>

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

<footer><aside><iclass="iconfont">&#xe612;</i><span>发现音乐</span></aside><aside><iclass="iconfont">&#xe503;</i><span>我的音乐</span></aside><aside><iclass="iconfont">&#xe615;</i><span>朋友</span></aside><aside><iclass="iconfont">&#xe504;</i><span>账号</span></aside></footer>

CSS部分

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

<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>网易云</title><linkrel="stylesheet"type="text/css"href="../css/reset.css"><linkrel="stylesheet"type="text/css"href="../iconfont/iconfont.css"><linkrel="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;
}

四、结语：

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

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

CSS部分

热门文章

最新文章

相关课程

相关电子书

相关实验场景