一、定位（Position）
定位用于控制元素在页面中的位置，常见的定位方式包括相对定位、绝对定位、固定定位和粘性定位。
1. 相对定位（position: relative）
- 特点：相对于元素自身原始位置偏移，不脱离文档流，原始位置仍占用空间。
- 用途：常作为子元素绝对定位的参照物（父相子绝）。
示例代码：
<style>
.parent {
position: relative; /* 父元素设为相对定位，作为参照物 */
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: relative;
top: 20px; /* 相对于原始位置向下偏移20px */
left: 30px; /* 相对于原始位置向右偏移30px */
width: 100px;
height: 100px;
background-color: #ff6b6b;
}
</style>
<div class="parent">
<div class="child"></div>
</div>2. 绝对定位（position: absolute）
- 特点：相对于最近的非 static 定位祖先元素偏移，脱离文档流，不占用原始空间。
- 用途：精确定位元素，如弹窗、下拉菜单。
示例代码：
<style>
.parent {
position: relative; /* 父元素为参照物 */
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.child {
position: absolute;
top: 50px; /* 距离父元素顶部50px */
right: 20px; /* 距离父元素右侧20px */
width: 100px;
height: 100px;
background-color: #4ecdc4;
}
</style>
<div class="parent">
<div class="child"></div>
</div>3. 固定定位（position: fixed）
- 特点：相对于浏览器视口偏移，脱离文档流，滚动页面时位置不变。
- 用途：导航栏、悬浮广告、回到顶部按钮。
示例代码：
<style>
.fixed-btn {
position: fixed;
bottom: 30px; /* 距离浏览器底部30px */
right: 30px; /* 距离浏览器右侧30px */
width: 50px;
height: 50px;
background-color: #ffd166;
border-radius: 50%;
}
</style>
<div class="fixed-btn"></div>
<!-- 页面内容（可滚动验证效果） -->
<p style="height: 2000px;">滚动页面，固定按钮位置不变...</p>4. 粘性定位（position: sticky）
- 特点：未达阈值时为相对定位（随滚动移动），达阈值后为固定定位（位置不变）。
- 用途：列表标题、表格头部固定。
示例代码：
<style>
.sticky-title {
position: sticky;
top: 0; /* 阈值：滚动到顶部时固定 */
padding: 10px;
background-color: #06d6a0;
color: white;
}
.content {
height: 100px; /* 模拟列表项高度 */
border: 1px solid #eee;
}
</style>
<div class="sticky-title">列表标题（滚动时固定）</div>
<div class="content">内容1</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
<!-- 更多内容（可滚动验证效果） -->
<div class="content">内容4</div>
<div class="content">内容5</div>二、弹性盒子（Flexbox）
弹性盒子是一种响应式布局模型，通过 display: flex 开启，用于灵活排列子元素。
核心属性
| 属性 | 作用 | 常用值 |
|---|---|---|
| flex-direction | 设置主轴方向 | row（水平）、column（垂直）等 |
| flex-wrap | 控制子元素是否换行 | wrap（换行）、nowrap（不换行） |
| justify-content | 主轴对齐方式 | center（居中）、space-between（两端对齐）等 |
| align-items | 侧轴对齐方式 | center（居中）、flex-start（起始对齐）等 |
示例代码
<style>
.flex-box {
display: flex; /* 开启弹性盒子 */
flex-direction: row; /* 主轴为水平方向 */
flex-wrap: wrap; /* 子元素超出时换行 */
justify-content: space-between; /* 主轴两端对齐，子元素间距相等 */
align-items: center; /* 侧轴居中对齐 */
width: 500px;
height: 200px;
background-color: #f8f9fa;
padding: 10px;
}
.flex-item {
width: 100px;
height: 80px;
background-color: #118ab2;
margin: 5px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<div class="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>效果说明：4 个弹性项在水平方向排列，超出容器宽度时自动换行，主轴上两端对齐，侧轴（垂直方向）居中对齐。
三、综合案例（左右布局 + 弹性盒子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 左右布局（绝对定位实现） */
.left {
width: 15%;
height: 100vh; /* 占满浏览器高度 */
background-color: #eaeaea;
}
.right {
position: absolute;
top: 0;
right: 0;
left: 15%; /* 与左侧15%宽度衔接 */
height: 100vh;
background-color: #ffd166;
}
/* 右侧弹性盒子 */
.right .flex-box {
display: flex;
flex-direction: column; /* 垂直排列 */
justify-content: center; /* 主轴（垂直）居中 */
align-items: center; /* 侧轴（水平）居中 */
height: 100%;
}
.right .flex-box a {
margin: 10px;
color: #333;
text-decoration: none;
font-size: 18px;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
<div class="flex-box">
<a href="https://baidu.com">百度</a>
<a href="https://qq.com">腾讯</a>
</div>
</div>
</body>
</html>效果说明：页面分为左右两栏（左侧占 15% 宽度，右侧占 85%），右侧使用弹性盒子垂直居中排列链接。
案例一：轮播图（Swiper）
核心知识点
- 相对定位与绝对定位 ：轮播容器（
.swiper）设为相对定位，作为子元素（指示器、控制按钮）的定位参照物；指示器（.tips）和控制按钮（.ctrl）用绝对定位固定在容器内指定位置。 - 图片显示控制 ：默认隐藏所有图片（
display: none），仅显示第一张（img:first-child {display: block}），配合指示器实现切换逻辑。 - 交互效果 ：控制按钮（
prev/next）添加 hover 背景色变化，提升用户体验。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图案例</title>
<style>
.swiper{
position: relative; /* 相对定位：作为子元素的定位参照物 */
width: 100%;
height: 900px; /* 轮播图高度，占满视口主要区域 */
}
.swiper img{
display: none; /* 默认隐藏所有图片 */
width: 100%;
height: 100%; /* 图片自适应容器大小 */
object-fit: cover; /* 保持图片比例，覆盖容器 */
}
.swiper img:first-child{
display: block; /* 仅显示第一张图片 */
}
/* 指示器样式：底部圆点导航 */
.swiper .tips{
position: absolute; /* 绝对定位：相对于.swiper定位 */
bottom: 0px;
width: 100%;
height: 80px;
font-size: 0; /* 消除inline元素间距 */
line-height: 80px; /* 垂直居中文字 */
text-align: center; /* 水平居中 */
}
.tips span{
display: inline-block; /* 使padding生效 */
margin: 0 5px; /* 圆点间距 */
padding: 5px 50px; /* 圆点大小（实际为矩形，可改为圆形） */
background-color: rgba(150,150,150,0.5); /* 半透明灰色 */
border-radius: 4px; /* 圆角美化 */
cursor: pointer; /* 鼠标悬停显示手型 */
}
.swiper .tips .active{
background-color: rgba(184, 173, 21, 0.5); /* 激活状态为半透明黄色 */
}
/* 控制按钮：左右箭头 */
.swiper .ctrl{
position: absolute; /* 绝对定位：垂直居中 */
height: 50px;
width: 100%;
top: 50%; /* 基于容器高度居中 */
transform: translateY(-50%); /* 微调垂直居中 */
}
/* 按钮hover效果 */
.swiper .ctrl .prev:hover,
.swiper .ctrl .next:hover{
background-color: rgba(92, 91, 91, 0.5); /* 悬停时加深背景 */
}
.swiper .ctrl .prev{
float: left; /* 左对齐 */
width: 50px;
height: 100%;
background-image: url(../img/left.png); /* 左箭头图片 */
background-size: 40px 40px; /* 图片大小 */
background-repeat: no-repeat; /* 不重复 */
background-position: center center; /* 图片居中 */
border-radius: 50%; /* 圆形按钮 */
background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
margin-left: 15px; /* 左间距 */
cursor: pointer; /* 鼠标悬停显示手型 */
}
.swiper .ctrl .next{
float: right; /* 右对齐 */
width: 50px;
height: 100%;
background-image: url(../img/right.png); /* 右箭头图片 */
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: center center;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
margin-right: 15px; /* 右间距 */
cursor: pointer;
}
</style>
</head>
<body>
<div class="swiper">
<!-- 轮播图片列表 -->
<img src="../img/caopi.png" alt="图片1">
<img src="../img/machao.png" alt="图片2">
<img src="../img/zhangfei.png" alt="图片3">
<!-- 指示器：用于显示/切换当前图片 -->
<div class="tips">
<span class="active"></span> <!-- 激活状态（对应第一张图） -->
<span></span> <!-- 第二张图指示器 -->
<span></span> <!-- 第三张图指示器 -->
</div>
<!-- 控制按钮：左右切换 -->
<div class="ctrl">
<div class="prev"></div> <!-- 左箭头 -->
<div class="next"></div> <!-- 右箭头 -->
</div>
</div>
</body>
</html>案例二：圆形钟表
核心知识点
- 绝对定位精确定位 ：钟表的刻度、指针、数字均通过绝对定位（
position: absolute）固定在圆形表盘的指定位置。 - 圆形容器实现 ：通过
border-radius: 50%将方形容器（.box）转为圆形表盘。 - 层级与布局 ：通过
top/left属性调整元素位置，实现钟表的对称结构（12/3/6/9 刻度、时针 / 分针 / 秒针）。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆形钟表案例</title>
<style>
*{
padding: 0;
margin: 0; /* 清除默认内外边距 */
}
.box{
position: relative; /* 作为子元素的定位参照物 */
border: 2px solid black; /* 表盘边框 */
background-color: rgb(173, 175, 174); /* 表盘背景色 */
width: 400px;
height: 400px;
border-radius: 50%; /* 圆形表盘 */
margin: 50px auto; /* 居中显示 */
}
/* 刻度样式：上下左右四个主刻度 */
.shu,.shu1,.heng,.heng1{
background-color: black; /* 刻度颜色 */
position: absolute; /* 绝对定位 */
}
.shu{ /* 上刻度（12点方向） */
top: 0px;
left: 199px; /* 水平居中（表盘宽400px，刻度宽2px，199=200-0.5） */
width: 2px;
height: 20px; /* 刻度长度 */
}
.shu1{ /* 下刻度（6点方向） */
top: 382px; /* 400-20+2（边框）=382 */
left: 200px;
width: 2px;
height: 20px;
}
.heng{ /* 左刻度（9点方向） */
top: 199px; /* 垂直居中（400/2 - 0.5） */
left: 0px;
width: 20px;
height: 2px;
}
.heng1{ /* 右刻度（3点方向） */
top: 199px;
left: 382px; /* 400-20+2=382 */
width: 20px;
height: 2px;
}
.center{ /* 圆心 */
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%; /* 圆形圆心 */
position: absolute;
top: 195px; /* 200（中心）-5（半径）=195 */
left: 195px;
z-index: 10; /* 层级高于指针，覆盖指针末端 */
}
/* 指针样式 */
.houer{ /* 时针 */
width: 10px;
height: 50px; /* 最短指针 */
background-color: rgb(8, 17, 138); /* 蓝色 */
position: absolute;
top: 150px; /* 200-50=150（从中心向上延伸） */
left: 195px; /* 水平居中 */
transform-origin: center bottom; /* 旋转原点：底部（圆心位置） */
}
.min{ /* 分针 */
width: 6px; /* 比时针细 */
height: 100px; /* 比时针长 */
background-color: rgb(30, 146, 20); /* 绿色 */
position: absolute;
top: 100px; /* 200-100=100 */
left: 197px;
transform-origin: center bottom;
}
.sc{ /* 秒针 */
width: 3px; /* 最细 */
height: 150px; /* 最长 */
background-color: black; /* 黑色 */
position: absolute;
top: 50px; /* 200-150=50 */
left: 198.5px;
transform-origin: center bottom;
}
/* 数字刻度（12/3/6/9） */
.time12,.time9,.time6,.time3{
position: absolute;
font-size: 20px;
font-weight: bold;
}
.time12{ /* 12点 */
top: 15px;
left: 188px; /* 水平居中 */
}
.time3{ /* 3点 */
top: 185px;
left: 365px; /* 右侧 */
}
.time6{ /* 6点 */
top: 355px;
left: 194.5px;
}
.time9{ /* 9点 */
top: 185px;
left: 25px; /* 左侧 */
}
</style>
</head>
<body>
<div class="box"></div> <!-- 表盘容器 -->
<!-- 刻度 -->
<div class="shu"></div> <!-- 上刻度 -->
<div class="heng"></div> <!-- 左刻度 -->
<div class="shu1"></div> <!-- 下刻度 -->
<div class="heng1"></div> <!-- 右刻度 -->
<div class="center"></div> <!-- 圆心 -->
<!-- 指针 -->
<div class="houer"></div> <!-- 时针 -->
<div class="min"></div> <!-- 分针 -->
<div class="sc"></div> <!-- 秒针 -->
<!-- 数字 -->
<p class="time12">12</p>
<p class="time3">3</p>
<p class="time6">6</p>
<p class="time9">9</p>
</body>
</html>案例三：任务管理系统界面
核心知识点
- 浮动布局（float） ：顶部导航菜单（
.dh1 li）和任务筛选条件（.rwjd li等）用浮动实现横向排列。 - 下拉菜单实现 ：用户菜单（
.yh）默认隐藏（display: none），鼠标悬停父元素时显示（li:first-child:hover .yh {display: block}）。 - 弹性盒子布局 ：任务卡片列表（
.tm）用display: flex和flex-wrap: wrap实现自适应换行排列。 - hover 交互效果 ：任务卡片顶部（
.top）hover 时隐藏原有内容，显示 "分享任务" 按钮（.clone）。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>任务管理系统界面</title>
<style>
* {
padding: 0;
margin: 0; /* 清除默认样式 */
box-sizing: border-box; /* 盒模型：border和padding计入宽高 */
}
/* 顶部导航栏 */
.title {
height: 60px;
background-color: #01AAED; /* 蓝色背景 */
border-radius: 10px 0 0 0; /* 左上角圆角 */
position: relative; /* 作为子元素定位参照物 */
}
h2 {
color: white;
line-height: 60px; /* 垂直居中 */
margin-left: 10px;
}
.title .dh1 {
position: absolute;
top: 0px;
right: 0px; /* 靠右对齐 */
}
.title .dh1>li {
color: white;
width: 90px;
text-align: center;
line-height: 40px;
height: 60px; /* 与导航栏同高 */
float: right; /* 横向排列 */
list-style: none; /* 去除列表符号 */
padding: 10px;
cursor: pointer; /* 鼠标悬停手型 */
}
.title .dh1>li:hover {
background-color: #1890ec; /* 悬停背景色变深 */
}
/* 下拉菜单（用户菜单） */
.dh1>li:first-child:hover .yh {
display: block; /* 悬停时显示下拉菜单 */
}
.yh {
width: 110px;
position: absolute;
top: 60px; /* 与导航栏底部对齐 */
right: 0px;
display: none; /* 默认隐藏 */
list-style: none;
background-color: rgb(104, 176, 224);
color: white;
cursor: pointer;
z-index: 100; /* 层级高于其他元素 */
}
.yh>li:hover {
background-color: #009f95; /* 下拉项悬停色 */
}
.dh1>li:first-child {
background-image: url(../img/用户.png); /* 用户图标 */
background-size: 40px;
background-repeat: no-repeat;
background-position: 0 center;
background-position-x: -5px; /* 图标位置微调 */
}
/* 搜索区 */
.search {
background-color: #f1f5f4; /* 浅灰背景 */
text-align: center;
padding: 10px 0;
}
.search input {
margin: 20px;
padding-left: 10px;
padding-right: 10px;
width: 600px;
height: 30px;
border-radius: 10px; /* 圆角输入框 */
border: 1px solid rgb(165, 164, 164);
}
/* 筛选条件（任务阶段/难度/状态） */
.rwjd, .rwzt, .nycd {
height: 40px;
margin: 0 auto;
width: 800px; /* 固定宽度，居中 */
overflow: hidden; /* 清除浮动影响 */
}
.rwjd li, .rwzt li, .nycd li {
float: left; /* 横向排列 */
padding: 0 10px;
list-style: none;
cursor: pointer;
height: 40px;
line-height: 40px; /* 垂直居中 */
}
.rwjd li:first-child, .rwzt li:first-child, .nycd li:first-child {
padding-top: 2px;
font-family: 楷体;
font-weight: 600;
font-size: 18px; /* 标题样式 */
}
.rwjd li:nth-child(2), .rwzt li:nth-child(2), .nycd li:nth-child(2) {
background-color: #CCCCCC; /* 默认选中项背景 */
}
.rwjd li:nth-child(2):hover, .rwzt li:nth-child(2):hover, .nycd li:nth-child(2):hover {
background-color: #e9e9e9;
}
.rwjd li:first-child:hover, .rwzt li:first-child:hover, .nycd li:first-child:hover {
background-color: rgb(241, 245, 244); /* 标题项悬停不改变背景 */
}
.rwjd li:hover, .rwzt li:hover, .nycd li:hover {
background-color: #e9e9e9; /* 选项悬停背景 */
}
/* 任务卡片列表 */
.tm {
margin: 0 auto;
padding: 14px;
width: 100%;
max-width: 860px; /* 最大宽度限制 */
display: flex; /* 弹性布局 */
flex-wrap: wrap; /* 超出换行 */
gap: 8px; /* 卡片间距 */
}
.main {
border: 1px solid rgba(0, 0, 0, 0.1);
width: 200px;
height: 200px;
box-sizing: border-box; /* 边框计入宽高 */
position: relative;
}
/* 任务卡片顶部 */
.main .top {
position: relative;
height: 30px;
background-image: linear-gradient(to right, #01AAED 50%, #5fb878 50%); /* 左右渐变背景 */
}
.main .body {
position: relative;
height: 130px;
font-size: 12px;
display: flex; /* 内容垂直排列 */
padding: 5px;
}
.body>p {
margin: 10px;
overflow: hidden; /* 超出隐藏 */
}
.top .left_p {
float: left;
font-size: 12px;
line-height: 30px;
font-weight: 600;
color: rgb(238, 235, 235);
padding-left: 5px;
}
.top .right_p {
float: right;
color: rgb(238, 235, 235);
font-size: 12px;
line-height: 30px;
padding-right: 20px;
}
/* 三角形分割线（顶部左右渐变分割） */
.triangle {
position: absolute;
top: 0;
left: 98px; /* 50%宽度位置 */
width: 0;
height: 0;
border-top: 30px solid #01AAED; /* 左半部分颜色 */
border-right: 30px solid transparent; /* 右半部分透明 */
}
/* 任务状态标签 */
.ztbq {
position: absolute;
top: 75px;
right: 5px;
width: 50px;
height: 50px;
border-radius: 50px;
background-image: url(../img/未开始.png); /* 状态图标 */
background-size: 50px 50px;
background-repeat: no-repeat;
}
/* 卡片顶部hover效果（显示分享按钮） */
.clone {
display: none; /* 默认隐藏 */
position: absolute;
top: 0;
left: 0;
line-height: 30px;
color: white;
font-size: 14px;
font-weight: 600;
width: 100%;
text-align: center;
}
.main .top:hover .left_p,
.main .top:hover .right_p,
.main .top:hover .triangle {
display: none; /* hover时隐藏原有内容 */
}
.main .top:hover .clone {
display: block; /* 显示分享按钮 */
background-color: #ff5722; /* 按钮背景色 */
}
/* 卡片底部操作栏 */
.main .foot {
height: 40px;
border-top: solid 1px rgba(0, 0, 0, 0.1);
}
.foot ul {
line-height: 40px;
overflow: hidden; /* 清除浮动 */
}
.foot li {
float: left; /* 横向排列 */
margin-left: 8px;
margin-right: 8px;
list-style: none;
font-size: 12px;
}
.foot li:hover {
cursor: pointer;
color: #01AAED; /* 悬停文字变色 */
}
/* 分页 */
.last {
width: 100%;
margin: 20px auto;
text-align: center; /* 居中 */
}
.last ul {
display: inline-flex; /* 横向排列且居中 */
padding: 0;
margin: 0 auto;
}
.last li {
margin: 5px 8px;
height: 18px;
min-width: 18px;
line-height: 18px;
text-align: center;
list-style: none;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.3);
background-color: #d9d9d9;
}
.last li:hover {
background-color: #cccccc; /* 悬停背景 */
}
.last li:first-child {
background-color: #01AAED; /* 当前页背景 */
color: white;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<div class="title">
<h2>奇酷-任务管理系统</h2>
<ul class="dh1">
<li>用户名
<!-- 下拉菜单 -->
<ul class="yh">
<li>切换系统</li>
<li>更换密码</li>
<li>切换班级</li>
<li>退出登录</li>
</ul>
</li>
<li>文件中心</li>
<li>任务中心</li>
</ul>
</div>
<!-- 搜索与筛选区 -->
<div class="search">
<input type="text" placeholder="请输入要检索的任务信息、并按下回车进行检索">
<!-- 任务阶段筛选 -->
<div class="rwjd">
<ul>
<li>任务阶段</li>
<li>不限</li>
<li>第一阶段</li>
<li>第二阶段</li>
<li>第三阶段</li>
<li>第四阶段</li>
<li>第五阶段</li>
</ul>
</div>
<!-- 难易程度筛选 -->
<div class="nycd">
<ul>
<li>难易程度</li>
<li>不限</li>
<li>简单题</li>
<li>中等题</li>
<li>难题</li>
<li>选做题</li>
</ul>
</div>
<!-- 任务状态筛选 -->
<div class="rwzt">
<ul>
<li>任务状态</li>
<li>不限</li>
<li>未开始</li>
<li>进行中</li>
<li>不会做</li>
<li>已提交</li>
<li>已检查</li>
<li>异常题</li>
<li>已完成</li>
</ul>
</div>
</div>
<!-- 任务卡片列表 -->
<div class="tm">
<div class="main">
<div class="top">
<p class="left_p">【简】第二阶段</p>
<p class="right_p">css样式</p>
<span class="triangle"></span>
<span class="clone">分享任务</span>
</div>
<div class="body">
<p>使用定位技术完成圆形钟表的制作、包含 12、3、6、9 四个刻度。 圆心、时针、分针、和 秒针 。 且效果为 12 点整 效果即可！</p>
<div class="ztbq"></div>
</div>
<div class="foot">
<ul>
<li>查看</li>
<li>修改</li>
<li>参考</li>
<li>完成</li>
</ul>
</div>
</div>
<!-- 重复的任务卡片（省略部分，保留结构） -->
<div class="main">
<div class="top">
<p class="left_p">【简】第二阶段</p>
<p class="right_p">css样式</p>
<span class="triangle"></span>
<span class="clone">分享任务</span>
</div>
<div class="body">
<p>使用定位技术绘制一个太极图案（注意观察太极图的特点） 提示 background-image: linear-gradient(to right, #000 50%, #fff 50%); 该样式可以实现 一半黑一半白 </p>
<div class="ztbq"></div>
</div>
<div class="foot">
<ul>
<li>查看</li>
<li>修改</li>
<li>参考</li>
<li>完成</li>
</ul>
</div>
</div>
<!-- 更多任务卡片... -->
</div>
<!-- 分页 -->
<div class="last">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>...</li>
<li>16</li>
<li>17</li>
</ul>
</div>
</body>
</html>案例四：天气预报界面
核心知识点
- 弹性盒子布局（flex） ：整体容器（
.box）用flex-direction: column实现垂直排列；每日天气项（.data div）用flex分配宽度，实现网格布局。 - flex-wrap 换行 ：每日天气列表（
.data）用flex-wrap: wrap实现超出容器宽度时自动换行。 - 背景图片与图标 ：天气图标（
.icon）通过background-image设置，配合background-size和background-position调整显示效果。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>天气预报界面</title>
<style>
.box{
width: 840px; /* 7列*120px=840px */
display: flex;
flex-flow: column nowrap; /* 垂直排列，不换行 */
background-color: rgb(105, 163, 202); /* 蓝色背景 */
margin: 50px auto; /* 居中显示 */
border-radius: 8px; /* 圆角容器 */
overflow: hidden; /* 隐藏内部元素超出部分 */
}
/* 标题栏 */
.box .title{
flex: 0 1 60px; /* 固定高度60px，不拉伸，可收缩 */
line-height: 60px; /* 垂直居中 */
color: white;
font-size: 20px;
font-weight: bold;
padding-left: 20px; /* 左缩进 */
background-color: rgba(0,0,0,0.1); /* 半透明背景 */
}
/* 星期栏 */
.box .week{
display: flex; /* 水平排列 */
flex: 0 1 60px; /* 固定高度60px */
align-items: center; /* 垂直居中 */
background-color: rgba(0,0,0,0.05);
}
.box .week > span{
text-align: center;
flex: 1 1 auto; /* 平均分配宽度 */
color: white;
font-size: 16px;
}
/* 每日天气列表 */
.box .data{
display: flex;
flex-wrap: wrap; /* 超出换行 */
}
/* 每日天气项 */
.box .data div{
display: flex;
flex-direction: column; /* 内部垂直排列 */
flex: 0 0 120px; /* 固定宽度120px（7列） */
box-sizing: border-box;
text-align: center;
border: 1px solid rgba(200, 200, 200,0.2); /* 浅色边框 */
color: white;
border-right: none; /* 右侧边框合并 */
border-bottom: none; /* 底部边框合并 */
padding: 8px 10px;
}
.box .data div *{
padding: 8px; /* 内部元素间距 */
font-size: 14px;
}
.box .data .day{
align-self: flex-start; /* 左对齐 */
flex-basis: 40px; /* 固定高度 */
font-size: 18px;
font-weight: bold;
}
.box .data .icon{
flex-basis: 40px; /* 图标固定高度 */
background-image: url(./img/冻雨.png); /* 天气图标 */
background-size: 40px 40px; /* 图标大小 */
background-repeat: no-repeat;
background-position: center center; /* 图标居中 */
}
</style>
</head>
<body>
<div class="box">
<!-- 标题 -->
<div class="title">未来四十天天气预报</div>
<!-- 星期栏 -->
<div class="week">
<span>周日</span>
<span>周一</span>
<span>周二</span>
<span>周三</span>
<span>周四</span>
<span>周五</span>
<span>周六</span>
</div>
<!-- 每日天气数据（49项） -->
<div class="data">
<div>
<span class="day">1</span>
<i class="icon"></i>
<span class="tmep">25~33℃</span>
<span class="text">小雨</span>
<span class="wind">东风一级</span>
<span class="level">优</span>
</div>
<div>
<span class="day">2</span>
<i class="icon"></i>
<span class="tmep">25~33℃</span>
<span class="text">小雨</span>
<span class="wind">东风一级</span>
<span class="level">优</span>
</div>
<!-- 省略中间45项（结构相同） -->
<div>
<span class="day">49</span>
<i class="icon"></i>
<span class="tmep">25~33℃</span>
<span class="text">小雨</span>
</div>
</div>
</div>
</body>
</html>