第一次扁平化博客实战练习

       在通过学习表严肃的的扁平化风格个人博客的课程之后，第一次将很多个属性一起在网页里体现出来，做网页是非常有成就感的一件事，虽然熬了很多夜，做出来的东西还是那么的不近人意，款式结构上，都没有进行一个初始的系统的策划，而是直接上手，当第一次发现bug，到在学长的指导帮助下，解决bug，当解决完问题真的让人感觉很爽。下面是我这次博客练习的个人经验。

（一）.首先表严肃和我们说过，制作网页要先搭一个整体的框架而不是从一个个小细节上扣起，首先要有个整体的感观之后才能进行下一步详细的规划。

（二）第一部分

1.背景

用background：url设置背景图片（注意路径）

用opacity设置透明度

2. 导航栏

①置顶导航栏

   ②侧面导航栏

                              

  

    3.文本与按钮

文本：

按钮:

（三）第二部分

1.对于文本内容先设置text-align：center

其次在设置分割线的时候要注意，用<hr>标签的话款是单一，不灵活，所以如果设置了一个div，设置div的高宽颜色边框，即可实现hr的作用，并且通过margin：0 auto的方式去实现居中。

2.三个菱形是通过三个div实现的，先给三个div一个长宽背景颜色，用border-radius设置边角的弧度，然后用transform：rotate（）设置角度达到旋转的效果。

 3.三栏式布局

先设置三个div再把右边两个div放在一个div里，把中间的设置成自适应（核心：float、display）

（四）第三部分

          

（五）第四部分

页脚