使用前端代码简单编辑博客页面排版
作业:
"""
特别注意格式的规范!!!
写的要让人看的懂.
"""
# html 博客编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>博客园界面</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<!--左侧菜单栏-->
<div class="blog-left">
<div class="blog-avatar">
<img src="1.jpg" alt="">
</div>
<div class="blog-title">
<span>Luz的博客</span>
</div>
<div class="blog-desc">
<span>Luz很懒,什么都没有留下</span>
</div>
<div class="blog-link">
<ul>
<li><a href="#">关于我</a> </li>
<li><a href="#">微博</a> </li>
<li><a href="#">微信公众号</a> </li>
</ul>
</div>
<div class="blog-item">
<ul>
<li><a href="#">#python</a> </li>
<li><a href="#">#Linux</a> </li>
<li><a href="#">#Go</a> </li>
</ul>
</div>
<div class="blog-link"></div>
<div class="blog-item"></div>
</div>
<!--左侧结束-->
<!--右侧开始-->
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="article-st">论富婆包养条件</span>
<span class="article-date" >2022/2/10</span>
</div>
<div class="article-desc">
<span>身体要棒!!</span>
</div>
<div class="article-info">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="article-st">论富婆包养条件</span>
<span class="article-date" >2022/2/10</span>
</div>
<div class="article-desc">
<span>身体要棒!!</span>
</div>
<div class="article-info">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="article-st">论富婆包养条件</span>
<span class="article-date" >2022/2/10</span>
</div>
<div class="article-desc">
<span>身体要棒!!</span>
</div>
<div class="article-info">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="article-st">论富婆包养条件</span>
<span class="article-date" >2022/2/10</span>
</div>
<div class="article-desc">
<span>身体要棒!!</span>
</div>
<div class="article-info">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="article-st">论富婆包养条件</span>
<span class="article-date" >2022/2/10</span>
</div>
<div class="article-desc">
<span>身体要棒!!</span>
</div>
<div class="article-info">
<span>#Python</span>
<span>#JavaScript</span>
</div>
</div>
</div>
<!--右侧结束-->
</body>
</html>
# css 文件引入
/*这是作用在博客首页的css文件*/
/*通用样式区域*/
body {
margin: 0;
background-color: rgb(239, 239, 239);
}
a {
text-decoration: none;
color: darkgray;
}
a:hover {
color: #eeeeee;
}
ul {
list-style-type: none;
padding-left: 0;
}
/*左侧样式区域*/
.blog-left {
background-color: rgb(78, 78, 78);
float: left;
position: fixed;
width: 20%;
height: 100%;
left: 0;
top: 0;
}
.blog-avatar {
width: 150px;
height: 150px;
border: 5px solid white;
overflow: hidden;
border-radius: 50%;
margin: 15px auto;
}
.blog-avatar img {
max-width: 100%;
}
.blog-title {
color: darkgray;
text-align: center;
margin: 20px;
padding-bottom: 5px;
}
.blog-desc {
color: darkgray;
text-align: center;
margin: 30px;
border-bottom: 1px solid pink;
}
.blog-link, .blog-item {
text-align: center;
margin: 100px 0;
font-size: 28px;
}
.blog-title span,
/*右侧样式区域*/
.blog-right {
float: right;
width: 80%;
}
.article-list {
margin: 20px 40px 20px 10px;
background-color: #eeeeee;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 5);
}
.article-st {
font-size: 36px;
font-weight: bolder;
border-left: 10px solid red;
padding-left: 18px;
}
.article-date {
float: right;
margin: 10px 20px;
}
.article-desc {
margin: 10px 0;
font-size: 24px;
text-indent: 24px;
border-bottom: 1px solid black;
padding-bottom: 10px;
}
.article-info {
margin-left: 22px;
font-size: 18px;
padding-bottom: 10px;
}
效果图:
