当前位置：首页 > CSS

使用CSS制作页面

2026-03-12 11:32:20CSS

基础HTML结构

创建HTML文件时需包含基本结构，<!DOCTYPE html>声明后嵌套<html>标签，内部划分<head>和<body>。<head>中定义字符集、视口及标题，<body>放置页面内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS页面示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>页眉内容</header>
    <main>主体内容</main>
    <footer>页脚内容</footer>
</body>
</html>

外部CSS引入

通过<link>标签将外部CSS文件与HTML关联，推荐使用独立CSS文件便于维护。文件路径需与HTML文件位置匹配，如href="styles.css"表示同级目录下的CSS文件。

盒模型与布局

CSS盒模型包含content、padding、border和margin。使用box-sizing: border-box可统一计算方式。布局常用属性包括：

使用CSS制作页面

display: 控制元素类型（block/inline/flex等）
position: 定位方式（relative/absolute/fixed）
float: 浮动布局

.container {
    box-sizing: border-box;
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
}

Flexbox与Grid布局

Flexbox适合一维布局，通过display: flex激活，常用属性：

justify-content: 主轴对齐
align-items: 交叉轴对齐
flex-direction: 排列方向

Grid适合二维布局，使用display: grid定义，配合grid-template-columns和grid-template-rows划分区域。

使用CSS制作页面

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

响应式设计

通过媒体查询适配不同设备，语法为@media (条件) { 样式 }。常用断点包括：

max-width: 768px（平板）
max-width: 480px（手机）

@media (max-width: 768px) {
    .container {
        width: 95%;
    }
    .grid-container {
        grid-template-columns: 1fr;
    }
}

动画与过渡

CSS动画通过@keyframes定义关键帧，元素使用animation属性调用。过渡效果通过transition实现平滑变化。

.button {
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #007bff;
}

@keyframes slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.slide-in {
    animation: slide 0.5s forwards;
}

字体与颜色管理

使用font-family指定字体栈，优先系统字体或通过@font-face引入自定义字体。颜色推荐HEX或RGBA格式，变量存储提升可维护性。

:root {
    --primary-color: #3498db;
    --font-main: 'Arial', sans-serif;
}

body {
    font-family: var(--font-main);
    color: #333;
}

.header {
    background-color: var(--primary-color);
}