任务七：实现常见的技术产品官网的页面架构及样式布局
任务目的
- 通过实现一个常见的技术产品官网，加深对于HTML，CSS的实战能力
- 学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变
任务描述
- 通过HTML及CSS实现设计稿 设计稿PSD文件（点击下载），效果如 效果图（点击打开）
- 设计稿是有一定宽度的，这个宽度为页面的最小宽度，也就是说，当浏览器窗口宽度小于设计稿宽度时，允许出现横向滚动条，页面内容宽度保持不变，但是当浏览器窗口宽度大于设计稿宽度时，页面部分内容的宽度应该保持和浏览器窗口宽度一致，具体哪些部分题目不做具体指明，看看大家的判断如何。
详细任务要求请点击百度前端查看
感想
任务七又是一个进阶点，这里给到的资料只有一个psd档的设计图，需要自己去切图，去看相关的距离大小，而且整个排版的复杂程度对于前面阶段来说是一个阶梯的提高，对于一路学习下来来说，做到这里是第一个难度关卡，自己做的时候也是频频出现问题，有时候甚至会出现一些排版在做CSS效果的时候，因为浮动的关系，需要重新的去排版先后，这些呢，其实都是一些经验的问题，做多了也就会有相关意识的了
然后就是还有一个Bootstrap的排版，是因为刚好写完了HTML的排版没几天，我自学了一下Bootstrap的教程，其实也没有太深入的去学习，就看了一套完整的教学视频，然后觉得想要找练习来练练手，所以就做多了一个Bootstrap的样式排版，做的比较勉强，也不知道运用得对不对，不过也算马马虎虎的做了出来，期间发现的是，Bootstrap运用的生疏，然后还有发现的就是= =、并不是全部设计都是适合用Bootstrap的，这个需要设计好，不然有的样式运用Bootstrap起来，真的是怪怪的。
还有就是对于一些浏览器的兼容，我只是对着chrome和360浏览器做的，没做其他兼容，所以其他浏览器看可能会有问题，特别是IE= =、
下面是练习的演示和代码
HTML排版
Demo：
百度前端任务七（html）
Bootstrap排版
Demo：
百度前端任务七（Bootstrap）