当前位置：首页 > CSS

最简单的css网页制作

2026-01-08 20:02:33CSS

创建基础HTML结构

一个简单的CSS网页制作从HTML骨架开始。以下是最基础的HTML5模板：

<!DOCTYPE html>
<html>
<head>
    <title>简单网页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>欢迎来到我的网页</h1>
    </header>
    <main>
        <p>这是一个使用CSS美化的简单网页。</p>
    </main>
    <footer>
        <p>© 2023 我的网站</p>
    </footer>
</body>
</html>

添加基础CSS样式

创建styles.css文件并添加以下基础样式：

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

header {
    background: #35424a;
    color: white;
    padding: 20px 0;
    text-align: center;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

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

增强视觉效果

通过添加一些简单的CSS属性来提升视觉效果：

h1 {
    margin: 0;
    font-size: 2em;
}

p {
    margin-bottom: 15px;
}

a {
    color: #e8491d;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

响应式设计

添加媒体查询使网页适应不同屏幕尺寸：

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

    main {
        padding: 10px;
    }
}

添加交互效果

通过CSS过渡效果增加简单的交互：

最简单的css网页制作

button {
    background: #e8491d;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background: #333;
}

这些代码组合起来就能创建一个简单但功能完整的CSS网页。可以根据需要进一步扩展和定制各个部分。