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

最新推荐文章于 2024-05-31 10:04:55 发布
最新推荐文章于 2024-05-31 10:04:55 发布
阅读量525 收藏 19
点赞数 8
分类专栏： 程序员 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84411072/article/details/138429003
版权
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦
网易云音乐好嗨呦网易云音乐好嗨呦

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

CSS部分

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

网易云

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{

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

(https://bbs.csdn.net/topics/618166371)**

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

[外链图片转存中…(img-i4rl7NLm-1714754564960)]

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-BwU6T4Pw-1714754564962)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

2401_84411072
关注
  • 8
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ARM嵌入式项目开发三位一体实战精讲
11-12
ARM嵌入式项目开发三位一体实战精讲
java视频教程：spring框架精讲附加实战项目练习
10-19
主要讲Spring的核心概念和基本使用。涉及IoC、DI、AOP、JdbcTemplate和事务管理等核心概念。同时讲解了xml和注解两种方式使用Spring的示例。通过Spring的入门程序介绍了Spring的 IoC 和 DI 的概念，介绍了Spring的基本模块。详细介绍了对象创建的细节和依赖注入的几种方式；介绍了如何使用注解完成Spring的相关功能；介绍了如何借助于Spring搭建JUnit测试环境；详细介绍了什么是AOP，以及AOP的基本示例；介绍了如何使用Spring中的JDBC模块进行持久层的开发与事务的相关概念和Spring的事务管理的实现方案。
前端精讲前端精讲前端精讲
05-15
前端精讲前端精讲前端精讲
千锋JavaEE精讲之Spring框架实战教程
07-22
课程简介：  这门课程主要讲Spring的核心概念和基本使用。涉及IoC、DI、AOP、JdbcTemplate和事务管理等核心概念。同时讲解了xml和注解两种方式使用Spring的示例。  通过Spring的入门程序介绍了Spring的IoC和DI的概念，介绍了Spring的基本模块。详细介绍了对象创建的细节和依赖注入的几种方式；介绍了如何使用注解完成Spring的相关 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
JavaEE精讲之Spring框架实战
07-22
课程讲Spring核心概念和使用。涉及IoC、DI、AOP、JdbcTemplate和事务管理等核心概念。 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
前端汇总（转载）
yuanbotao219的博客
01-14 7645
文章目录前端汇总一、概要二、优秀的网站三、前端技术分类综合四、各类前端资源综合类入门类工具类综合效果搜索平台团队Blog开发中心Nodejs综合APIEcmascriptVueAngularjsReactWebpackGulpJs templateHTML5(HTML)CSS3(CSS)移动端APIjQueryD3RequriejsSeajsLess,sassMarkdown兼容性UI相关其它AP......
精讲前端实战项目之移动端网易云首页（附源码
wdsfgj的博客
04-06 336
发现音乐我的音乐朋友账号CSS部分首先要在头标签中引入css样式*{html,body{html{body{headerheader{flex:1;flex:1;bottom:0;color:#fff;margin:0;padding:0;body{
精讲前端实战项目之移动端网易云首页（附源码）_仿网易云音乐移动端开发简历说明
2401_84411072的博客
05-04 131
第三步：中间的主体部分推荐歌单，其中图片的引入是一样的，我就用了几张一样的图片，省的浪费时间下载。第二步：中间的导航栏，包括个性推荐、歌单、主播电台、排行榜。首先要在头标签中引入css样式。第一步：首先编写首页的搜索框。第四步：最下方的页脚设置。
精讲前端实战项目之移动端网易云首页（附源码）(1)
2401_84411018的博客
05-04 647
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了nt{总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了。
精讲前端实战项目之移动端网易云首页（附源码）_仿网易云音乐移动端开发简历说明(1)
2401_84150394的博客
05-16 238
因为我们做的是一个静态页面，所以没有用到JavaScript部分的内容，用html编写整体框架，用css做修饰就好了。其中images中存放的是需要用到的图片。第三步：中间的主体部分推荐歌单，其中图片的引入是一样的，我就用了几张一样的图片，省的浪费时间下载。(img-nYREdvts-1715832673530)](img-V7ZSSSnk-1715832673530)](img-xxx42jE1-1715832673531)]第二步：中间的导航栏，包括个性推荐、歌单、主播电台、排行榜。
前端资料大全
weixin_55356940的博客
04-25 4574
前端资源（一入前端深似海） 前端知识体系http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构https://github.com/JacksonTian/fks Web前端开发大系概览https://github.com/unruledboy/WebFrontEndStack Web前端开发大系概览-中文版http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html We...
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 497
记录一次前端页面崩溃的产生及处理
前端开发记录
最新发布
qq_25806839的博客
05-31 157
【代码】前端开发记录。
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 506
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 937
Web前端三大主流框架介绍：Angular、React、Vue
vue 笔记03
m0_47045804的博客
05-30 867
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
【JS实战案例汇总——不定时更新版】
微木
05-30 330
练习JS的实用案例，倒计时算法、定时轮播图
directx3d hlsl高级实例精讲 源码
07-07
### 回答1： 《DirectX 3D HLSL高级实例精讲源码》是一本讲解DirectX 3D HLSL编程的书籍，通过深入研究DirectX 3D编程技术，教授读者如何高效地编写图形渲染引擎。本书除了详细介绍DirectX 3D和HLSL的基础知识以外，还重点讲解了一些高级实例。 在书中，作者以源码的形式给出了完整的示例代码，通过这些代码，读者可以一步步了解如何实现各种图形渲染效果。这些示例代码包括了各种常见的图形渲染技术，如阴影、光照、镜面反射、法线贴图等。通过学习这些示例代码，读者可以掌握如何在DirectX 3D中高效地实现这些效果。 此外，书中还介绍了一些更加复杂和高级的图形渲染技术。例如，作者详细阐述了如何实现全局光照和实时全局光照，以及如何使用HDR和bloom效果，使得渲染出的图像更加真实和逼真。 除了示例代码之外，书中还提供了详细的解析和讲解。作者逐步分析每一部分代码的实现原理和技巧，并给出了相应的图形效果演示。读者不仅可以通过运行代码来亲自体验这些效果，还可以深入了解其背后的原理和思想。 总而言之，《DirectX 3D HLSL高级实例精讲源码》是一本高质量、实用性强的编程教材。通过学习本书，读者可以系统地学习和掌握DirectX 3D和HLSL编程技术，并能够运用这些技术实现各种图形渲染效果。无论是对于初学者还是有一定经验的开发者来说，这本书都是一本值得推荐的必备读物。 ### 回答2： DirectX 3D HLSL高级实例精讲源码是指在学习和理解DirectX 3D图形编程中的高级技术和概念时，使用的源代码示例。这些源码示例是为了帮助开发者更深入地了解和掌握DirectX 3D HLSL编程相关的知识而开发的。 源码示例通常包含不同场景下的图形渲染代码，如基础渲染管线配置、光照和材质、阴影效果、几何绘制、纹理和贴图等。通过阅读和分析这些源码示例，开发者可以学习如何使用DirectX 3D提供的HLSL语言编写着色器代码，以及如何在渲染管线中实现各种高级效果。 例如，在学习光照和材质时，源码示例可能包含了用于计算不同光照类型（如环境光、点光源、平行光等）的着色器代码，以及用于设置和应用不同材质属性（如漫反射、镜面反射、折射等）的代码。通过分析这些示例代码，开发者可以了解如何在HLSL中实现光照效果，并将其应用到自己的项目中。 源码示例还可能包含用于实现各种高级效果的代码，例如阴影效果的代码示例可能涉及到使用阴影贴图和深度纹理进行渲染的技术。开发者可以通过分析这些示例代码了解如何在HLSL中实现阴影效果，并将其应用到自己的项目中。 总之，DirectX 3D HLSL高级实例精讲源码提供了一系列示例代码，通过阅读和分析这些代码，开发者可以更好地理解和掌握DirectX 3D HLSL编程的高级技术和概念。 ### 回答3： DirectX 3D High-Level Shading Language (HLSL) 是一种用于编写图形着色器的编程语言，常用于开发游戏和图形应用程序。HLSL 高级实例精讲涉及了一些更高级的概念和技术，有助于开发人员更好地理解和使用HLSL。 在HLSL高级实例精讲中，我们将深入学习和讨论一些在图形编程中广泛应用的技术。我们将看到如何使用HLSL编写更复杂的着色器，包括几何着色器、像素着色器、计算着色器等。我们还将学习如何利用着色器中的流程控制、条件语句和循环语句来实现更灵活和高效的图形渲染。 在高级实例精讲中，我们还将研究一些更高级的图形效果和技术，如法线贴图、环境光遮蔽（AO）、反射（Reflection）、折射（Refraction）等。我们将学习如何使用HLSL代码来实现这些效果，并深入理解这些技术的原理和实现方式。 除了深入研究HLSL技术外，高级实例精讲还包括大量的源码示例和案例研究。这些实例将帮助开发人员更好地理解和应用所学的知识。通过分析这些源码示例，我们将学习一些优化技巧和最佳实践，以实现更高效、更流畅的图形渲染。 总之，DirectX 3D HLSL高级实例精讲涵盖了许多高级的图形编程技术和效果，并提供了大量的源码示例和案例研究。通过学习这些内容，开发人员可以更全面地掌握HLSL技术，提高游戏和图形应用程序的质量和性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值