资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用flex进行网易云音乐界面构建和布局解析（1）

使用flex进行网易云音乐界面构建和布局解析（1）

xingqiba / 1145人阅读

摘要：使用进行网易云音乐界面构建和布局解析为什么要用进行布局第一，布局需要清除浮动，很麻烦。剩下的部分切出来。解决动态的多屏幕适配问题提示动态计算参考代码兼容性提示

使用flex进行网易云音乐界面构建和布局解析 1.为什么要用flex进行webapp布局

第一，float布局 需要清除浮动，很麻烦。

第二，绝对定位需要考虑位置和空间占位

第三，元素垂直水平居中问题。

2.网易云音乐首页分析

3.啥也别说，直接上代码

先来一个html,

</>复制代码 
  2.     
  3.     
  4.     
  5.     001
  6.    
  7.        
  8.        
  9.        
  10.            
  11.            
     
  12.            
  13.        
  14.        
  15.

别的不说咱们先用色块把各部分堆出来，这个跟flex没半毛钱关系，只是用了rem.

</>复制代码 
  1. html{
  2.     font-size: 100px;
  3. }
  4. #header{
  5.     background-color: #d32f2f;
  6.     min-height: 0.48rem;
  7.     position: fixed;
  8.     top: 0;
  9.     left: 0;
  10.     right: 0;
  11.     z-index: 1000;
  12. }
  13. #navbar {
  14.     position: fixed;
  15.     top: 0.48rem;
  16.     left: 0;
  17.     right: 0;
  18.     z-index: 1000;
  19.     background: #ccc;
  20.     min-height: 0.3rem;
  21. }
  22. #footer {
  23.     height: 0.49rem;
  24.     background: #2f2d2e;
  25.     width: 100%;
  26.     position: fixed;
  27.     bottom: 0;
  28.     left: 0;
  29.     color: rgba(255, 255, 255, .87);
  30.     font-size: 0.12rem;
  31. }
  32. .routerview {
  33.     padding-bottom: 0.49rem;
  34. }
  35. .routerview {
  36.     position: absolute;
  37.     left: 0;
  38.     top: 0.81rem;
  39.     width: 100%;
  40.     height: 2000px;
  41.     background: #eeeeee;
  42. }

接着往下就是重点了，我们来看看头部细节细节，左右图标，

</>复制代码 
  1.        
  2.         
  3.         
  4.

css部分，

</>复制代码 
  1. #header{
  2.     align-items: center;
  3.     justify-content: space-between;
  4. }

那中间部分三个等距怎么办？

html,

</>复制代码 
  2.     
  3.     
  4.     
  5.     
  6.     
  7.     
  8.

上css,

</>复制代码 
  1. .title {
  2.     display: flex;
  3.     justify-content: center;
  4. }

结果如下，

最复杂的部分已经结束了，剩下的就很OK了。

最后给大家三个小尝试吧。

1.剩下的部分切出来。

2.解决动态的多屏幕适配问题（提示：js+rem动态计算）

</>复制代码 
  1. //参考代码：
  2. function getRem(pwidth,prem){
  3.     var html = document.getElementsByTagName("html")[0];
  4.     var oWidth = 2*document.body.clientWidth || document.documentElement.clientWidth;
  5.     html.style.fontSize = oWidth/pwidth*prem + "px";
  6. }

3.flex兼容性（提示：postcss）

云服务器 GPU云服务器 网易云音乐解析 flex布局 网易云音乐 网易云音乐下载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96484.html

相关文章

  • 使用flex进行网易云音乐界面构建和布局解析（2）

    摘要：使用进行网易云音乐界面构建和布局解析前面我们通过布局简史与决胜未来的第四代布局技术了解了布局发展史和未来，下面，我们通过使用进行网易云音乐界面构建和布局解析了解一下，如何在实际项目中使用进行布局，相信大家也体会到了它的便捷之处。 使用flex进行网易云音乐界面构建和布局解析 前面我们通过《css布局简史与决胜未来的第四代css布局技术》了解了css布局发展史和未来，下面，我们通过《使用...

    geekzhou 评论0 收藏0

  • Vue 实现网易云音乐 WebApp

    摘要：基于等开发一款移动端音乐，界面参考了安卓版的网易云音乐布局适配常见移动端。图标使用阿里巴巴图标库，中间的唱片旋转动画使用了实现。搜索功能实现功能搜索歌手歌单歌曲热门搜索数据节流上拉刷新保存搜索记录。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI ...

    Karuru 评论0 收藏0

发表评论

登陆后可评论

0条评论

xingqiba

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<