本教程专为网页设计初学者量身定制，通过详细的任务描述、准备工作、实施步骤及实验实训，教你如何使用HTML的div标签和CSS样式，从零开始设计一个充满春节气氛的门联网页。通过简单的步骤，学习如何运用Flexbox布局、设置传统字体和颜色，以及实现响应式设计，让网页既美观又实用。
知识回顾
<div>详解
一、定义
<div>是一个块级元素，主要用于对其他HTML元素进行分组。它不具有任何语义意义，主要是为了方便布局、样式和JavaScript的操作。
二、特性
- 块级元素 ：
<div>标签是块级元素，这意味着它会占据整行空间，任何下一个元素都会在其下方显示。 - 无语义 ：虽然
<div>可以用来进行布局，但它不表示任何特定的内容，具有完全的中立性。为了改进网页的可访问性，建议在合适的情况下使用更多的语义标签，如<header>、<section>、<article>等。 - 可嵌套 ：可以在
<div>元素内部嵌套其他的<div>或任何其他元素，这使得布局非常灵活。 - 可配合CSS使用 ：通过
class或id属性，可以对<div>元素进行样式化，使得网页设计更具层次感和美观性。 - 可以被JavaScript操作 ：可以通过Javascript对
<div>元素进行操作，如显示、隐藏、修改内容、改变样式等。
三、用法
-
布局 ：在网页中使用
<div>标签创建不同的区域。css<div class="header">网站头部</div> <div class="content">网站内容</div> <div class="footer">网站底部</div> -
样式化 ：通过CSS为不同的
<div>添加不同的样式。css.header { background-color: #f1f1f1; padding: 20px; text-align: center; } .content { padding: 20px; } .footer { background-color: #f1f1f1; padding: 10px; text-align: center; } -
响应式设计 ：结合CSS Flexbox或Grid布局，与
div元素一起使用，可以实现响应式网页设计，有效适应不同屏幕尺寸。 -
div的style属性说明
div的style属性总结
| 属性 | 描述 | 示例 |
|---|---|---|
background-color |
设置背景颜色 | background-color: #f4f4f4; |
width |
设置元素的宽度 | width: 300px; |
height |
设置元素的高度 | height: 150px; |
border |
设置边框 | border: 1px solid #000; |
border-radius |
设置圆角边框 | border-radius: 10px; |
margin |
设置外边距 | margin: 20px; |
padding |
设置内边距 | padding: 15px; |
display |
设置元素显示方式（如块级、行内等） | display: flex; |
flex |
设置弹性布局属性 | flex: 1; |
align-items |
设置弹性容器内子项的对齐方式 | align-items: center; |
justify-content |
设置弹性容器内项目的对齐方式 | justify-content: space-between; |
color |
设置文本颜色 | color: #333; |
font-size |
设置字体大小 | font-size: 16px; |
text-align |
设置文本对齐方式 | text-align: center; |
overflow |
设置溢出内容的处理方式 | overflow: hidden; |
box-shadow |
设置阴影效果 | box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
opacity |
设置透明度（0到1之间的值） | opacity: 0.8; |
cursor |
设置鼠标悬停时的指针样式 | cursor: pointer; |
position |
设置定位方式（如absolute、relative、fixed等） | position: relative; |
top |
设置相对定位的偏移量 | top: 10px; |
left |
设置相对定位的偏移量 | left: 20px; |
z-index |
设置堆叠顺序 | z-index: 100; |
div+css布局小技巧
- 首先整体上对页面进行分块，接着按照分块设计使用div标记，并理清div标记的嵌套和层叠关系，然后对各div标记进行css定位，最后在各个分块中添加相应的内容。
- 三行模式（头部、主体及页脚）和三列模式（左中右三部分）
- 三行二列模式和三行三列模式
- 多行多列复杂模式
任务描述
**设计要求：** 1. **整体布局**：
diff
- 使用 Flexbox 布局，确保内容居中。
- 横批"福来运转"位于左右联的上方。- 背景与字体：
diff
- 整个页面背景设置为白色。
- 左右联的背景颜色为红色，文字颜色为黑色。
- 字体使用"华文行楷"。- 字体大小：
markdown
- 横批字体大小为 `64px`。
- 左右联字体大小为 `72px`。- 间距与排列：
markdown
- 横批下方与左右联之间增加 `40px` 的间距。
- 左右联之间的间距设置为 `160px`，确保宽松的视觉效果。
- 左右联的文本垂直显示，且使用 `writing-mode: vertical-rl;` 进行排列。- 圆角与阴影：
diff
- 横批和对联的边框设置为圆角，增加了一定的美观性。- 响应表现：
diff
- 整体布局应在不同桌面尺寸上保持良好的显示效果。任务实施
整个春节对联的设计思路可以分为以下几个步骤：
-
确定主题和内容：
- 选择与春节相关的主题，例如"福来运转"、"瑞雪兆丰年景好"、"喜气洋溢乐无边"等，这些内容通常表达了吉祥、喜庆的祝愿。
-
设计布局：
- 使用 Flexbox 布局来实现对联的排列。上下排列的对联会被放在一个大的容器中，通常会用一个横批来连接上下联。
- 设计时需考虑元素之间的间距以确保视觉上的平衡。
-
选择字体和颜色：
- 选择适合的字体，通常是具有传统文化特色的字体（如华文行楷）来传达节日氛围。
- 亮眼的颜色选择，如红色和黑色，这样的对比效果通常能够吸引眼球，并符合春节的喜庆色彩。
-
使用 CSS 样式进行美化：
- 为不同的元素（如横批、上下联）设置适当的大小、颜色、边距和背景，以确保它们在视觉上分明且协调。
- 使用适当的 CSS 属性如
padding、margin和border-radius等，来提升元素的美感与可读性。
-
实现垂直排列：
- 通过 CSS 的
writing-mode: vertical-rl;将对联的内容设置为竖排，使其符合传统对联的书写风格。
- 通过 CSS 的
-
响应式设计：
- 确保网页在不同设备上的兼容性和可读性，根据视口大小的变化进行适当调整，可能需要使用媒体查询来实现这一点。
源代码参考
xml
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>春节门联</title>
<style>
body {
background-color: #ffffff; /* 白色背景 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 全屏高度 */
margin: 0;
font-family: '华文行楷', 'KaiTi', serif; /* 设置华文行楷字体 */
}
.couplet {
display: flex; /* 水平排列 */
align-items: center; /* 垂直居中 */
flex-direction: column; /* 垂直方向 */
}
.header {
font-size: 64px; /* 横批字体大小 */
color: #000; /* 黑色文字 */
background-color: #ff0000; /* 红色背景 */
padding: 10px;
margin-bottom: 40px; /* 增加下边距 */
border-radius: 5px;
text-align: center;
}
.columns {
display: flex; /* 水平排列左右联 */
justify-content: center; /* 居中对齐 */
width: 100%; /* 100% 宽度 */
}
.column {
display: flex;
flex-direction: column; /* 纵向排列 */
align-items: center; /* 中心对齐 */
margin: 0 160px; /* 增加左右间距 */
}
.line {
font-size: 72px; /* 对联字体大小 */
color: #000; /* 黑色文字 */
background-color: #ff0000; /* 红色背景 */
padding: 20px;
margin: 5px 0; /* 上下间距 */
border-radius: 5px;
writing-mode: vertical-rl; /* 垂直排列文字 */
height: auto; /* 自适应高度 */
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
</style>
</head>
<body>
<div class="couplet">
<div class="header">福来运转</div>
<div class="columns">
<div class="column">
<div class="line">瑞雪兆丰年景好</div>
</div>
<div class="column">
<div class="line">喜气洋溢乐无边</div>
</div>
</div>
</div>
</body>
</html>实验实训
实验一
1）左边区域宽228px，高400px；左边与右边的间隙是15px；
2）右上区域宽957px，高100px；
3）右下每个区域块宽227px，高269px；其与上边、左边的间隙分别为23px，16px
实验二
1）左侧、右侧每张图片宽170px，高190px；图片与图片的间隙均为10px；
2）中间部分宽350px，高390px；左右两侧的间隙均为30px。