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

最新推荐文章于 2023-02-16 11:06:05 发布

忠彬老师

最新推荐文章于 2023-02-16 11:06:05 发布

阅读量2.4k

点赞数

分类专栏：原创 flex web IT职场文章标签： JavaScript flex 开发职场

本文链接：https://blog.csdn.net/mianbaolixiang/article/details/81384377

版权

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

摘要由CSDN通过智能技术生成

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"&g