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

最新推荐文章于 2023-05-14 17:34:26 发布

原创

最新推荐文章于 2023-05-14 17:34:26 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #flex #开发职场

本文探讨了为何使用flex布局进行webapp开发，通过分析网易云音乐首页，详细介绍了如何利用flex解决页面布局问题，包括头部细节和等距排列。文章提供了相关html和css代码示例，并提出了三个实践挑战，涉及动态适配和兼容性处理。

1.为什么要用flex进行webapp布局

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

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

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

2.网易云音乐首页分析

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

先来一个html,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>001</title>
</head>
<body>
   <div id="app">
       <div id="header"></div>
       <div id="navbar"></div>
       <div class="routerview">