当前位置：首页 > CSS

css与html制作

2026-01-16 10:39:05CSS

CSS与HTML制作基础

HTML（超文本标记语言）和CSS（层叠样式表）是构建网页的核心技术。HTML负责网页的结构和内容，CSS负责样式和布局。以下是两者的基本使用方法。

HTML基础结构

HTML文档的基本结构包括<!DOCTYPE>声明、<html>根元素、<head>和<body>部分。<head>中包含元数据如标题和CSS链接，<body>中包含可见内容。

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

CSS基本语法

CSS通过选择器（如元素名、类、ID）来指定样式规则。每个规则包含属性和值，用于控制元素的外观。

h1 {
    color: blue;
    font-size: 24px;
}

p {
    color: green;
    margin: 10px;
}

常用HTML标签

<div>：块级容器，用于布局。
<span>：行内容器，用于文本样式。
<a>：超链接。
<img>：图像。
<ul>和<li>：无序列表。
<table>、<tr>、<td>：表格。

CSS布局技术

盒模型：每个元素被视为一个盒子，包含内容、内边距、边框和外边距。
```
.box {
    width: 200px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}
```

Flexbox：一维布局模型，适合复杂布局。

.container {
    display: flex;
    justify-content: center;
}

Grid：二维布局系统，适合网格结构。

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

响应式设计

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

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

实际应用示例

以下是一个简单的网页示例，结合HTML和CSS实现基本布局和样式。

HTML文件（index.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>版权所有 © 2023</p>
    </footer>
</body>
</html>

CSS文件（styles.css）

css与html制作

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    text-align: center;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 20px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

@media (max-width: 600px) {
    header h1 {
        font-size: 20px;
    }
}

通过以上方法，可以快速掌握HTML和CSS的基础知识并开始制作网页。