CSS基础概念与实战指南
1. 样式表（CSS）简介
1.1 什么是CSS
层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述HTML或XML（包括SVG、MathML等）文档呈现样式的计算机语言。它允许开发者将文档结构（由HTML提供）与文档样式（由CSS提供）分离，从而提高内容的可访问性、提供更大的灵活性和控制性，并支持将样式应用于多个网页，以减少复杂性和重复性。
CSS通过精确的像素级控制来管理网页元素的排版，支持各种字体、字号和颜色样式，并具备编辑网页对象和模型样式的能力。简而言之，CSS的主要作用是美化网页，控制包括字体、颜色、边距、高度、宽度、背景图片以及元素在页面上的定位和浮动等表现形式。
1.2 CSS的发展历程
- CSS1.0： 奠定了CSS的基础，实现了对文本、颜色、背景等基本样式的控制。
- CSS2.0： 引入了更强大的布局概念，如`div`（块级元素）与CSS结合实现结构和表现分离，提升了网页的简洁性和对搜索引擎优化（SEO）的友好性。
- CSS2.1： 在CSS2.0的基础上进行了修订和完善，增加了对浮动（`float`）和定位（`position`）等关键布局特性的支持。
- CSS3.0： 带来了诸多新特性，如圆角（`border-radius`）、阴影（`box-shadow`）、动画（`animation`）和渐变（`gradient`）等，极大地丰富了网页的表现力。但同时，也带来了不同浏览器之间兼容性处理的挑战。
CSS的优势
- 内容与表现分离： HTML专注于结构，CSS专注于样式，使代码更清晰、易于维护。
- 统一的网页表现： 通过外部样式表，可以实现多页面的样式复用，修改一处即可影响所有关联页面。
- 丰富的样式表现： 提供丰富的属性，能够实现复杂的视觉效果。
- 推荐使用独立CSS文件： 将CSS代码独立存放于外部文件，有助于浏览器缓存，加快页面加载速度。
- 提升SEO： 清晰的代码结构和更小的HTML文件尺寸有利于搜索引擎抓取和索引。
1.3 CSS快速入门
以下示例展示了如何在HTML文档中使用CSS来改变一级标题的颜色。
内部样式表示例
在HTML文件的`<head>`标签内部，使用`<style>`标签定义CSS规则。这种方式适用于样式仅作用于当前HTML文档的情况。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主页</title>
<!-- 定义内部样式 -->
<style>
h1 {
color: crimson; /* 设置h1标签文本颜色为深红色 */
}
</style>
</head>
<body>
<h1>欢迎学习前端开发</h1>
</body>
</html>
外部样式表示例（推荐）
为了实现内容与表现分离的优势，推荐将CSS代码存放在独立的`.css`文件中，然后在HTML文档中通过`<link>`标签引入。这种方式便于样式的管理和复用。
- 在HTML文件同级目录下创建一个`styles`文件夹，并在其中创建`main.css`文件。
- 在`main.css`文件中定义样式：
/* main.css */
h1 {
color: darkgreen; /* 设置h1标签文本颜色为深绿色 */
}
- 在HTML文件中通过`<link>`标签引入`main.css`：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>主页</title>
<!-- 通过link标签引入外部样式表 -->
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<h1>欢迎学习前端开发</h1>
</body>
</html>
1.4 CSS的三种引入方式及其优先级
CSS有三种主要的引入方式：
- 行内样式（Inline Styles）： 直接在HTML元素的`style`属性中定义样式。优先级最高。
- 内部样式（Internal Styles）： 在HTML文档的`<head>`标签中使用`<style>`标签定义样式。
- 外部样式（External Styles）： 将样式定义在独立的`.css`文件中，并通过`<link>`标签引入。
样式优先级：就近原则（近者优先）
当多个样式规则作用于同一个元素时，会根据特定的优先级规则来决定哪个样式生效。通常，行内样式具有最高的优先级。对于内部样式和外部样式，如果选择器权重相同，则后定义的样式会覆盖先定义的样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>样式优先级示例</title>
<!-- 外部样式，假设 styles/global.css 将 h1 设为蓝色 -->
<link rel="stylesheet" href="styles/global.css">
<!-- 内部样式，将 h1 设为紫色 -->
<style>
h1 {
color: purple;
}
</style>
</head>
<body>
<!-- 行内样式，将 h1 设为橙色 -->
<h1 style="color: orange;">这是一个标题</h1>
<h1>另一个标题</h1>
</body>
</html>
在这个例子中，第一个`<h1>`会显示为橙色（行内样式优先级最高）。第二个`<h1>`将显示为紫色（内部样式在外部样式之后定义，且选择器权重相同）。
外部样式表的两种引入方式
除了`<link>`标签，还可以使用`@import`规则在CSS内部引入其他CSS文件。
-
链接式（`<link>`标签）：
<link rel="stylesheet" href="styles/theme.css"> -
导入式（`@import`规则）：
<style> @import "styles/theme.css"; /* 在 <style> 标签内或另一个CSS文件顶部使用 */ </style>
`link` 与 `@import` 的区别：
- 本质不同： `<link>`是XHTML标签，除了引入CSS外，还可以用于定义RSS、预加载等；`@import`是CSS规则，只能用于引入CSS。
- 加载时机： `<link>`引入的CSS文件在页面加载时会同时加载；`@import`引入的CSS文件需等待页面HTML结构完全加载完成后才会被加载。
- 兼容性： `<link>`是XHTML标签，没有兼容性问题；`@import`是在CSS2.1才提出的，一些老旧浏览器可能不支持。
- DOM操作： `<link>`可以通过JavaScript操纵DOM来改变样式；`@import`不支持。
2. CSS选择器
选择器是CSS规则的核心，用于精准地选取HTML文档中需要应用样式的元素。
2.1 基本选择器
基本选择器包括标签选择器、类选择器和ID选择器。它们的优先级遵循：ID选择器 > 类选择器 > 标签选择器。
2.1.1 标签选择器
作用范围：选择页面上所有指定标签名称的元素。
/* styles/base.css */
p {
color: #333; /* 所有 <p> 标签的文本颜色 */
font-family: "Microsoft YaHei", sans-serif;
}
h2 {
color: #007bff; /* 所有 <h2> 标签的文本颜色 */
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标签选择器示例</title>
<link rel="stylesheet" href="styles/base.css">
</head>
<body>
<h2>产品介绍</h2>
<p>这是一款功能强大的新产品。</p>
<p>它拥有创新的设计和卓越的性能。</p>
</body>
</html>
2.1.2 类选择器
作用范围：选择所有带有指定`class`属性的元素，可以跨标签使用，实现样式的复用。
/* styles/components.css */
.highlight {
background-color: yellow; /* 突出显示背景 */
font-weight: bold;
}
.error-msg {
color: red; /* 错误消息文本颜色 */
border: 1px solid red;
padding: 5px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>类选择器示例</title>
<link rel="stylesheet" href="styles/components.css">
</head>
<body>
<h2 class="highlight">重要通知</h2>
<p>请注意：以下信息非常<span class="highlight">关键</span>。</p>
<div class="error-msg">用户输入格式不正确。</div>
</body>
</html>
2.1.3 ID选择器
作用范围：选择文档中唯一拥有指定`id`属性的元素。ID在整个HTML文档中必须是唯一的。
/* styles/layout.css */
#main-header {
background-color: #f0f0f0;
padding: 20px;
text-align: center;
border-bottom: 2px solid #ccc;
}
#call-to-action {
color: white;
background-color: #28a745;
padding: 15px 30px;
display: inline-block;
border-radius: 5px;
margin-top: 20px;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ID选择器示例</title>
<link rel="stylesheet" href="styles/layout.css">
</head>
<body>
<header id="main-header">
<h1>我的网站</h1>
<a href="#" id="call-to-action">立即注册</a>
</header>
<!-- 其他内容 -->
</body>
</html>
2.2 层次选择器（组合器）
层次选择器根据元素之间的层级关系来选取目标元素。
2.2.1 后代选择器（空格）
作用于某个元素内部（所有层级）的所有指定后代元素。
/* 选择 .container 内部的所有 p 标签，无论层级多深 */
.container p {
color: #4CAF50; /* 深绿色文本 */
}
2.2.2 子选择器（`>`）
作用于某个元素的直接子元素（第一层级）中的指定元素。
/* 选择 .navbar 的直接子元素 li */
.navbar > li {
padding: 10px 15px;
border-bottom: 1px solid #eee;
}
2.2.3 相邻兄弟选择器（`+`）
作用于紧接在指定元素之后的第一个同级元素。
/* 选择 .section-header 紧邻的第一个同级 p 元素 */
.section-header + p {
margin-top: 0; /* 消除与标题间的默认上边距 */
font-style: italic;
}
2.2.4 通用兄弟选择器（`~`）
作用于指定元素之后的所有同级元素。
/* 选择 .main-item 之后的所有同级 li 元素 */
.main-item ~ li {
list-style-type: disc; /* 圆点列表 */
}
以下HTML结构将演示上述层次选择器的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>层次选择器示例</title>
<style>
/* 后代选择器：body 内所有 p 标签（包括嵌套在 li 里的 p） */
body p {
background-color: #e0f7fa; /* 浅青色背景 */
margin-bottom: 5px;
}
/* 子选择器：body 的直接子元素 p */
body > p {
border-left: 3px solid #00bcd4; /* 左边框 */
padding-left: 10px;
}
/* 相邻兄弟选择器：紧邻 .intro-paragraph 的下一个 p 元素 */
.intro-paragraph + p {
font-weight: bold; /* 加粗 */
color: #d84315; /* 橙红色文本 */
}
/* 通用兄弟选择器：.first-line 之后的所有同级 p 元素 */
.first-line ~ p {
text-decoration: underline; /* 下划线 */
}
</style>
</head>
<body>
<p class="first-line">这是第一个段落。</p>
<p class="intro-paragraph">这是引言段落，其后的第一个同级p标签会被特殊样式。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
<div>
<p>这是 div 内部的段落。</p>
<ul>
<li>
<p>这是列表项中的段落。</p>
</li>
</ul>
</div>
<p>这是文档末尾的段落。</p>
</body>
</html>
2.3 结构伪类选择器
结构伪类选择器用于根据元素在文档结构中的位置来选择元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
body { font-family: sans-serif; }
ul { list-style: none; padding: 0; }
li { background-color: #f4f4f4; margin-bottom: 5px; padding: 8px; }
/* 选择 ul 的第一个 li 子元素 */
ul li:first-child {
background-color: #c8e6c9; /* 浅绿色背景 */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* 选择 ul 的最后一个 li 子元素 */
ul li:last-child {
background-color: #ffccbc; /* 浅橙色背景 */
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
/* 选择其父元素下，所有元素中的第二个元素（无论标签类型） */
/* 注意：这里选择的是 body 下的第二个元素，即第一个 p 元素 */
body > *:nth-child(2) {
color: blue;
font-size: 1.1em;
}
/* 选择其父元素下，所有 p 类型元素中的第二个 p 元素 */
body > p:nth-of-type(2) {
background-color: #bbdefb; /* 浅蓝色背景 */
padding: 10px;
}
/* 为超链接添加鼠标悬停效果 */
a:hover {
color: #e91e63; /* 悬停时变为粉色 */
text-decoration: underline;
}
</style>
</head>
<body>
<h1>页面标题</h1>
<p>这是第一个段落。</p>
<h2>小标题</h2>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<a href="#">点击这里</a>
</body>
</html>
2.4 属性选择器
属性选择器允许你根据元素的属性是否存在、属性值或属性值的一部分来选择元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>属性选择器示例</title>
<style>
.nav-links a {
display: inline-block;
padding: 8px 15px;
margin-right: 10px;
background-color: #4CAF50; /* 绿色背景 */
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
}
/* 1. 存在指定属性：选择所有包含 'data-category' 属性的 a 元素 */
a[data-category] {
border: 2px dashed orange;
}
/* 2. 精确属性值匹配：选择 'href' 属性值为 'index.html' 的 a 元素 */
a[href="index.html"] {
background-color: #007bff; /* 蓝色背景 */
}
/* 3. 属性值包含指定子串：选择 'class' 属性值中包含 'btn' 的 a 元素 */
a[class*="btn"] {
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
/* 4. 属性值以指定前缀开头：选择 'href' 属性值以 'https://' 开头的 a 元素 */
a[href^="https://"] {
color: #d84315; /* 橙红色文本 */
}
/* 5. 属性值以指定后缀结尾：选择 'href' 属性值以 '.pdf' 结尾的 a 元素 */
a[href$=".pdf"] {
background-color: #e91e63; /* 粉色背景 */
}
</style>
</head>
<body>
<div class="nav-links">
<a href="index.html" class="nav-btn" data-category="home">首页</a>
<a href="https://example.com/products" class="nav-link">产品</a>
<a href="/assets/manual.pdf" class="nav-btn">下载手册</a>
<a href="contact.html" data-category="contact">联系我们</a>
<a href="https://secure.example.com/login" class="nav-btn">安全登录</a>
</div>
</body>
<!-- 匹配操作符总结：
= 精确匹配
*= 包含子串
^= 以指定前缀开头
$= 以指定后缀结尾
-->
</html>
3. 美化网页元素
3.1 为何美化网页
网页美化的重要性不言而喻：
- 有效传递信息： 清晰的排版和视觉引导能帮助用户更快理解内容。
- 吸引用户： 美观的界面能提升用户体验，增加用户粘性。
- 突出主题： 通过样式设计，能够强调页面的核心内容和品牌特色。
- 提高用户体验： 良好的交互和视觉设计使用户操作更流畅、心情更愉悦。
在HTML中，`<span>`标签常用于对文本的局部进行样式设置，例如突出显示某个词语。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Span标签示例</title>
<style>
.highlight-text {
color: #ff5722; /* 醒目的橙红色 */
font-size: 1.2em; /* 稍微大一点 */
font-weight: bold;
}
</style>
</head>
<body>
<p>欢迎您深入学习<span class="highlight-text">Web前端开发</span>技术！</p>
</body>
</html>
3.2 字体样式
CSS提供了丰富的属性来控制文本的字体样式：
- `font-family`: 设置字体，可指定多个备用字体。
- `font-size`: 设置字体大小。
- `font-weight`: 设置字体粗细，如`normal`, `bold`, `lighter`, `bolder`或数字值（100-900）。
- `color`: 设置字体颜色。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<style>
body {
font-family: "楷体", "serif"; /* 楷体，无衬线字体为备用 */
color: #444; /* 深灰色文本 */
}
h1 {
font-size: 48px; /* 标题字号 */
color: #007bff;
}
.paragraph-bold {
font-weight: bold; /* 段落加粗 */
}
.paragraph-light {
font-weight: lighter; /* 段落更细 */
}
</style>
</head>
<body>
<h1>网页字体效果示例</h1>
<p class="paragraph-bold">这是一段加粗的文字内容。</p>
<p>这是一段普通粗细的文字内容。</p>
<p class="paragraph-light">这是一段较细的文字内容。</p>
</body>
</html>
3.3 文本样式
除了字体，CSS还能控制文本的多种排版和装饰效果：
- 颜色（`color`）： 支持命名颜色（`red`）、十六进制（`#RRGGBB`）、RGB（`rgb(R,G,B)`）和RGBA（`rgba(R,G,B,A)`，A为透明度）。
- 文本对齐（`text-align`）： `left`, `right`, `center`, `justify`。常用于块级元素内部文本居中。
- 首行缩进（`text-indent`）： 设置段落首行文本的缩进量，常用`em`单位（相对于当前字体大小）。
- 行高（`line-height`）： 控制文本行之间的垂直距离。当行高与容器高度相同时，可实现单行文本垂直居中。
- 文本装饰（`text-decoration`）： 如`none`（去除下划线）、`underline`（下划线）、`overline`（上划线）、`line-through`（删除线）。
- 垂直对齐（`vertical-align`）： 主要用于行内元素或`table-cell`元素内部内容的垂直对齐，如图片与文本的对齐。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本样式示例</title>
<style>
body { font-family: sans-serif; }
h1 {
color: rgba(255, 99, 71, 0.8); /* 番茄红，80% 透明度 */
text-align: center; /* 标题居中 */
margin-bottom: 20px;
}
.intro-paragraph {
text-indent: 2em; /* 首行缩进两个字符 */
line-height: 1.6; /* 行高为字体大小的1.6倍 */
color: #333;
margin-bottom: 15px;
}
.centered-box {
background-color: #64b5f6; /* 浅蓝色背景 */
height: 120px;
line-height: 120px; /* 行高与块高一致，文本垂直居中 */
text-align: center;
color: white;
font-size: 18px;
margin: 20px 0;
}
.link-no-underline {
text-decoration: none; /* 超链接去除下划线 */
color: #007bff;
}
.text-overline { text-decoration: overline; }
.text-line-through { text-decoration: line-through; }
.text-underline { text-decoration: underline; }
/* 图片与文本垂直居中对齐 */
.image-text-align img,
.image-text-align span {
vertical-align: middle;
}
</style>
</head>
<body>
<h1>文章标题：深入理解CSS</h1>
<a href="#" class="link-no-underline">这是一个没有下划线的链接</a>
<p class="intro-paragraph text-overline">
CSS是一种强大的样式语言，用于控制网页的视觉呈现，它使得开发者能够创建出美观且响应式的用户界面。
</p>
<p class="intro-paragraph text-line-through">
通过学习CSS，我们可以掌握字体、颜色、布局和动画等多种设计元素，从而提升网页的整体质量。
</p>
<p class="intro-paragraph text-underline">
本章将详细介绍CSS的基础知识和常用技巧，帮助您快速入门并实践。
</p>
<div class="centered-box">
单行文本垂直居中
</div>
<p class="image-text-align">
<img src="images/icon.png" alt="图标" style="width: 24px; height: 24px;">
<span>图标与文本的完美对齐示例。</span>
</p>
</body>
</html>
3.4 文本阴影
`text-shadow`属性为文本添加阴影效果，提升视觉层次感。
- `text-shadow: [color] [水平偏移] [垂直偏移] [模糊半径];`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本阴影</title>
<style>
#product-title {
font-size: 60px;
color: #fff;
background-color: #3f51b5; /* 深蓝色背景 */
padding: 20px;
text-align: center;
/* 蓝色阴影，右偏10px，下偏10px，模糊半径5px */
text-shadow: #283593 10px 10px 5px;
}
</style>
</head>
<body>
<h1 id="product-title">新品发布</h1>
</body>
</html>
3.5 超链接伪类
超链接（`<a>`标签）具有四种状态的伪类，可以定义不同状态下的样式。通常，`a:hover`用于实现鼠标悬停时的交互效果。
- `a:link`: 未访问的链接。
- `a:visited`: 已访问的链接。
- `a:hover`: 鼠标悬停在链接上时。
- `a:active`: 链接被点击（鼠标按下未释放）时。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>链接伪类</title>
<style>
body { font-family: sans-serif; padding: 20px; }
.product-info a {
text-decoration: none;
color: #333; /* 默认黑色 */
font-size: 16px;
display: block;
margin-bottom: 10px;
}
/* 鼠标悬停时：颜色变蓝，字体变大，下划线 */
.product-info a:hover {
color: #007bff;
font-size: 18px;
text-decoration: underline;
}
/* 鼠标点击时：颜色变红 */
.product-info a:active {
color: red;
}
/* 访问后：颜色变灰色 */
.product-info a:visited {
color: #666;
}
#special-price {
font-size: 24px;
color: #e91e63;
margin-top: 20px;
/* 阴影效果：粉色，右下偏移，模糊 */
text-shadow: #f48fb1 5px 5px 3px;
}
</style>
</head>
<body>
<div class="product-info">
<a href="#product-image">
<img src="images/product-thumbnail.png" alt="产品缩略图" style="width: 80px; vertical-align: middle;">
查看大图
</a>
<p><a href="#details">商品名称：高性能笔记本</a></p>
<p><a href="#reviews">用户评价：★★★★★</a></p>
<p id="special-price">优惠价：￥8999</p>
</div>
</body>
</html>
3.6 列表样式
`list-style`属性用于控制列表项（`<li>`）的标记样式。
- `list-style: none;`：移除列表项标记。
- `list-style: circle;`：空心圆。
- `list-style: decimal;`：阿拉伯数字。
- `list-style: square;`：实心正方形。
/* 为 ul 列表项设置样式 */
ul li {
height: 35px; /* 设置列表项高度 */
line-height: 35px; /* 垂直居中文本 */
list-style: none; /* 移除默认列表标记 */
text-indent: 1em; /* 文本首行缩进 */
background-color: #f8f8f8;
margin-bottom: 3px;
border-left: 3px solid #ccc;
}
ul li:hover {
background-color: #e0e0e0;
border-left-color: #007bff;
}
3.7 背景样式
背景样式包括背景颜色、背景图片及其相关属性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景样式</title>
<style>
body { font-family: sans-serif; }
.hero-section {
width: 800px;
height: 400px;
border: 2px solid #3f51b5; /* 蓝色边框 */
margin: 20px auto;
background-image: url("images/hero-bg.png"); /* 假设背景图片路径 */
background-color: #f0f4c3; /* 备用背景颜色 */
}
.section-repeat-x {
background-repeat: repeat-x; /* 水平方向平铺 */
height: 100px;
}
.section-repeat-y {
background-repeat: repeat-y; /* 垂直方向平铺 */
height: 150px;
}
.section-no-repeat {
background-repeat: no-repeat; /* 不平铺 */
background-position: center center; /* 图片居中 */
height: 200px;
}
</style>
</head>
<body>
<div class="hero-section section-repeat-x">水平平铺背景图</div>
<div class="hero-section section-repeat-y">垂直平铺背景图</div>
<div class="hero-section section-no-repeat">不平铺居中背景图</div>
</body>
</html>
3.7.1 列表与背景综合练习
一个使用背景图片和列表样式构建导航菜单的示例：
<div id="main-navigation">
<h2 class="category-header">所有商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">电子书</a></li>
<li><a href="#">家电</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">电脑</a> <a href="#">办公</a> <a href="#">网络设备</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰</a> <a href="#">鞋帽</a> <a href="#">美妆个护</a></li>
<li><a href="#">箱包</a> <a href="#">钟表</a> <a href="#">珠宝首饰</a></li>
<li><a href="#">食品</a> <a href="#">饮料</a> <a href="#">生鲜</a></li>
<li><a href="#">运动户外</a> <a href="#">汽车用品</a> <a href="#">虚拟服务</a></li>
</ul>
</div>
#main-navigation {
width: 250px;
background-color: #333; /* 暗灰色背景 */
color: white;
font-family: "Microsoft YaHei", sans-serif;
}
.category-header {
font-size: 18px;
font-weight: bold;
text-indent: 1.5em; /* 标题缩进 */
line-height: 40px;
/* 背景色、背景图、图片位置、不平铺 */
background: #e91e63 url("images/arrow-down.png") 210px 12px no-repeat;
background-size: 16px 16px; /* 背景图大小 */
margin: 0;
}
#main-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#main-navigation ul li {
height: 38px;
line-height: 38px;
text-indent: 1em;
background-image: url("images/arrow-right.png"); /* 列表项背景图 */
background-size: 12px 12px;
background-position: 180px center; /* 图片垂直居中对齐 */
background-repeat: no-repeat;
border-bottom: 1px solid #444;
}
#main-navigation ul li:last-child {
border-bottom: none;
}
#main-navigation a {
color: white;
font-size: 14px;
text-decoration: none;
padding-right: 5px; /* 链接之间间距 */
}
#main-navigation a:hover {
color: #ffc107; /* 悬停时黄色 */
text-decoration: underline;
}
3.8 渐变背景
CSS渐变允许你在两个或多个颜色之间创建平滑过渡的背景效果。
/* 线性渐变：从左上角到右下角，由深紫色渐变为亮橙色 */
.gradient-box {
width: 300px;
height: 150px;
margin: 20px auto;
border-radius: 8px;
background-color: #6200ea; /* 备用纯色背景 */
background-image: linear-gradient(
135deg, /* 角度 */
#6200ea 0%, /* 起始颜色和位置 */
#b23cfd 50%, /* 中间颜色和位置 */
#ff8a65 100% /* 结束颜色和位置 */
);
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
font-weight: bold;
}
<div class="gradient-box">渐变背景示例</div>
你可以使用在线工具（如 grabient.com）来生成复杂的渐变代码。
4. CSS盒模型
4.1 什么是盒模型
在CSS中，每个HTML元素都被视为一个矩形的"盒子"。盒模型是CSS布局的基础，它定义了元素如何占据空间以及如何与其他元素相互作用。一个盒子由四个部分组成：
- 内容区（Content）： 元素的实际内容，如文本、图片等。可以通过`width`和`height`属性设置。
- 内边距（Padding）： 内容区与边框之间的空白区域。
- 边框（Border）： 围绕内边距和内容区的线条。
- 外边距（Margin）： 边框以外，用于分隔元素与相邻元素之间的空白区域。
4.2 边框（Border）
`border`属性用于设置元素的边框。它可以接受三个值：边框粗细、边框样式和边框颜色。
- 边框粗细（`border-width`）： 如`1px`, `medium`, `thick`。
- 边框样式（`border-style`）： 如`solid`（实线）、`dashed`（虚线）、`dotted`（点线）、`double`（双线）、`groove`、`ridge`、`inset`、`outset`、`none`。
- 边框颜色（`border-color`）： 任何CSS颜色值。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>边框样式</title>
<style>
/* 重置部分默认样式 */
body, h1, h2, p, form, div, input { margin: 0; padding: 0; box-sizing: border-box; }
.form-container {
width: 350px;
margin: 30px auto;
border: 1px solid #ddd; /* 默认细灰色边框 */
padding: 20px;
background-color: #f9f9f9;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
font-size: 20px;
background-color: #007bff;
color: white;
padding: 10px;
text-align: center;
margin-bottom: 20px;
border-radius: 5px;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.input-group input[type="text"],
.input-group input[type="password"],
.input-group input[type="email"] {
width: 100%;
padding: 10px;
font-size: 16px;
border-radius: 3px;
}
/* 不同边框样式示例 */
.input-group:nth-of-type(1) input {
border: 3px solid #4CAF50; /* 实线绿色边框 */
}
.input-group:nth-of-type(2) input {
border: 3px dashed #ff9800; /* 虚线橙色边框 */
}
.input-group:nth-of-type(3) input {
border: 2px dotted #2196f3; /* 点线蓝色边框 */
}
</style>
</head>
<body>
<div class="form-container">
<h2>用户登录</h2>
<form action="#">
<div class="input-group">
<label for="username">用户名:</label>
<input type="text" id="username">
</div>
<div class="input-group">
<label for="password">密码:</label>
<input type="password" id="password">
</div>
<div class="input-group">
<label for="email">邮箱:</label>
<input type="email" id="email">
</div>
</form>
</div>
</body>
</html>
4.3 内外边距（Padding 和 Margin）
`padding`和`margin`的用法非常相似，都支持缩写形式，并遵循顺时针规则：上、右、下、左。
- 四值： `padding: 10px 20px 30px 40px;` (上 右 下 左)
- 三值： `padding: 10px 20px 30px;` (上 左右 下)
- 两值： `padding: 10px 20px;` (上下 左右)
- 一值： `padding: 10px;` (四边均相同)
外边距的居中妙用： 对于块级元素，当设置了固定宽度时，可以使用`margin: 0 auto;`使其在父容器中水平居中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内外边距示例</title>
<style>
body { font-family: sans-serif; margin: 0; padding: 0; box-sizing: border-box; background-color: #f4f4f4; }
.card-panel {
width: 300px;
background: white;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin: 50px auto; /* 居中显示，上下50px外边距 */
}
.card-header {
background-color: #007bff;
color: white;
padding: 15px; /* 上下左右内边距15px */
font-size: 1.2em;
text-align: center;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.card-content {
padding: 20px 15px; /* 上下20px，左右15px内边距 */
line-height: 1.6;
color: #555;
}
.element-with-margin {
background-color: #ffe0b2;
padding: 10px;
margin: 10px 20px 30px 40px; /* 上10px, 右20px, 下30px, 左40px 外边距 */
border: 1px dashed #ff9800;
}
</style>
</head>
<body>
<div class="card-panel">
<div class="card-header">欢迎登录</div>
<div class="card-content">
<p>请填写您的账户信息进行登录。</p>
<div class="element-with-margin">这是一个有自定义外边距的元素。</div>
</div>
</div>
</body>
</html>
4.4 圆角边框
`border-radius`属性用于为元素的边框添加圆角效果。
- 单值： `border-radius: 10px;` (四个角都是10px的圆角)
- 四值： `border-radius: 10px 20px 30px 40px;` (左上 右上 右下 左下，顺时针)
- 圆形： 对于宽高相等的元素，`border-radius: 50%;`可以使其变为圆形。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>圆角边框</title>
<style>
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f0f2f5; }
.rounded-box {
width: 120px;
height: 120px;
background-color: #2196f3; /* 蓝色背景 */
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
margin: 15px;
}
.box-uniform-radius {
border-radius: 15px; /* 四个角都是15px圆角 */
}
.box-circle {
border-radius: 50%; /* 变成圆形 */
background-color: #e91e63; /* 粉色 */
}
.box-custom-radius {
border-radius: 20px 0 20px 0; /* 左上和右下20px圆角，右上和左下直角 */
background-color: #ffc107; /* 黄色 */
}
</style>
</head>
<body>
<div class="rounded-box box-uniform-radius">R15</div>
<div class="rounded-box box-circle">圆</div>
<div class="rounded-box box-custom-radius">自定义</div>
</body>
</html>
4.5 盒子阴影（Box Shadow）
`box-shadow`属性为元素框添加阴影效果，与`text-shadow`类似，但作用于整个盒子。
- `box-shadow: [水平偏移] [垂直偏移] [模糊半径] [扩散半径] [颜色] [inset];`
- `inset`：可选，表示内阴影。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #e3f2fd; }
.shadow-box {
width: 150px;
height: 150px;
background-color: white;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2em;
color: #333;
border-radius: 8px;
}
.box-shadow-basic {
/* 右偏10px, 下偏10px, 模糊10px, 黄色阴影 */
box-shadow: 10px 10px 10px #ffd700;
}
.box-shadow-image img {
width: 180px;
height: auto;
border-radius: 15px;
/* 稍柔和的阴影 */
box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}
.box-shadow-inset {
/* 内阴影 */
box-shadow: inset 0 0 15px #e91e63;
}
</style>
</head>
<body>
<div class="shadow-box box-shadow-basic">基本阴影</div>
<div class="shadow-box box-shadow-inset">内阴影</div>
<div class="shadow-box box-shadow-image">
<img src="images/profile.png" alt="头像">
</div>
</body>
</html>
5. 浮动（Float）
5.1 标准文档流
在CSS中，元素在页面上默认的排列方式称为标准文档流。
- 块级元素（Block-level Elements）： 如`<h1>`-`<h6>`, `<p>`, `<div>`, `<ul>`, `<li>`等。它们默认会独占一行，宽度填满父容器，高度由内容决定。
- 行内元素（Inline Elements）： 如`<span>`, `<a>`, `<img>`, `<strong>`等。它们不会独占一行，宽度和高度由其内容决定，可以与其他行内元素在同一行显示。
通常情况下，块级元素可以包含行内元素，但行内元素不能直接包含块级元素。
5.2 `display`属性
`display`属性用于控制元素的显示类型，可以改变元素在文档流中的行为。
- `display: block;`：将元素显示为块级元素。
- `display: inline;`：将元素显示为行内元素。
- `display: inline-block;`：将元素显示为行内块级元素，它既能像行内元素一样并排显示，又可以设置宽度、高度、内外边距等块级元素特性。
- `display: none;`：隐藏元素，不占据任何空间。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Display属性</title>
<style>
body { font-family: sans-serif; }
.element-box {
width: 100px;
height: 50px;
border: 1px solid #3f51b5; /* 蓝色边框 */
background-color: #e8eaf6;
text-align: center;
line-height: 50px;
margin: 5px;
float: left; /* 使用 float 也可以实现并排 */
}
.block-element {
display: block;
border-color: green;
clear: left; /* 清除浮动，确保独占一行 */
}
.inline-element {
display: inline;
width: auto; /* inline 元素宽度由内容决定 */
height: auto; /* inline 元素高度由内容决定 */
border-color: orange;
}
.inline-block-element {
display: inline-block;
border-color: purple;
}
.hidden-element {
display: none; /* 元素将完全不可见且不占据空间 */
background-color: #f44336;
color: white;
}
.clear-float {
clear: both;
height: 1px; /* 辅助性清浮动元素 */
}
</style>
</head>
<body>
<div class="element-box block-element">块元素</div>
<span class="element-box inline-element">行内元素</span>
<span class="element-box inline-block-element">行内块</span>
<div class="element-box hidden-element">隐藏元素</div>
<div class="element-box inline-block-element">行内块2</div>
<div class="clear-float"></div>
<p>标准文档流中的段落。</p>
</body>
</html>
虽然`display: inline-block`可以实现元素的水平排列，但在许多复杂布局场景下，`float`仍然是常用的布局手段。不过，使用`float`会导致元素脱离文档流，从而引发"父级边框塌陷"等问题。
5.3 `float`属性
`float`属性可以将元素从正常文档流中"浮动"起来，使其向左或向右移动，直到遇到父容器的边缘或另一个浮动元素的边缘。浮动元素后面的内容会环绕它。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
#container-float {
border: 2px solid #000; /* 父容器边框 */
padding: 10px;
}
.float-item {
width: 150px;
height: 80px;
background-color: #bbdefb; /* 浅蓝色背景 */
margin: 10px;
border: 1px dashed #2196f3; /* 蓝色虚线边框 */
text-align: center;
line-height: 80px;
font-weight: bold;
color: #333;
}
.float-left {
float: left; /* 左浮动 */
}
.float-right {
float: right; /* 右浮动 */
}
.text-content {
border: 1px dashed #f44336;
padding: 10px;
margin-top: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="container-float" class="clearfix">
<div class="float-item float-left">左侧导航</div>
<div class="float-item float-left">左侧副栏</div>
<div class="float-item float-right">右侧广告</div>
<div class="float-item float-right">右侧工具</div>
<p class="text-content">
这段文字内容会环绕浮动元素。浮动元素会脱离文档流，
但是它们仍然会影响周围的文本流。这里是更多的文本来填充空间，
展示文本如何被浮动元素"挤开"。
</p>
</div>
</body>
</html>
5.4 父级边框塌陷问题
当父容器中所有子元素都浮动时，父容器的高度无法被子元素撑开，导致父容器的边框塌陷。这会影响布局和背景显示。
解决方案：
-
增加父级元素高度：
直接为父容器设置固定的`height`。简单直接，但不够灵活，当内容变化时需要手动调整。
#parent { border: 1px solid black; height: 300px; /* 固定高度 */ } -
增加一个空的`div`标签并清除浮动：
在所有浮动元素的末尾添加一个空的块级元素，并应用`clear: both;`。虽然简单，但引入了无语义的HTML元素，不推荐。
<div id="parent"> <div class="float-child"></div> <div class="float-child"></div> <div style="clear: both;"></div> <!-- 清除浮动的空div --> </div> -
`overflow`属性：
为父容器设置`overflow: hidden;`或`overflow: auto;`。这会触发BFC（块级格式化上下文），从而包含浮动子元素。简单有效，但某些情况下可能会裁剪内容或出现不必要的滚动条。
#parent { border: 1px solid black; overflow: hidden; /* 或 auto */ } -
使用`:after`伪元素（推荐的clearfix方法）：
通过为父容器添加一个`:after`伪元素，并清除其浮动。这种方法不增加额外的HTML标签，且兼容性好。
.clearfix::after { content: ""; /* 必需 */ display: table; /* 将伪元素设置为块级元素并创建新的BFC */ clear: both; /* 清除左右浮动 */ } /* 针对IE6/7的兼容性处理 (可选) */ .clearfix { zoom: 1; }<div id="parent" class="clearfix"> <div class="float-child"></div> <div class="float-child"></div> </div>
5.5 `display`与`float`的对比
- `display`： 主要控制元素在文档流中的基本显示类型，如块级、行内、行内块。它可以改变元素的盒子模型行为，但不直接脱离文档流。
- `float`： 使元素脱离正常文档流，向左或向右浮动。它用于创建多列布局或文本环绕图片的效果。由于脱离文档流，可能会导致父元素高度塌陷，需要通过清除浮动来解决。
6. 定位（Position）
`position`属性用于定义元素的定位方式，可以控制元素在页面上的精确位置。
6.1 相对定位（`position: relative;`）
相对定位的元素会相对于其在正常文档流中的原始位置进行偏移。即使元素被偏移了，它原先所占据的空间仍保留在文档流中，不会影响其他元素的布局。
- `top`: 向上偏移。
- `bottom`: 向下偏移。
- `left`: 向左偏移。
- `right`: 向右偏移。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相对定位示例</title>
<style>
body { padding: 30px; font-family: sans-serif; }
.wrapper-relative {
border: 2px solid #e91e63; /* 粉色边框 */
padding: 15px;
background-color: #fce4ec;
margin-bottom: 50px;
}
.box-item {
width: 100px;
height: 50px;
background-color: #bbdefb; /* 浅蓝色背景 */
border: 1px solid #2196f3; /* 蓝色边框 */
margin: 10px;
text-align: center;
line-height: 50px;
font-weight: bold;
display: inline-block; /* 默认并排显示 */
}
#box-moved-up-left {
background-color: #4CAF50; /* 绿色 */
position: relative; /* 相对定位 */
top: -20px; /* 向上偏移20px */
left: -20px; /* 向左偏移20px */
color: white;
}
#box-normal {
background-color: #ffc107; /* 黄色 */
}
#box-moved-down-right {
background-color: #9c27b0; /* 紫色 */
position: relative; /* 相对定位 */
bottom: -30px; /* 向下偏移30px */
right: -30px; /* 向右偏移30px */
color: white;
}
</style>
</head>
<body>
<div class="wrapper-relative">
<div class="box-item" id="box-moved-up-left">向上向左</div>
<div class="box-item" id="box-normal">正常位置</div>
<div class="box-item" id="box-moved-down-right">向下向右</div>
</div>
<p>这段文字会紧随在上方容器之后，因为它没有脱离文档流。</p>
</body>
</html>
6.1.1 练习：移动方块
实现以下方块的布局效果（图片示意：一个大框内有5个小方块，通过相对定位将其移动到特定位置）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>相对定位练习</title>
<style>
body { margin: 20px; padding: 0; font-family: sans-serif; }
#layout-box {
width: 320px;
height: 320px;
padding: 10px;
border: 2px solid #f44336; /* 红色边框 */
background-color: #ffebee;
box-sizing: border-box; /* 边框和内边距计算在宽度内 */
}
.link-square {
width: 100px;
height: 100px;
background-color: #ffab91; /* 浅橙色背景 */
text-align: center;
line-height: 100px;
color: white;
font-weight: bold;
text-decoration: none;
display: block; /* 默认独占一行 */
border: 1px solid #ef5350;
}
.link-square:hover {
background-color: #ef5350; /* 悬停时深橙色 */
}
/* 应用相对定位进行偏移 */
.square-b {
position: relative;
top: -100px; /* 向上偏移一个方块的高度 */
left: 200px; /* 向右偏移两个方块的宽度 */
}
.square-d {
position: relative;
top: -200px; /* 向上偏移两个方块的高度 */
left: 200px; /* 向右偏移两个方块的宽度 */
}
.square-e {
position: relative;
top: -300px; /* 向上偏移三个方块的高度 */
left: 100px; /* 向右偏移一个方块的宽度 */
}
</style>
</head>
<body>
<div id="layout-box">
<a class="link-square square-a" href="#">方块1</a>
<a class="link-square square-b" href="#">方块2</a>
<a class="link-square square-c" href="#">方块3</a>
<a class="link-square square-d" href="#">方块4</a>
<a class="link-square square-e" href="#">方块5</a>
</div>
</body>
</html>
6.2 绝对定位（`position: absolute;`）
绝对定位的元素会脱离正常文档流，不再占据空间。它会相对于其最近的已定位祖先元素（即`position`属性不为`static`的祖先元素）进行偏移。如果找不到已定位祖先元素，则会相对于初始包含块（通常是浏览器视口）进行定位。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>绝对定位示例</title>
<style>
body { padding: 30px; font-family: sans-serif; }
.relative-parent {
border: 2px solid #1e88e5; /* 蓝色边框 */
padding: 20px;
margin-bottom: 50px;
height: 200px;
position: relative; /* 父容器设置为相对定位，作为绝对定位元素的参考 */
background-color: #e3f2fd;
}
.block-item {
width: 120px;
height: 60px;
background-color: #a7d9ff;
border: 1px dashed #64b5f6;
margin: 10px;
text-align: center;
line-height: 60px;
font-weight: bold;
color: #333;
}
#absolute-box {
background-color: #fbc02d; /* 黄色 */
position: absolute; /* 绝对定位 */
top: 30px; /* 相对于 .relative-parent 顶部偏移 */
left: 50px; /* 相对于 .relative-parent 左侧偏移 */
color: white;
}
#normal-block-1 {
background-color: #81c784; /* 绿色 */
}
#normal-block-2 {
background-color: #ff8a65; /* 橙色 */
}
</style>
</head>
<body>
<div class="relative-parent">
<div class="block-item" id="absolute-box">绝对定位盒</div>
<div class="block-item" id="normal-block-1">普通块1</div>
<div class="block-item" id="normal-block-2">普通块2</div>
<p>注意：绝对定位的盒子已脱离文档流，普通块元素会忽略它的存在。</p>
</div>
<p>这段文字在相对定位父容器之后。</p>
</body>
</html>
6.3 固定定位（`position: fixed;`）
固定定位的元素与绝对定位类似，也会脱离正常文档流。但它始终相对于浏览器视口（viewport）进行定位，即使页面滚动，元素的位置也会保持不变。常用于创建固定导航栏、返回顶部按钮等。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>固定定位示例</title>
<style>
body { height: 1500px; /* 模拟可滚动内容 */ font-family: sans-serif; margin: 0; padding: 20px; }
.content-block {
height: 300px;
background-color: #e0f7fa;
margin-bottom: 20px;
padding: 20px;
border: 1px solid #00bcd4;
}
.absolute-element {
width: 100px;
height: 100px;
background-color: #ff5722; /* 橙红色 */
color: white;
text-align: center;
line-height: 100px;
position: absolute; /* 绝对定位，相对于body（因为body是默认的定位父级） */
right: 20px;
bottom: 20px;
}
.fixed-element {
width: 80px;
height: 80px;
background-color: #4CAF50; /* 绿色 */
color: white;
text-align: center;
line-height: 80px;
position: fixed; /* 固定定位，相对于视口 */
right: 20px;
top: 20px;
border-radius: 50%; /* 圆形 */
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
z-index: 100; /* 确保在其他内容之上 */
}
</style>
</head>
<body>
<div class="content-block">这是页面内容区域 1。尝试滚动页面。</div>
<div class="absolute-element">绝对定位</div>
<div class="fixed-element">固定</div>
<div class="content-block">这是页面内容区域 2。</div>
<div class="content-block">这是页面内容区域 3。</div>
</body>
</html>
6.4 `z-index`属性
`z-index`属性用于控制已定位元素（`position`不为`static`的元素）在垂直于屏幕的Z轴上的堆叠顺序。拥有更高`z-index`值的元素会显示在较低`z-index`值的元素之上。
- `z-index`值默认为`auto`或`0`。
- 可以设置任意整数值，正值表示在上方，负值表示在下方。
- `z-index`仅对已定位元素有效。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Z-index图层</title>
<style>
body { font-family: sans-serif; margin: 20px; }
.card-wrapper {
padding: 0;
margin: 0;
width: 250px;
overflow: hidden;
font-size: 14px;
line-height: 28px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
position: relative; /* 父级设置为相对定位，为子元素提供定位上下文 */
}
.card-wrapper ul {
padding: 0;
margin: 0;
list-style: none;
}
.card-wrapper li {
padding: 5px 10px;
border-bottom: 1px dashed #eee;
}
.card-wrapper li:last-child {
border-bottom: none;
}
.cover-image {
width: 100%;
height: 150px;
background-image: url("images/book-cover.png"); /* 假设图片路径 */
background-size: cover;
background-position: center;
position: relative; /* 相对定位，为了在其上叠加其他元素 */
}
.promo-text, .promo-overlay {
position: absolute;
width: 80%;
height: 40px;
line-height: 40px;
text-align: center;
top: 100px; /* 位于图片底部 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
border-radius: 5px;
}
.promo-text {
color: white;
font-weight: bold;
font-size: 1.1em;
z-index: 2; /* 文本在遮罩层之上 */
}
.promo-overlay {
background: black;
opacity: 0.6; /* 半透明黑色背景 */
z-index: 1; /* 遮罩层在文本之下 */
}
</style>
</head>
<body>
<div class="card-wrapper">
<div class="cover-image">
<div class="promo-overlay"></div>
<div class="promo-text">限时优惠！</div>
</div>
<ul>
<li><strong>书名:</strong> CSS进阶指南</li>
<li><strong>作者:</strong> 前端小智</li>
<li><strong>出版日期:</strong> 2023-08-15</li>
<li><strong>售价:</strong> ￥88.00</li>
</ul>
</div>
</body>
</html>
