@ 2020.5.14
如何快速搭建一个博客园风格的界面？只需两个文件，很多行代码就可搞定噢
下面带你一起来山寨DIY吧
1、思路
html
1、新建html 文件，用注释标注代码块
2、先用 div 划定区域——左栏 右栏
3、使用html 占位，再调节样式
为标签添加 id / class 属性
CSS
1、新建CSS文件，使用注释标注区域
2、先写万金油
3、按照html 的划分，逐一添加样式（选择器的使用，从基础选择器到复杂选择器）
4、调试运行，修改样式
2、实现效果
3、具体代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>welcomeTo大诚小铺</title> <link rel="stylesheet" href="博客园样式.css"> </head> <body> <!-- 先用div划分布局 --> <!-- 左侧栏 --> <div class="blog-left"> <!-- 头像 --> <div class="blog-image"> <img src="鸢尾花.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="https://mp.weixin.qq.com/s/5-VfKF9jlrMIN2NvTOxO7A" title="欢迎光临小铺">大诚小铺</a></li> <li><a href="https://www.cnblogs.com/bigorangecc/" title="一枚假理工女写的博客">博客·园</a></li> <li><a href="https://member.bilibili.com/v2?timestamp=1584441340153#/upload-manager/audios" title="别听我瞎逼逼">B站在此</a></li> </ul> </div> <div class="blog-tag"> <ul> <li>爱沾花惹草的文艺女汉子</li> <li>琴棋书画都不精通</li> <li>想搞开发的假理工女</li> <li>头发茂密数学不好</li> </ul> </div> </div> <!-- 右侧主要内容栏 --> <div class="blog-right"> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/9PkCZtjt4El5Hsk85zUAEw"> 旧的童年</a></span> <span class="date">2020-3-4</span> </div> <div class="article-body"> <p>曾经热闹一时的果园小屋，如今成为了野草挡风的屏障。</p> </div> <hr> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 铲屎官]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/2sJQIHEMhLaLWf41IBOh1A"> 星空</a></span> <span class="date">2020-2-26</span> </div> <div class="article-body"> <p>星空之下，仰望繁星的我们，仍是孤独的</p> </div> <hr> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/2oxSm-3WDwFVXEaKeZSx6Q"> 春天里的人间烟火</a></span> <span class="date">2020-2-15</span> </div> <hr> <div class="article-body"> <p>这是春暖花开的人间烟火</p> </div> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p> </div> </div> <div class="article"> <div class="article-title"> <span class="title"><a href="https://mp.weixin.qq.com/s/ndJqAcrtprDzDNYeCLs6zQ"> 立春一日</a></span> <span class="date">2020-3-4</span> </div> <div class="article-body"> <p>旧物焕新芽，百花待争艳</p> </div> <hr> <div class="article-bottom"> <p>[大诚的解忧杂货铺·原创 @作者 锦蝶生]</p> </div> </div> </div> </body> </html>