<!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; }
