当前位置：首页 > CSS

css怎么制作页面

2026-04-01 22:17:19CSS

使用HTML搭建页面结构

HTML是网页的基础结构，通过标签定义页面内容。基本结构包括<!DOCTYPE html>声明、<html>根元素、<head>（存放元信息）和<body>（存放可见内容）。

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>页眉内容</header>
    <main>主体内容</main>
    <footer>页脚内容</footer>
</body>
</html>

引入CSS样式

CSS控制页面的视觉表现。可以通过内联样式、<style>标签或外部CSS文件引入。推荐使用外部文件（如styles.css）实现样式与结构的分离。

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

布局设计

CSS提供多种布局方式：

css怎么制作页面

Flexbox：适合一维布局（行或列）。

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

Grid：适合二维布局（行和列）。

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

传统布局：使用float、position等属性（逐渐被Flexbox/Grid替代）。

样式化元素

通过选择器（如类名、ID、标签名）为元素添加样式：

header {
    background-color: #333;
    color: white;
    padding: 1rem;
}

.button {
    background: blue;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 8px 16px;
}

响应式设计

使用媒体查询（Media Queries）适配不同设备屏幕：

css怎么制作页面

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

动画与交互

CSS支持过渡和动画效果：

.button:hover {
    background: darkblue;
    transition: background 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.element {
    animation: fadeIn 1s;
}