用html写一个个人博客页面
时间: 2023-10-03 09:02:47 浏览: 119
网页设计作业-html个人博客网站设计源码(4页面).zip
好的,以下是一个简单的个人博客页面示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>个人博客</title>
<meta charset="utf-8">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 2em;
}
nav {
background-color: #eee;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
}
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>个人博客</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">关于我</a></li>
</ul>
</nav>
<main>
<h2>最新文章</h2>
<ul>
<li><a href="#">文章标题1</a></li>
<li><a href="#">文章标题2</a></li>
<li><a href="#">文章标题3</a></li>
</ul>
<h2>关于我</h2>
<p>这里是关于我的介绍。</p>
</main>
<footer>
<p>版权所有 © 2021 个人博客</p>
</footer>
</body>
</html>
```
你可以在此基础上根据自己的需求进行修改和扩展,如添加更多的文章、页面元素等。
阅读全文