<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>blog页面实例</title> <link rel="stylesheet" href="blog.css"> </head> <body> <!--左边栏 开始--> <div class="left"> <!--头像 开始--> <div class="header-img"> <img src="touxiang.png" alt=""> </div> <!--头像 结束--> <!--用户名 开始--> <div class="username"> 小强的狗窝 </div> <!--用户名 结束--> <!--个人介绍 开始--> <div class="jieshao"> 这条狗很懒，什么都没有留下 </div> <!--个人介绍结束--> <!--三个链接 开始--> <div class="blog-links"> <ul> <li><a href="">关于我</a></li> <li><a href="">关于你</a></li> <li><a href="">关于他</a></li> </ul> </div> <!--三个链接 结束--> <!--文章分类 开始--> <div class="blog-tags"> <ul> <li><a href="">JS</a></li> <li><a href="">CS</a></li> <li><a href="">Python</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-data">2018-10-23</span> </div> <div class="article-info">在苍茫的的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。。</div> <div class="article-tag"># Python</div> </div> </div> </div> <!--右边栏 结束--> </body> </html>
/* Blog页面相关样式*/ /*公用样式*/ * { font-family: ".PingFang SC", "Microsoft YaHei"; font-size: 14px; margin: 0; padding: 0; } /*去掉a标签的下划线*/ a { text-decoration: none; } /*左边栏 样式*/ .left { width: 20%; background-color: rgb(76,77,76); height: 100%; position: fixed; left: 0; top: 0; } /*头像样式*/ .header-img { height: 128px; width: 128px; border: 5px solid white; border-radius: 50%; overflow: hidden; margin: 0 auto; margin-top: 20px; } .header-img>img { max-width: 100%; } /*Blog 名称*/ .blog-name { color: white; font-size: 24px; font-weight: bold; text-align: center; margin-top: 15px; } /*Blog介绍*/ .blog-info { color: white; text-align: center; border: 2px solid white; margin: 5px 15px; } /*连接组和标签组*/ .blog-links, .blog-tags { text-align: center; margin-top: 20px; } .blog-links a, .blog-tags a { color: #eee; } .blog-tags a:before { content: "#"; } /*右边栏 样式*/ .right { width: 80%; background-color: rgb(238,237,237); height: 1000px; float: right; } .article-list { margin-left: 30px; margin-top: 30px; margin-right: 10%; } .article { background-color: white; margin-bottom: 15px; } .article-name { display: inline-block; } .article-title { padding: 15px; border-left: 3px solid red; } .article-info { padding: 15px; } .article-tag { padding: 15px 0; margin: 15px; border-top: 1px solid #eeeeee; } /*文章发布时间*/ .article-date { float: right; }