.png)
前言
上一章，我们成功搭建了网站的“素颜”骨架。虽然内容齐全，但看起来平平无奇。这一章，我们将化身“美妆博主”，学习一种名为 CSS 的“魔法”，为我们的网站画上精致的“妆容”。
CSS (Cascading Style Sheets，层叠样式表) 就是网页的“化妆品”。它能控制页面上所有元素的颜色、字体、大小、间距、布局……总之，一切关于“美”的东西，都归它管。
准备好见证奇迹了吗？
第一步：请来我们的“化妆师”
首先，我们需要在项目文件夹里创建一个新文件，名为 style.css。这个文件就是我们的“化妆盒”，里面会装着所有的“化妆品”（样式代码）。
然后，打开我们上一章编辑的 index.html 文件，找到 <head> 区域里那行被注释掉的代码：
<!-- <link rel="stylesheet" href="style.css"> -->
把它前面的 <!-- 和后面的 --> 删除，变成这样：
<link rel="stylesheet" href="style.css">
保存 index.html。这个操作就像是在告诉我们的网页：“快去请那位名叫 style.css 的化妆师来给我化妆！”
第二步：调配我们的“化妆品”
现在，打开空白的 style.css 文件，我们将一步步地把下面的“配方”加进去。每加一段，你都可以保存文件，然后刷新浏览器里的 index.html，看看发生了什么神奇的变化！
1. 全局定调：给“画布”铺上底色
body {
font-family: 'Microsoft YaHei', 'SimSun', sans-serif; /* 选一种好看的中文字体 */
background-color: #f4f1ea; /* 一种淡淡的、有古风感的米色 */
color: #333; /* 主要文字颜色，深灰色，比纯黑更柔和 */
line-height: 1.6; /* 让行与行之间更疏朗，阅读不累 */
margin: 0 auto; /* 让整个页面在浏览器里居中 */
max-width: 960px; /* 页面最宽不要超过960像素，在大屏幕上更好看 */
padding: 20px; /* 给页面内容留点边距，不至于贴着浏览器边缘 */
}
解析：这段代码首先为整个页面
<body>定下了基调：字体、背景色、文字颜色和行高。margin: 0 auto;和max-width是让页面主体内容居中显示并限制最大宽度的常用技巧。
2. 勾勒轮廓：定义页眉、导航、主体和页脚
header, nav, main, footer {
padding: 20px;
margin-bottom: 20px;
background-color: #fff; /* 给这些区块一个白色背景，与主背景区分 */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 加一点点阴影，让它“浮”起来 */
border-radius: 8px; /* 边角稍微圆润一点，更有亲和力 */
}
nav a {
margin-right: 15px; /* 让导航链接之间有点空隙 */
text-decoration: none; /* 去掉链接默认的下划线 */
color: #8c6f54; /* 一种古典的棕色 */
font-weight: bold; /* 字体加粗 */
}
nav a:hover {
color: #c23b22; /* 鼠标放上去时，变成醒目的朱红色 */
}
解析：我们为主要的几个布局块
<header>,<nav>,<main>,<footer>添加了统一的样式。同时，也美化了导航栏nav里的链接a，并给它设置了一个鼠标悬停:hover效果。
3. 精雕细琢：美化文章卡片
main {
display: flex; /* 开启Flex布局，这是现代网页布局的利器！ */
gap: 20px; /* 在Flex布局下，项目之间的间距 */
}
article {
flex: 1; /* 在Flex布局下，让两个article平分空间 */
background-color: #fff9f2;
padding: 20px;
border: 1px solid #e0d9cf;
border-radius: 8px;
}
article img {
max-width: 100%; /* 图片宽度最多100%，不会超出卡片 */
height: auto; /* 高度自动，保持图片比例 */
border-radius: 8px; /* 图片也来点圆角 */
margin-bottom: 15px;
}
article a {
display: inline-block; /* 把链接变成块状，才能设置内外边距 */
background-color: #c23b22; /* 朱红色背景 */
color: #fff; /* 白色文字 */
padding: 8px 15px;
border-radius: 5px;
text-decoration: none;
margin-top: 10px;
}
article a:hover {
background-color: #a12f1b; /* 鼠标放上去时，颜色加深一点 */
}
解析：这里是本章的重点！我们用
display: flex;让两个<article>并排显示。然后分别美化了卡片本身、卡片里的图片img和“了解更多”的链接a，让它看起来像一个可以点击的按钮。
最终的“化妆盒” (style.css)
为了方便你对照，这里是 style.css 文件的完整内容。
/* 全局样式 */
body {
font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
background-color: #f4f1ea;
color: #333;
line-height: 1.6;
margin: 0 auto;
max-width: 960px;
padding: 20px;
}
/* 布局容器 */
header, nav, main, footer {
padding: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border-radius: 8px;
}
/* 导航 */
nav a {
margin-right: 15px;
text-decoration: none;
color: #8c6f54;
font-weight: bold;
}
nav a:hover {
color: #c23b22;
}
/* 主内容区域 */
main {
display: flex;
gap: 20px;
background-color: transparent; /* 主内容区域本身不需要背景色 */
box-shadow: none; /* 也不需要阴影，让卡片来显示 */
padding: 0;
}
/* 文章卡片 */
article {
flex: 1;
background-color: #fff9f2;
padding: 20px;
border: 1px solid #e0d9cf;
border-radius: 8px;
}
article img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
}
article a {
display: inline-block;
background-color: #c23b22;
color: #fff;
padding: 8px 15px;
border-radius: 5px;
text-decoration: none;
margin-top: 10px;
}
article a:hover {
background-color: #a12f1b;
}
/* 页脚 */
footer {
text-align: center; /* 文字居中 */
font-size: 0.9em; /* 字体小一点 */
color: #888;
}
课后作业
- 尝试修改
body的background-color，换一个你喜欢的背景色。 - 修改
article a的background-color，给“按钮”换个颜色。 - 如果你有两张以上的图片，试着在
index.html里再增加一个<article>板块，看看布局会不会自动适应？
恭喜！你已经掌握了网页“化妆”的基本技巧！我们的网站现在已经初具雏形，既有骨架，又有血肉和漂亮的“妆容”。在后续的教程中，我们还会学习如何让它“动”起来！
默认评论
Halo系统提供的评论