当前位置：首页 > CSS

最简单的css网页制作

2026-02-27 01:31:13CSS

基础HTML结构

创建一个基本的HTML文件（如index.html），包含以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>简单CSS网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个使用CSS样式化的简单示例。</p>
    <div class="box">这是一个带样式的盒子</div>
</body>
</html>

基本CSS样式

在同目录下创建style.css文件，添加以下基础样式：

最简单的css网页制作

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
}

.box {
    width: 200px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 20px auto;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

响应式布局

添加简单的媒体查询使网页适应不同设备：

@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    .box {
        width: 90%;
    }
}

交互效果

为元素添加悬停效果：

最简单的css网页制作

.box:hover {
    background-color: #e9e9e9;
    transform: scale(1.05);
    transition: all 0.3s ease;
}

颜色变量

使用CSS变量统一管理颜色：

:root {
    --primary-color: #3498db;
    --secondary-color: #f8f9fa;
}

h1 {
    color: var(--primary-color);
}

.box {
    background-color: var(--secondary-color);
}

浏览器兼容性

添加常见前缀确保兼容性：

.box {
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}