周末到了人未变，景已变

从熟悉的肯德基，到不熟悉的咖啡书屋

毛哥还是第一次来到这样有情调的地方。

但见：灯光昏暗而柔软桌椅藤蔓环绕般宁静富有诗意，座位间的隔断是一排排的书架书架上的书籍散发着人文的书香味，老板娘是个美丽而高挑的女子

毛哥捧着手中淡黄色的咖啡，突然想箌猫屎这两个字心里想着是环境确实不错，口味确实奇怪还不如喝点大红袍的茶叶…

今天却是毛哥先到了，总不能让妹子老等着咱

電脑上已经安装了最新版的VSCode，这可是昨天晚上在知乎上研究了一晚得出的结论————VSCode应该是当下最好用的前端编辑器…额之一了。

书架上竟然有一本《精通CSS》的书籍可谓十分应景了，随手取过读起

读了没一会，小范美眉到了脸色略有些疲倦，哎工作真是不容易，苍老了多少青春的容颜

于是，模仿qq邮箱的故事开始了

很明显，可以将网页分为3部分上部分是标题，左边是导航右边是内容。

于昰对应代码应该是这样的，为了明显区分各个部分添加背景色。

查看下效果发现左侧、上方、右侧有间距，应该是body默认的间距吧應该讲所有元素（*）的默认内外边距设为0。

此时再查看效果没有边距了：

头部只需要设定高度即可，通过观察qq邮箱顶部高度64px

左侧通过float浮动即可，通过观察左侧导航栏宽度：186px且高度应该铺满浏览器。

此时大体界面效果都已经出来了：

接下来对顶部进行细化设计工作（紸意文本任务、公司、事件均属虚构，如有雷同纯属巧合）

首先顶部是是一个大logo+一个大标题代码应如下

img标签需要一张银行logo，logo怎么找呢告诉你个好地方，搜索银行，下载一个适合的就OK

通过一个简单的技巧可以让文字居中，就是把容器的height和line-height设置为同样大小这表示容器高度等于容器内一行内容的高度，这样内容就自然垂直居中了

而图片需要通过vertical-align: middle;来使其垂直居中，同时图片高度设置为48px（上下各留8px边距）

看下效果，接近完美啊：

通过取色器获取并设置字体颜色

通过百度下载取色器例如这个：

然后取色，发现qq邮箱标题颜色值为：#247398于是修改#head为

设置顶部背景色渐变效果

原版qq邮箱背景色有白、蓝两色：

这时发现头部真的很棒了：