写一个个人博客的html页面
时间: 2024-05-10 14:15:56 浏览: 82
以下是一个简单的个人博客HTML页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Personal Blog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin-top: 0;
}
nav {
background-color: #666;
color: #fff;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: #333;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}
article {
width: 30%;
background-color: #fff;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
article h2 {
margin-top: 0;
}
article p {
text-align: justify;
}
</style>
</head>
<body>
<header>
<h1>My Personal Blog</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<section>
<article>
<h2>My First Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum eget massa id consequat. Integer at dignissim lorem. Proin id nisi luctus, dapibus quam id, facilisis massa. Sed lobortis sem quis risus congue, in laoreet sapien luctus. Donec et ex vestibulum, sollicitudin elit vel, porttitor dolor. Fusce rutrum, velit in aliquam sollicitudin, diam nisl malesuada mauris, eu ultrices elit turpis sit amet tortor. Ut vel lacus ac odio luctus accumsan. Sed vel convallis libero. Aliquam erat volutpat.</p>
</article>
<article>
<h2>My Second Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum eget massa id consequat. Integer at dignissim lorem. Proin id nisi luctus, dapibus quam id, facilisis massa. Sed lobortis sem quis risus congue, in laoreet sapien luctus. Donec et ex vestibulum, sollicitudin elit vel, porttitor dolor. Fusce rutrum, velit in aliquam sollicitudin, diam nisl malesuada mauris, eu ultrices elit turpis sit amet tortor. Ut vel lacus ac odio luctus accumsan. Sed vel convallis libero. Aliquam erat volutpat.</p>
</article>
<article>
<h2>My Third Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum eget massa id consequat. Integer at dignissim lorem. Proin id nisi luctus, dapibus quam id, facilisis massa. Sed lobortis sem quis risus congue, in laoreet sapien luctus. Donec et ex vestibulum, sollicitudin elit vel, porttitor dolor. Fusce rutrum, velit in aliquam sollicitudin, diam nisl malesuada mauris, eu ultrices elit turpis sit amet tortor. Ut vel lacus ac odio luctus accumsan. Sed vel convallis libero. Aliquam erat volutpat.</p>
</article>
</section>
<footer>
<p>© 2021 My Personal Blog</p>
</footer>
</body>
</html>
```
可以根据需要进行修改和调整,加入更多的内容和功能。
阅读全文