AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2021-12-07 893
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 精讲前端实战项目之移动端网易云首页（附源码）

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


一、效果展示

image.png


二、 技术要求

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

image.png

网络异常，图片无法展示
|


三、源代码讲解

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;
}


四、结语：

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



文章标签：
JavaScript
前端开发
关键词：
前端移动端
前端实战
前端项目
前端源码
前端首页
静Yu
目录
相关文章
想飞的雪糕
|
25天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时，生成的可执行文件体积较大，通常接近 100 MB，而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时，使其能够在目标设备上独立运行，无需额外安装依赖。尽管体积较大，但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法，可以优化可执行文件的体积。
想飞的雪糕
103 3
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
土木林森
|
8天前
|
移动开发 前端开发 JavaScript
惊！这些前端技术竟然能让你的网站在移动端大放异彩！
随着互联网技术的发展，移动设备成为主要的上网工具。本文介绍了几种关键的前端技术，包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计，帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
土木林森
17 3
欲揽西江月
|
10天前
|
缓存 前端开发 搜索推荐
前端性能优化实战：提升网页加载速度
前端性能优化实战：提升网页加载速度
欲揽西江月
18 1
土木林森
|
15天前
|
前端开发 Unix 测试技术
揭秘！前端大牛们如何高效管理项目，确保按时交付高质量作品！
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题，帮助你学习前端大牛们的项目管理技巧，确保按时交付高质量的作品。
土木林森
28 2
土木林森
|
18天前
|
前端开发 数据管理 测试技术
前端自动化测试：Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试，Cypress则擅长端到端测试，模拟用户交互。通过结合使用这两种工具，可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
土木林森
35 2
土木林森
|
19天前
|
前端开发 JavaScript 数据可视化
前端自动化测试：Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要，Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题，介绍Jest与Cypress的实战应用与最佳实践，帮助开发者提高测试效率和代码质量。
土木林森
28 2
小周sir
|
24天前
|
存储 缓存 算法
前端算法：优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法：优化与实战技巧的深度探索
小周sir
20 1
中杯可乐多加冰
|
25天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题，吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具：可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester，助力智能文档处理与知识管理。
中杯可乐多加冰
71 2
想飞的雪糕
|
26天前
|
缓存 前端开发 JavaScript
前端架构思考：代码复用带来的隐形耦合，可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧！
最近，我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问，引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题，并提出减少不必要的依赖、重视模块设计等建议，以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历，强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
想飞的雪糕
26 0
邹荣乐
|
1月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（三）
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（三）
邹荣乐
34 0

热门文章

最新文章

  • 1
    前端，测试如何修改后端接口返回的响应数据
  • 2
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 3
    前端分页插件pagination
  • 4
    前端 时间个性化 插件 jquery.timeago.js
  • 5
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 6
    [前端]jekyll+markdown+github搭建个人博客
  • 7
    AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程
  • 8
    【前端】vue3+elment plus实现table表格右侧滑动分页加载
  • 9
    你用过的网站前端优化的技术有哪些？
  • 10
    wordpress页面前端添加编辑按钮
  • 1
    前端利器SASS之入门篇，前端开发你需要了解的那些事
    64
  • 2
    sass 公用10个mixins代码块，算法太TM重要了，前端开发要求
    46
  • 3
    JS的几种设计模式，Web前端基础三剑客学习知识分享，前端零基础开发
    51
  • 4
    CSS3 转换，深入理解Flutter动画原理，前端基础图形
    65
  • 5
    4(1)，阿里面试官，前端开发面试题目
    51
  • 6
    【前端】websocket 讲解与项目中的使用
    84
  • 7
    详解前端登录流程：实现原理与最佳实践
    284
  • 8
    npm与Maven：前端与后端构建工具深度对比学习
    186
  • 9
    TypeScript：前端世界的“甜蜜烦恼”——究竟该不该用？
    52
  • 10
    前端获取当前日期---------------年月日//时分秒
    63

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 借助OSS搭建在线教育视频课程分享网站
  • 快速搭建移动端可视化看板
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云OSS设置跨域访问