CSS- 4.5 css + div 布局 简易网易云音乐 官网布置实例
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
CSS- 1.1 css选择器
CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏
CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性
CSS- 4.1 浮动（Float）
CSS- 4.2 相对定位（position: relative）
CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例
CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例
CSS- 4.5 css + div 布局 & 简易网易云音乐 官网布置实例
CSS- 4.6 radiu、shadow、animation动画
目录
系列文章目录
前言
一、CSS + Div 布局详解
1.基本概念
Div 元素
CSS 布局优势
2.常用布局技术
1. 标准流布局
2. Float 浮动布局
3. Flexbox 弹性布局
4. Grid 网格布局
3.响应式布局实现
4.常见布局模式
圣杯布局 (Holy Grail)
固定-流动-固定布局
5.最佳实践
6.现代布局趋势
二、代码实例
1.练习代码实例如下：
2.网易云音乐 代码实例：
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、CSS + Div 布局详解
CSS + Div 布局是现代网页设计中最常用的布局方式之一，它使用 <div> 元素作为容器，结合 CSS 进行样式控制和布局定位。
1.基本概念
Div 元素
<div> (division) 是一个块级容器元素，本身不表示任何特定内容，主要用于布局和样式控制。
CSS 布局优势
- 分离内容与表现
- 精确控制布局
- 响应式设计支持
- 代码简洁高效
2.常用布局技术
1. 标准流布局
默认情况下，元素按照 HTML 文档流顺序从上到下排列。
html
<div class="container"><div class="header">页眉</div><div class="content">内容</div><div class="footer">页脚</div>
</div>2. Float 浮动布局
css
.left {float: left;width: 200px;
}
.right {float: right;width: 200px;
}
.main {margin-left: 200px;margin-right: 200px;
}注意：浮动布局需要清除浮动，常用方法：
css
.clearfix::after {content: "";display: block;clear: both;
}3. Flexbox 弹性布局
css
.container {display: flex;justify-content: space-between;
}
.item {flex: 1;
}Flexbox 特点：
- 一维布局（行或列）
- 响应式设计友好
- 简单对齐控制
4. Grid 网格布局
css
.container {display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 100px auto 50px;gap: 10px;
}Grid 特点：
- 二维布局（行和列）
- 精确控制行列大小
- 复杂布局实现简单
3.响应式布局实现
css
/* 默认移动端样式 */
.container {width: 100%;
}/* 平板及以上 */
@media (min-width: 768px) {.container {width: 750px;margin: 0 auto;}
}/* 桌面及以上 */
@media (min-width: 992px) {.container {width: 970px;}
}4.常见布局模式
圣杯布局 (Holy Grail)
html
<div class="container"><div class="header">Header</div><div class="content"><div class="main">Main Content</div><div class="left">Left Sidebar</div><div class="right">Right Sidebar</div></div><div class="footer">Footer</div>
</div>固定-流动-固定布局
css
.left {float: left;width: 200px;
}
.right {float: right;width: 200px;
}
.main {margin: 0 200px;
}5.最佳实践
- 语义化 HTML：合理使用 HTML5 语义化标签（
<header>,<nav>,<main>等） - 盒模型设置：
box-sizing: border-box更易控制尺寸 - CSS 复位：统一不同浏览器的默认样式
- 性能优化：避免过多嵌套，减少选择器复杂度
- 响应式设计：使用媒体查询适配不同设备
6.现代布局趋势
- CSS Grid + Flexbox 结合使用
- CSS 变量实现主题切换
- 容器查询（Container Queries）
- 子网格（Subgrid）
CSS + Div 布局是前端开发的基础，掌握这些技术可以构建各种复杂的网页布局。随着 CSS 标准的不断演进，布局方式变得越来越强大和灵活。
二、代码实例
1.练习代码实例如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css + div 布局</title><style type="text/css">* {padding: 0;margin: 0;}.jz {margin: 1px auto;}.header {width: 1300px;height: 120px;background-color: #0000FF;}.nvg {width: 1300px;height: 120px;background-color: #002099;}.main {width: 1300px;height: 400px;border: 1px solid black;}.main-left,.main-right {width: 300px;height: 400px;background-color: #CCCCCC;}.main-center {width: 700px;height: 400px;background-color: #666666;}.fl {float: left;}.mright2 {margin-right: 2px;}</style></head><body><div class="header jz"></div><div class="nvg jz"></div><div class="main jz"><div class="main-left fl mright2"></div><div class="main-center fl"></div><div class="main-right fl mright2"></div></div><div class="footer jz"></div></body>
</html>
代码运行：
2.网易云音乐 代码实例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网易云音乐</title><style type="text/css">* {padding: 0;margin: 0;}.header {position: relative;width: 100%;height: 100px;background-color: #242424;}.nag {width: 100%;height: 40px;background-color: #c20c04;}/* 第一种占全屏幕 图片宽100% *//* .showpic img {width: 100%;} */.showpic img {width: 1080px;}.showpic {width: 1080px;height: 279px;margin: 1px auto;}.main {width: 1080px;height: 600px;margin: 1px auto;}.left {float: left;width: 500px;height: 300px;background-color: #CCCCCC;}.right-top {float: left;width: 250px;height: 147px;background-color: #888;}.right-bottom {float: left;width: 250px;height: 147px;background-color: #666666;}.footer {width: 100%;height: 88px;background-color: #242424;}.header img {width: 150px;position: absolute;left: 50px;top: 50%;transform: translateY(-50%);}</style></head><body><div class="header"><img src="../img/wyy2.jpg" ></div><div class="nag"></div><div class="showpic"><img src="../img/wyy1.jpg" ></div><div class="main"><div class="left"></div><div class="right-top"></div><div class="right-bottom"></div></div><div class="footer"></div></body>
</html>
代码运行如下：
总结
以上就是今天要讲的内容，本文简单记录了css + div 布局 & 简易网易云音乐 官网布置实例，仅作为一份简单的笔记使用，大家根据注释理解