最简单的css网页制作
基础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文件，添加以下样式规则：
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中添加媒体查询以适应不同屏幕尺寸：
@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;
}
