<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>blog-test</title>
<link rel="stylesheet" href="blog-test.css">
</head>
<body>
<!--左边栏开始-->
<div class="left">
<!--头像开始-->
<div class="header-img">
<img src="4.jpg" alt="">
</div>
<!--头像结束-->
<!--微博名开始-->
<div class="blog-name">PSDF的微博</div>
<!--微博名结束-->
<!--微博信息开始-->
<div class="blog-info">这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下这个人很懒，什么都没有留下</div>
<!--微博信息结束-->
<!--链接区开始-->
<div class="blog-links">
<ul type="none"> <!--取消列表前面的圆点-->
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">公众号</a></li>
</ul>
</div>
<!--链接区结束-->
<!--分类区开始-->
<div class="blog-tags">
<ul type="none">
<li><a href="">JS</a></li>
<li><a href="">CSS</a></li>
<li><a href="">HTML</a></li>
</ul>
</div>
<!--分类区结束-->
</div>
<!--左边栏结束-->
<!--右边栏开始-->
<div class="right">
<!--文章列表开始-->
<div class="article-list">
<!--文章开始,几篇文章都一样，复制就行-->
<div class="article">
<!--文章标题开始-->
<div class="article-title">
<h1 class="article-name">海燕</h1>
<span class="article-date">2020-2-29</span>
</div>
<!--文章标题结束-->
<!--文章内容开始-->
<div class="article-info">在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div>
<!--文章内容结束-->
<!--文章标签开始-->
<div class="article-tag">#HTML #CSS</div>
<!--文章标签结束-->
</div>
<!--文章结束-->
</div>
<!--文章列表结束-->
</div>
<!--右边栏开始-->
</body>
</html>
--------------------------------------------------------------------------
/*公用样式*/
*{
font-family:".PingFang SC","Microsoft YaHei";
font-size:14px;
margin:0;
padding:0;
}
/*左边栏开始*/
/*左边栏背景*/
.left{
width:20%;
height:100%;
background:rgb(78,78,78);
position:fixed;/*左边栏固定*/
left:0;
top:0;
}
/*头像*/
.header-img{
width:128px;
height:98px;
border:1px green solid;
border-radius:100%;/*圆框*/
overflow:hidden;/*图片溢出边框，要隐藏*/
margin:0 auto;/*外边框居中*/
margin-top:15px;
}
/*头像图片*/
.header-img img{
max-width:100%;/*图片100%嵌套在父标签的边框里面*/
}
/*微博名*/
.blog-name{
font-size:28px;
text-align:center;/*文本居中*/
color:white;
margin-top:30px;
}
/*微博信息*/
.blog-info{
width:200px;
height:100px;
margin:0 auto;
margin-top:30px;
border:3px green solid;
text-align:center;
color:white;
overflow:auto;/*文本溢出边框，边框右边生成滚动条*/
}
/*链接区和分类区 分在一组，设置相同的样式*/
.blog-links a,
.blog-tags a
{
color:white;
text-decoration:none;/*去掉a标签的文本下划线*/
}
.blog-links,
.blog-tags
{
text-align:center;
margin-top:50px;
}
/*列表与列表之间间隔10px*/
.blog-links li,
.blog-tags li
{
margin-top:10px;
}
.blog-tags a:before/*内容前面加#，注意伪元素是用冒号:*/
{
content:"#"
}
/*左边栏结束*/
/*右边栏开始*/
.right{
width:80%;
height:1500px;
background-color:rgb(238,238,238);
float:right;/*右边栏需要向右浮动*/
}
/*文章开始*/
/*文章列表*/
.article-list{
margin:30px 10%;/*上下外边框30px，左右外边框占右边栏的10%*/
}
/*文章*/
.article{
height:200px;
background-color:white;
margin-top:30px;
}
/*文章标题*/
.article-title{
padding:15px;
border-left:3px red solid;
}
/*文章名字*/
.article-name{
font-size:30px;
display:inline;/*h1变为行内元素，日期才能在同一行向右浮动*/
}
/*文章日期*/
.article-date{
float:right;/*日期向右浮动*/
}
/*文章内容*/
.article-info{
padding:15px;
}
/*文章标签*/
.article-tag{
margin-top:15px;
padding:15px;
border-top:1px #eeeeee solid;
}
![]()
浙公网安备 33010602011771号