用HTML+css做一份个人博客
时间: 2023-08-10 11:34:20 浏览: 98
好的,下面是一个简单的 HTML+CSS 代码示例,用于创建一个基本的个人博客页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>我的博客</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.5em;
margin-top: 0;
}
a {
color: #333;
text-decoration: none;
font-weight: bold;
}
.container {
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.post {
margin: 20px 0;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.post h2 {
margin-top: 0;
}
.post p {
margin-top: 10px;
}
.post a {
color: #333;
font-weight: normal;
}
.post a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>我的博客</h1>
<h2>记录生活点滴</h2>
</header>
<div class="container">
<div class="post">
<h2><a href="#">我的第一篇博客</a></h2>
<p>发表于 2021年5月1日</p>
<p>这是我的第一篇博客,我想分享一些有关编程的经验。</p>
</div>
<div class="post">
<h2><a href="#">我的第二篇博客</a></h2>
<p>发表于 2021年5月5日</p>
<p>这是我的第二篇博客,我想分享一些有关旅行的故事。</p>
</div>
<div class="post">
<h2><a href="#">我的第三篇博客</a></h2>
<p>发表于 2021年5月10日</p>
<p>这是我的第三篇博客,我想分享一些有关美食的心得。</p>
</div>
</div>
</body>
</html>
```
你可以根据自己的需求和个人风格进行修改和调整。注意,这只是一个简单的示例,如果你想要创建一个真正的个人博客,你需要考虑更多的因素,比如博客的主题、文章的分类和标签、评论系统等等。
阅读全文