当前位置：首页 > CSS

制作css网站教程

2026-04-02 12:05:08CSS

CSS网站制作基础教程

CSS（层叠样式表）用于控制网页的布局和外观，结合HTML可创建美观的网站。以下是核心步骤和示例代码：

创建HTML结构

HTML是网页的骨架，CSS为其添加样式。基础HTML模板如下：

<!DOCTYPE html>
<html>
<head>
    <title>我的网站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网站</h1>
    </header>
    <main>
        <p>这是一个段落。</p>
    </main>
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

编写CSS样式

在styles.css文件中定义样式规则：

制作css网站教程

/* 全局样式 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* 头部样式 */
header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

/* 主要内容区域 */
main {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* 页脚样式 */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
}

布局技术

Flexbox：适合一维布局（如导航栏）。

nav {
  display: flex;
  justify-content: space-around;
  background-color: #555;
  padding: 1rem;
}
nav a {
  color: white;
  text-decoration: none;
}

Grid：适合二维复杂布局（如网格内容）。

制作css网站教程

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.grid-item {
  background-color: #ddd;
  padding: 1rem;
}

响应式设计

使用媒体查询适配不同屏幕尺寸：

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr;
    }
    header h1 {
        font-size: 1.5rem;
    }
}

动画效果

通过CSS实现简单动画：

.button {
    background-color: #007BFF;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    transition: background-color 0.3s;
}
.button:hover {
    background-color: #0056b3;
}