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-5.1 Transition 过渡

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、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>

代码运行如下：