当前位置：首页 > CSS

最简单的css网页制作

2026-04-01 00:51:55CSS

基础HTML结构

创建一个名为index.html的文件，包含以下基础结构：

<!DOCTYPE html>
<html>
<head>
    <title>简单CSS网页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>网页标题</h1>
    </header>
    <main>
        <p>这是一个段落。</p>
    </main>
    <footer>
        <p>页脚内容</p>
    </footer>
</body>
</html>

基础CSS样式

创建style.css文件，添加以下样式规则：

最简单的css网页制作

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

header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

main {
    padding: 2rem;
}

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

添加响应式设计

在CSS中添加媒体查询以适应不同屏幕尺寸：

最简单的css网页制作

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

    main {
        padding: 1rem;
    }
}

简单交互效果

为链接和按钮添加悬停效果：

a, button {
    transition: all 0.3s ease;
}

a:hover, button:hover {
    opacity: 0.8;
}

使用Flexbox布局

创建简单的导航栏布局：

nav {
    display: flex;
    justify-content: space-around;
    background-color: #444;
    padding: 0.5rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
}