HTML骨架的搭建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客园</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="blog.css"> </head> <body> <div class="blog-left"> <div class="blog-avatar"> <img src="111.jpg" alt=""> </div> <div class="blog-title"> <p>老司机的博客</p> </div> <div class="blog-info"> <p>该老司机车速太快，什么都没有留下!</p> </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-tag"> <ul> <li><a href="">#Python</a></li> <li><a href="">#Java</a></li> <li><a href="">#Golang</a></li> </ul> </div> </div> <div class="blog-right"> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> <div class="article"> <div class="article-title"> <span class="title">论开车的重要性</span> <span class="date">2020/5/14</span> </div> <div class="article-body"> <p>jason老师从来不开车,非常正儿八经的!</p> </div> <hr> <div class="article-bottom"> <span>#Python </span> <span>#JavaScript</span> </div> </div> </div> </body> </html>
css样式的调整
/*这是博客园首页的样式文件*/ /*通用样式*/ body { margin: 0; background-color: #eeeeee; } a { text-decoration: none; } ul { list-style-type: none; padding-left: 0; } /*左侧样式*/ .blog-left { float: left; width: 20%; height: 100%; position: fixed; background-color: #4e4e4e; } .blog-avatar { height: 200px; width: 200px; border-radius: 50%; border: 5px solid white; margin: 20px auto; overflow: hidden; } .blog-avatar img { max-width: 100%; } .blog-title,.blog-info { color: darkgray; font-size: 18px; text-align: center; } .blog-link,.blog-tag { font-size: 24px; } .blog-link a,.blog-tag a { color: darkgray; } .blog-link a:hover,.blog-tag a:hover { color: white; } .blog-link ul,.blog-tag ul { text-align: center; margin-top: 100px; } /*右侧样式*/ .blog-right { float: right; width: 80%; height: 1000px; } .article { background-color: white; margin: 20px 40px 10px 10px; box-shadow: 5px 5px 5px rgba(0,0,0,0.5); } .title { font-size: 36px; } .date { float: right; margin: 20px 20px; font-weight: bolder; } .article-title { border-left: 8px solid red; text-indent: 16px; } .article-body { font-size: 18px; text-indent: 30px; /*border-bottom: 1px solid black;*/ } .article-bottom { padding-left: 30px; padding-bottom: 10px; }