好的，以下是一个简单的
CSDN博客框架的HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>我的
博客</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<
header>
<div class="container">
<h1>我的
博客</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">标签</a></li>
<li><a href="#">关于我</a></li>
</ul>
</nav>
</div>
</
header>
<main>
<div class="container">
<article>
<h2>文章标题</h2>
<div class="author">
<img src="avatar.jpg">
<div>
<p>作者：小明</p>
<p>发布时间：2021年9月1日</p>
</div>
</div>
<p>文章内容...</p>
</article>
<aside>
<h3>最新文章</h3>
<ul>
<li><a href="#">文章标题1</a></li>
<li><a href="#">文章标题2</a></li>
<li><a href="#">文章标题3</a></li>
<li><a href="#">文章标题4</a></li>
<li><a href="#">文章标题5</a></li>
</ul>
<h3>标签</h3>
<ul>
<li><a href="#">标签1</a></li>
<li><a href="#">标签2</a></li>
<li><a href="#">标签3</a></li>
<li><a href="#">标签4</a></li>
<li><a href="#">标签5</a></li>
</ul>
</aside>
</div>
</main>
<footer>
<div class="container">
<p>版权所有 © 2021 我的
博客</p>
</div>
</footer>
</body>
</html>
```
接下来，我们需要创建一个名为`style.css`的
样式表文件，并在其中添加以下
样式：
```css
/* 全局
样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #f60;
}
/* 头部
样式 */
header {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
}
header h1 {
margin: 0;
padding: 20px;
float: left;
font-size: 24px;
}
header nav {
float: right;
margin: 0;
padding: 0;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
float: left;
margin: 0;
padding: 0;
}
header nav ul li a {
display: block;
padding: 20px;
}
header nav ul li a:hover {
background-color: #f60;
color: #fff;
}
/* 主体
样式 */
main {
margin-top: 80px;
}
article {
background-color: #fff;
padding: 20px;
margin-bottom: 40px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
article h2 {
margin: 0;
padding: 0;
}
.author {
margin: 20px 0;
padding: 0;
display: flex;
align-items: center;
}
.author img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}
.author p {
margin: 0;
padding: 0;
font-size: 14px;
}
aside {
margin-left: 20px;
flex: 1;
}
aside h3 {
margin: 0;
padding: 0;
font-size: 18px;
}
aside ul {
list-style: none;
margin: 0;
padding: 0;
}
aside ul li {
margin: 0;
padding: 0;
}
aside ul li a {
display: block;
padding: 5px 0;
}
/* 页脚
样式 */
footer {
background-color: #f2f2f2;
padding: 20px;
margin-top: 40px;
}
footer p {
margin: 0;
padding: 0;
font-size: 14px;
text-align: center;
}
```
现在，我们就完成了一个简单的
CSDN博客的HTML+CSS框架。您可以根据自己的需求进行
修改和扩展，添加更多的功能和
样式。
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
