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

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

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

本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对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
目录
相关文章
想飞的雪糕
|
12天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时，生成的可执行文件体积较大，通常接近 100 MB，而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时，使其能够在目标设备上独立运行，无需额外安装依赖。尽管体积较大，但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法，可以优化可执行文件的体积。
想飞的雪糕
49 3
前端全栈之路Deno篇（二）：几行代码打包后接近100M？别慌，带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
土木林森
|
1天前
|
前端开发 Unix 测试技术
揭秘！前端大牛们如何高效管理项目，确保按时交付高质量作品！
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题，帮助你学习前端大牛们的项目管理技巧，确保按时交付高质量的作品。
土木林森
9 2
谢妹纸
|
2天前
|
前端开发 JavaScript
前端在移动端使用 100vh 导致页面出现滚动条的解决方案
前端在移动端使用 100vh 导致页面出现滚动条的解决方案
谢妹纸
10 2
土木林森
|
4天前
|
前端开发 数据管理 测试技术
前端自动化测试：Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试，Cypress则擅长端到端测试，模拟用户交互。通过结合使用这两种工具，可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
土木林森
13 2
土木林森
|
5天前
|
前端开发 JavaScript 数据可视化
前端自动化测试：Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要，Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题，介绍Jest与Cypress的实战应用与最佳实践，帮助开发者提高测试效率和代码质量。
土木林森
18 2
小周sir
|
10天前
|
存储 缓存 算法
前端算法：优化与实战技巧的深度探索
【10月更文挑战第21天】前端算法：优化与实战技巧的深度探索
小周sir
10 1
中杯可乐多加冰
|
11天前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题，吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具：可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester，助力智能文档处理与知识管理。
中杯可乐多加冰
47 2
想飞的雪糕
|
19天前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记（二）：最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文，表现优异，和移动端更配
llama3.1支持128K上下文，6万字+输入，适用于多种场景。模型能力超出预期，但处理中文时需加中英翻译。测试显示，其英文支持较好，中文则需改进。llama3.2 1B参数量小，适合移动端和资源受限环境，可在阿里云2vCPU和4G ECS上运行。
想飞的雪糕
68 1
想飞的雪糕
|
13天前
|
缓存 前端开发 JavaScript
前端架构思考：代码复用带来的隐形耦合，可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧！
最近，我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问，引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题，并提出减少不必要的依赖、重视模块设计等建议，以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历，强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
想飞的雪糕
22 0
邹荣乐
|
19天前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（三）
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键（三）
邹荣乐
27 0

热门文章

最新文章

  • 1
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 2
    前端 时间个性化 插件 jquery.timeago.js
  • 3
    [前端]jekyll+markdown+github搭建个人博客
  • 4
    前端分页插件pagination
  • 5
    前端，测试如何修改后端接口返回的响应数据
  • 6
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 7
    购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session
  • 8
    合格前端系列第四弹-如何监听一个数组的变化
  • 9
    从0到上线开发企业级电商项目_前端_01_sublime使用技巧
  • 10
    前端插件集合
  • 1
    如何优化前端网页性能提升用户体验
    79
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
    556
  • 3
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
    143
  • 4
    layui：从崛起到蜕变，前端框架的华丽篇章
    212
  • 5
    前端开发中的跨域问题及解决方案
    217
  • 6
    现代前端开发中的响应式设计与移动优先策略
    111
  • 7
    现代前端开发中的响应式设计与跨平台兼容性
    137
  • 8
    前端性能优化：掌握解决方案
    45
  • 9
    数据驱动的前端设计与开发实践
    88
  • 10
    袁志佳：前端全栈工程师精英班
    111

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月