下面是一个简单的静态网页 HTML 模板,适合用于展示个人信息、项目或企业。如果需要,可以根据具体需求进行修改。
html
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background: #35424a;
color: #ffffff;
padding: 20px 0;
text-align: center;
}
nav {
margin: 15px 0;
}
nav a {
color: #ffffff;
margin: 0 15px;
text-decoration: none;
}
section {
padding: 20px;
margin: 15px;
background: #ffffff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
footer {
text-align: center;
padding: 10px 0;
background: #35424a;
color: #ffffff;
position: relative;
bottom: 0;
width: 100%;
}
@media (max-width: 600px) {
nav {
display: block;
}
nav a {
display: block;
margin: 10px 0;
}
}
我是一个热爱编程和设计的开发者,致力于创建优秀的用户体验。
如果你有任何问题或合作的想法,请通过以下方式联系我:
版权 © 2023 我的个人主页
说明:
- 头部部分 (`
`): 包含文档的元信息(字符集、视口设置、标题和样式)。- 头部 (`
- 内容部分 (`
- 脚部 (`
- CSS 样式: 使用简单的内联样式,展示基本的布局和响应式设计。
将这段代码保存为 `.html` 文件,然后用浏览器打开,就能看到效果。
查看详情
查看详情