博客页面
作者:互联网
<!DOCTYPE html> <html lang="zn-CN" > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="index.css"> </head> <body> <!--左侧大边框--> <div class="left"> <div class="headimg"> <img src="5722fa4d877b4.jpg" alt=""> </div> <!-- blog作者--> <div class="blog_name"> <p>哪吒的blog</p> </div> <!-- blog 的说明--> <div class="info"> <p>这个人很累。什么都没有留下</p> </div> <!-- 链接区--> <div class="list"> <ul> <li><a href="">关于我</a></li> <li><a href="">微信</a></li> <li><a href="">公众号</a></li> </ul> </div> <div class="xinxi"> <ul> <li><a href="">python</a></li> <li><a href="">css</a></li> <li><a href="">mysql</a></li> </ul> </div> </div> <!--右侧大边框--> <div class="right"> <div class="artile-list"> <!-- 一个博客--> <div class="artile"> <div class="title"> <h1 class="title-name">海燕</h1> <span class="time">2018-2-28</span> </div> <div class="neirong"> <p>在苍茫的大海上,狂风卷这乌云,在大海与乌云之间只海燕</p> </div> <div class="biaoqian"> <p>#css #html</p> </div> </div> <div class="artile"> <div class="title"> <h1 class="title-name">海燕</h1> <span class="time">2018-2-28</span> </div> <div class="neirong"> <p>在苍茫的大海上,狂风卷这乌云,在大海与乌云之间只海燕</p> </div> <div class="biaoqian"> <p>#css #html</p> </div> </div> <div class="artile"> <div class="title"> <h1 class="title-name">海燕</h1> <span class="time">2018-2-28</span> </div> <div class="neirong"> <p>在苍茫的大海上,狂风卷这乌云,在大海与乌云之间只海燕</p> </div> <div class="biaoqian"> <p>#css #html</p> </div> </div> </div> </div> </body> </html>
* { margin: 0; padding: 0; } /*左边框样式*/ .left { width: 20%; height: 100%; background-color: dimgray; position: fixed; left: 0; top: 0; } /*头像样式*/ .headimg { width: 128px; height: 128px; border: 5px solid white; border-radius: 50%; overflow: hidden; margin: auto; margin-top: 20px ; } .img { max-width: 100%; } .blog_name { color: white; font-size: 24px; font-weight: bold; text-align: center; margin-top: 15px; } /*blog介绍*/ .info { color: white; font-size: 17px; font-weight: bold; text-align: center; margin-top: 20px; } a { text-decoration: none; } .list, .xinxi { text-align: center; margin-top: 20px; } .list a, .xinxi a { color: white; } .xinxi a:before { content: "#"; } /*右边边框样式*/ .right { width: 80%; height: 1000px; float: right; background-color: rgb(238,237,237) ; } .artile { background-color: white; } .artile-list { margin-right: 10%; margin-left: 15px; margin-top: 10px; } /*文章时间*/ .title-name { display: inline-block; padding: 15px; border-left: 2px solid red; } .time { float: right; padding: 15px; } .neirong { padding: 15px; } .biaoqian { padding: 15px 0; margin: 15px; border-top: 1px solid gray; }
标签:color,top,博客,海燕,15px,margin,white,页面 来源: https://www.cnblogs.com/huxl1/p/12731512.html