HTML美化

美化网页的方式有很多，其中使用CSS是最常见的方法。以下是一些简单的HTML和CSS技巧，帮助你美化网页：

### 1. 字体和颜色

body {
    font-family: "Arial", sans-serif;
    color: #333; /* 文本颜色 */
}

h1, h2, h3 {
    color: #0066cc; /* 标题颜色 */
}

### 2. 背景和边框

body {
    background-color: #f4f4f4; /* 背景颜色 */
    margin: 0; /* 去除默认边距 */
}

.container {
    width: 80%; /* 设置容器宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 20px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 10px; /* 圆角 */
}

### 3. 链接和按钮样式

a {
    color: #0066cc; /* 链接颜色 */
    text-decoration: none; /* 去除下划线 */
}

a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.button {
    background-color: #0066cc;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

### 4. 图片样式

```css
img {
    max-width: 100%; /* 图片最大宽度为父元素宽度 */
    height: auto; /* 保持图片宽高比 */
}

```

### 5. 布局

.header, .footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.main-content {
    float: left; /* 左浮动 */
    width: 70%;
    padding: 20px;
}

.sidebar {
    float: right; /* 右浮动 */
    width: 30%;
    padding: 20px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

### 6. 响应式设计

@media only screen and (max-width: 600px) {
    .main-content, .sidebar {
        width: 100%;
        float: none;
    }
}