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>

代码运行如下：