博客页面练习代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>博客园</title> <link rel="stylesheet" href="练习.css"> </head> <body> <!--左边栏开始--> <div class="left"> <!--头像开始--> <div class="head-imag"> <img src="https://i.meizitu.net/2019/04/26b01.jpg" alt=""> </div> <!--头像结束--> <div class="blog-name">孤独一生</div> <div class="blog-info">但叫方寸无诸恶,虎狼丛中也立身</div> <!--接下来是一组连接，本应该是url但是这里还是放在div里面--> <div class="blog-links"> <ur> <li type="none"><a href="">自我简介</a></li> <li type="none"><a href="">微博</a></li> <li type="none"><a href="">微信</a></li> </ur> </div> <!--注意，如果不加type="none"，那么最终在浏览器上显示有黑点--> <!--文章内容区开始--> <div class="blog-tags"> <ur> <li type="none"><a href="">CSS</a></li> <li type="none"><a href="">JS</a></li> <li type="none"><a href="">HTML</a></li> </ur> </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">2018-04-29</span> </div> <div class="article-content"> 半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。 </div> <div class="article-tags"> #JS #CSS </div> </div> </div> <div class="article-list"> <!--里面就是众多文章--> <div class="article"> <div class="article-title"> <h1 class="article-name">海燕</h1> <span class="article-date">2018-04-29</span> </div> <div class="article-content"> 半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。 </div> <div class="article-tags"> #JS #CSS </div> </div> </div> <div class="article-list"> <!--里面就是众多文章--> <div class="article"> <div class="article-title"> <h1 class="article-name">海燕</h1> <span class="article-date">2018-04-29</span> </div> <div class="article-content"> 半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。 </div> <div class="article-tags"> #JS #CSS </div> </div> </div> <div class="article-list"> <!--里面就是众多文章--> <div class="article"> <div class="article-title"> <h1 class="article-name">海燕</h1> <span class="article-date">2018-04-29</span> </div> <div class="article-content"> 半亩方塘一鉴开，天光云影共徘徊。问渠那得清如许？为有源头活水来。 </div> <div class="article-tags"> #JS #CSS </div> </div> </div> </div> <!--右边栏结束--> </body> </html>
CSS
/*blog页面相关的*/ /*共用样式*/ *{ font-family: "微软雅黑","Microsoft YaHei UI"; font-size: 14px; margin: 0; padding: 0; } /*去掉a标签的下划线*/ a{ text-decoration: none; } li{ margin-bottom: 4px;/*将li标签中的文字间距调整为4像素*/ } /*左边栏开始*/ .left{ width: 20%; background-color: rgb(76,77,76); height: 100%; left: 0; top: 0; position: fixed;/*这里能够实现左边鼠标滑动，右边不动的状态*/ } /*头像样式*/ .head-imag{ height:120px; width: 120px; border:2px solid white; overflow: hidden; border-radius: 100%; margin: 0 auto;/*居中*/ margin-top: 20px; /*向下移动20像素*/ } .head-imag>img{ max-width: 100%; } /*blog名称*/ .blog-name{ font-size: 24px; color: white; font-weight: bold; /*加粗*/ text-align: center; /*居中*/ margin-top: 15px; /*向下移动15像素*/ } /*blog的信息*/ .blog-info{ font-size: 18px; color: white; font-weight: bold; /*加粗*/ text-align: center; /*居中*/ border: 2px solid white; /*加上边框*/ margin: 20px 15px; /*边框上下5像素，左右15像素*/ } /*链接组和分类组*/ .blog-links, .blog-tags { text-align: center; /*居中*/ margin-top: 15px; /*向下移动15像素*/ } .blog-links a, .blog-tags a{ color: white; } /*在所有的标签内容前面加上"#"这里需要用到伪元素*/ .blog-tags a:before{ content: "#"; } /*右边栏开始*/ .right{ width: 80%; background-color: rgb(238,237,237); height: 1000px; float: right; } .article-list{ margin-left: 30px; margin-right: 15px; margin-top: 10px; } .article{ background-color: white; } .article-title{ border-left: 2px solid yellow; padding: 15px; } .article-name{ display: inline-block;/*如果这里还是继续使用float的话，那么就无法撑开白色的区域，所以这里使用display*/ } .article-date{ float: right; } .article-content{ padding: 15px; } .article-tags{ padding: 15px; font-weight: bold; border-top: 1px solid blue; margin: 15px;
实现效果
https://dummyimage.com/
这个网站可以对纯色图片进行编辑设计
