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

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

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

本篇文章分享给学习前端的朋友，可能你们长时间的学习了理论知识，对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
目录
相关文章
favori
|
1月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库，旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入，帮助开发者轻松实现3D场景与React项目的无缝融合。
favori
106 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
多客潇潇
|
7天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣，提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心，通过用户行为数据分析和机器学习提高匹配准确性。
多客潇潇
34 3
html的七十二变
|
22天前
|
存储 前端开发 JavaScript
前端状态管理：Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念，如 State、Getter、Mutation 和 Action，并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
html的七十二变
49 3
dufadayang
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合？
前端工程化的分支策略要紧密结合项目的实际情况，以实现高效的开发、稳定的版本控制和顺利的发布流程。
dufadayang
28 1
跃@sir
|
1月前
|
Web App开发 缓存 监控
前端性能优化实战：从代码到部署的全面策略
前端性能优化实战：从代码到部署的全面策略
跃@sir
31 1
Star时光
|
1月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战：从代码到部署的全面指南
前端性能优化实战：从代码到部署的全面指南
Star时光
34 1
土木林森
|
1月前
|
移动开发 前端开发 JavaScript
惊！这些前端技术竟然能让你的网站在移动端大放异彩！
随着互联网技术的发展，移动设备成为主要的上网工具。本文介绍了几种关键的前端技术，包括响应式设计、图片优化、字体选择、HTML5和CSS3的应用、性能优化及手势操作设计，帮助开发者提升网站在移动端的显示效果和用户体验。示例代码展示了如何实现简单的双向绑定功能。
土木林森
35 3
欲揽西江月
|
1月前
|
缓存 前端开发 搜索推荐
前端性能优化实战：提升网页加载速度
前端性能优化实战：提升网页加载速度
欲揽西江月
50 1
土木林森
|
1月前
|
前端开发 Unix 测试技术
揭秘！前端大牛们如何高效管理项目，确保按时交付高质量作品！
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题，帮助你学习前端大牛们的项目管理技巧，确保按时交付高质量的作品。
土木林森
41 2
土木林森
|
1月前
|
前端开发 数据管理 测试技术
前端自动化测试：Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试，Cypress则擅长端到端测试，模拟用户交互。通过结合使用这两种工具，可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
土木林森
66 2

热门文章

最新文章

  • 1
    wordpress页面前端添加编辑按钮
  • 2
    前端实现tab栏切换，这么常见的案例你学会了吗？
  • 3
    前端 时间个性化 插件 jquery.timeago.js
  • 4
    你用过的网站前端优化的技术有哪些？
  • 5
    基于qiankun落地部署微前端爬”坑“记
  • 6
    前端进阶|第四天从setTimeout、Promise看js 的异步机制
  • 7
    python 学习 第九篇 前端应用
  • 8
    前端架构成长之路——微前端架构理论篇
  • 9
    前端包管理 pnpm 学习资料整理
  • 10
    从0到上线开发企业级电商项目_前端_01_sublime使用技巧
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    88
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    83
  • 3
    使用Vue.js构建交互式前端的技术探索
    91
  • 4
    如何优化前端性能：关键步骤和技巧
    88
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    100
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    118
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    265
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    70
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    91
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    145

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 2048小游戏
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS