网页设计基础十八讲：春节门联网页设计，用DIV+CSS打造传统与现代的完美融合教你如何使用HTML的<div>标签和C

本教程专为网页设计初学者量身定制，通过详细的任务描述、准备工作、实施步骤及实验实训，教你如何使用HTML的div标签和CSS样式，从零开始设计一个充满春节气氛的门联网页。通过简单的步骤，学习如何运用Flexbox布局、设置传统字体和颜色，以及实现响应式设计，让网页既美观又实用。

知识回顾

`<div>`详解

一、定义

<div>是一个块级元素，主要用于对其他HTML元素进行分组。它不具有任何语义意义，主要是为了方便布局、样式和JavaScript的操作。

二、特性

块级元素：<div>标签是块级元素，这意味着它会占据整行空间，任何下一个元素都会在其下方显示。
无语义：虽然<div>可以用来进行布局，但它不表示任何特定的内容，具有完全的中立性。为了改进网页的可访问性，建议在合适的情况下使用更多的语义标签，如<header>、<section>、<article>等。
可嵌套：可以在<div>元素内部嵌套其他的<div>或任何其他元素，这使得布局非常灵活。
可配合CSS使用：通过class或id属性，可以对<div>元素进行样式化，使得网页设计更具层次感和美观性。
可以被JavaScript操作：可以通过Javascript对<div>元素进行操作，如显示、隐藏、修改内容、改变样式等。

三、用法

布局：在网页中使用<div>标签创建不同的区域。

<div class="header">网站头部</div>
<div class="content">网站内容</div>
<div class="footer">网站底部</div>

样式化：通过CSS为不同的<div>添加不同的样式。

.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定位，最后在各个分块中添加相应的内容。
三行模式（头部、主体及页脚）和三列模式（左中右三部分）
三行二列模式和三行三列模式
多行多列复杂模式

任务描述

设计要求：

整体布局：
- 使用 Flexbox 布局，确保内容居中。
- 横批“福来运转”位于左右联的上方。
背景与字体：
- 整个页面背景设置为白色。
- 左右联的背景颜色为红色，文字颜色为黑色。
- 字体使用“华文行楷”。
字体大小：
- 横批字体大小为 64px。
- 左右联字体大小为 72px。
间距与排列：
- 横批下方与左右联之间增加 40px 的间距。
- 左右联之间的间距设置为 160px，确保宽松的视觉效果。
- 左右联的文本垂直显示，且使用 writing-mode: vertical-rl; 进行排列。
圆角与阴影：
- 横批和对联的边框设置为圆角，增加了一定的美观性。
响应表现：
- 整体布局应在不同桌面尺寸上保持良好的显示效果。

任务实施

整个春节对联的设计思路可以分为以下几个步骤：

确定主题和内容：
- 选择与春节相关的主题，例如"福来运转"、"瑞雪兆丰年景好"、"喜气洋溢乐无边"等，这些内容通常表达了吉祥、喜庆的祝愿。
设计布局：
- 使用 Flexbox 布局来实现对联的排列。上下排列的对联会被放在一个大的容器中，通常会用一个横批来连接上下联。
- 设计时需考虑元素之间的间距以确保视觉上的平衡。
选择字体和颜色：
- 选择适合的字体，通常是具有传统文化特色的字体（如华文行楷）来传达节日氛围。
- 亮眼的颜色选择，如红色和黑色，这样的对比效果通常能够吸引眼球，并符合春节的喜庆色彩。
使用 CSS 样式进行美化：
- 为不同的元素（如横批、上下联）设置适当的大小、颜色、边距和背景，以确保它们在视觉上分明且协调。
- 使用适当的 CSS 属性如 padding、margin 和 border-radius 等，来提升元素的美感与可读性。
实现垂直排列：
- 通过 CSS 的 writing-mode: vertical-rl; 将对联的内容设置为竖排，使其符合传统对联的书写风格。
响应式设计：
- 确保网页在不同设备上的兼容性和可读性，根据视口大小的变化进行适当调整，可能需要使用媒体查询来实现这一点。

源代码参照

<!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。

网页设计基础十八讲： 春节门联网页设计，用DIV+CSS打造传统与现代的完美融合