左边个人信息右边博客内容的html和css
时间: 2024-06-08 12:10:07 浏览: 8
以下是一个简单的 HTML 和 CSS 示例,用于显示个人信息和博客内容:
HTML 代码:
```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;
}
h1 {
margin: 0;
}
nav {
background-color: #ddd;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
}
section {
margin: 20px;
}
article {
border: 1px solid #ddd;
padding: 10px;
}
aside {
background-color: #eee;
padding: 10px;
}
footer {
background-color: #333;
color: white;
padding: 20px;
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>
<li><a href="#">归档</a></li>
<li><a href="#">关于</a></li>
</ul>
</nav>
<section>
<article>
<h2>文章标题</h2>
<p>文章内容</p>
</article>
<aside>
<h3>个人信息</h3>
<ul>
<li>姓名:张三</li>
<li>性别:男</li>
<li>年龄:25</li>
<li>邮箱:zhangsan@example.com</li>
</ul>
</aside>
</section>
<footer>
© 2021 个人博客
</footer>
</body>
</html>
```
CSS 代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
h1 {
margin: 0;
}
nav {
background-color: #ddd;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
}
section {
margin: 20px;
}
article {
border: 1px solid #ddd;
padding: 10px;
}
aside {
background-color: #eee;
padding: 10px;
}
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
```
该示例包括以下内容:
- `header` 元素显示网站名称或标题。
- `nav` 元素包含用于导航到网站不同部分的链接。
- `section` 元素包含网站的主要内容。
- `article` 元素包含一篇博客文章。
- `aside` 元素包含个人信息或其他相关内容。
- `footer` 元素显示版权信息和其他相关信息。
CSS 样式定义了网站的外观和布局。例如,`header` 元素具有黑色背景和白色文本颜色,`nav` 元素具有灰色背景和黑色文本颜色,`article` 元素具有灰色边框和白色背景颜色等等。