一个好看的html页面
时间: 2023-09-25 16:16:24 浏览: 91
漂亮的html网页
很高兴帮您设计一个漂亮的 HTML 页面!以下是一个简单的 HTML 页面示例,您可以根据自己的需要进行修改:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
nav {
background-color: #ccc;
padding: 10px;
text-align: center;
}
nav a {
color: #333;
text-decoration: none;
padding: 10px;
font-size: 20px;
margin: 0 10px;
}
nav a:hover {
background-color: #999;
color: #fff;
}
main {
padding: 20px;
text-align: justify;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>欢迎来到我的网页!</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
<main>
<h2>介绍</h2>
<p>这是一个漂亮的 HTML 页面示例,用于展示如何创建一个简单但美观的网页。您可以根据自己的需要进行修改。</p>
<h2>功能</h2>
<p>这个页面包含了以下功能:</p>
<ul>
<li>响应式设计,适应不同大小的屏幕</li>
<li>标题、导航栏、主体和页脚的样式设置</li>
<li>链接和鼠标悬停效果</li>
<li>基本的 HTML 结构,包括标题、段落和列表</li>
</ul>
<h2>结语</h2>
<p>希望这个示例能对您有所帮助,祝您创建出更多漂亮的网页!</p>
</main>
<footer>
<p>版权所有 © 2021 我的网页</p>
</footer>
</body>
</html>
```
这个页面包含一个响应式设计的头部、导航栏、主体和页脚,以及一些基本的 HTML 元素。您可以根据自己的需要进行修改和扩展,以创建您自己的漂亮网页。
阅读全文