周末到了，人未变，景已变。
从熟悉的肯德基，到不熟悉的咖啡书屋。
毛哥还是第一次来到这样有情调的地方。
但见：灯光昏暗而柔软，桌椅藤蔓环绕般宁静富有诗意，座位间的隔断是一排排的书架，书架上的书籍散发着人文的书香味，老板娘是个美丽而高挑的女子。
毛哥捧着手中淡黄色的咖啡，突然想到猫屎这两个字，心里想着是环境确实不错，口味确实奇怪，还不如喝点大红袍的茶叶…
今天却是毛哥先到了，总不能让妹子老等着咱。
电脑上已经安装了最新版的VSCode，这可是昨天晚上在知乎上研究了一晚得出的结论————VSCode应该是当下最好用的前端编辑器…额，之一了。
书架上竟然有一本《精通CSS》的书籍，可谓十分应景了，随手取过读起。
读了没一会，小范美眉到了，脸色略有些疲倦，哎，工作真是不容易，苍老了多少青春的容颜。
于是，模仿qq邮箱的故事开始了。
整体架构
很明显，可以将网页分为3部分，上部分是标题，左边是导航，右边是内容。
于是，对应代码应该是这样的，为了明显区分各个部分，添加背景色。
<!-- 模仿qq邮箱 -->
<!-- 文件：like-qq-mail.html 作者:samll fan -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<style>
#head {
background-color: red;
}
#left {
background-color: blue;
}
</style>
</head>
<body>
<div id="head">
头部
</div>
<div id="left">
左侧
</div>
<div id="content">
内容
</div>
</body>
</html>
去除边距
查看下效果，发现左侧、上方、右侧有间距，应该是body默认的间距吧，应该讲所有元素（*）的默认内外边距设为0。
代码：
<style>
/* 星号表示全部 */
*{
margin:0;/*外边距为0*/
padding:0;/*内边距为0*/
}
#head {
background-color: red;
}
#left {
background-color: blue;
}
</style>
此时再查看效果，没有边距了：
设定位置
头部只需要设定高度即可，通过观察qq邮箱顶部高度64px。
左侧通过float浮动即可，通过观察左侧导航栏宽度：186px，且高度应该铺满浏览器。
于是代码修改如下：
<style>
/* 星号表示全部 */
*{
margin:0;/*外边距为0*/
padding:0;/*内边距为0*/
}
#head {
background-color: red;
height:64px;
}
#left {
background-color: blue;
width:186px;
float: left;/*靠左浮动*/
height: 100%;/*高度铺满浏览器*/
}
</style>
此时大体界面效果都已经出来了：
细化顶部
接下来对顶部进行细化设计工作。（注意文本任务、公司、事件均属虚构，如有雷同纯属巧合）
添加logo和标题
首先顶部是是一个大logo+一个大标题，代码应如下
<body>
<div id="head">
<img src="" alt="山南银行">
山南银行讯息
</div>
<div id="left">
左侧
</div>
<div id="content">
内容
</div>
</body>
寻找图标
img标签需要一张银行logo，logo怎么找呢，告诉你个好地方，https://www.iconfont.cn/search/index?q=%E9%93%B6%E8%A1%8C，搜索银行，下载一个适合的就OK。
图片及文字居中
通过一个简单的技巧可以让文字居中，就是把容器的height和line-height设置为同样大小，这表示容器高度等于容器内一行内容的高度，这样内容就自然垂直居中了。
而图片需要通过vertical-align: middle;来使其垂直居中，同时图片高度设置为48px（上下各留8px边距）。
<!-- 模仿qq邮箱 -->
<!-- 文件：like-qq-mail.html 作者:samll fan -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<style>
/* 星号表示全部 */
* {
margin: 0;
/*外边距为0*/
padding: 0;
/*内边距为0*/
}
#head {
background-color: red;
height: 64px;
line-height: 64px;/*通过设置line-height等于height实现文字垂直居中*/
}
#head img{
vertical-align: middle;/*图片垂直居中*/
height:48px;
}
#left {
background-color: blue;
width: 186px;
float: left;
/*靠左浮动*/
height: 100%;
/*高度铺满浏览器*/
}
</style>
</head>
<body>
<div id="head">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bank.png"" alt="山南银行">
山南银行讯息
</div>
<div id="left">
左侧
</div>
<div id="content">
内容
</div>
</body>
</html>
看下效果，接近完美啊：
通过取色器获取并设置字体颜色
通过百度下载取色器，例如这个：
然后取色，发现qq邮箱标题颜色值为：#247398，于是修改#head为
#head {
background-color: red;
height: 64px;
line-height: 64px;/*通过设置line-height等于height实现文字垂直居中*/
color:#247398;/*头部文本颜色*/
}
设置顶部背景色渐变效果
原版qq邮箱背景色有白、蓝两色：
咱们设计的不这么复杂，我们用取色器取左边的白色和右边的蓝色，然后做一个渐变：background: linear-gradient(to right, #FFFFFF,#D0E1FF);，这代码表示从左向右渐变，从白色(#FFFFFF)渐变到淡蓝色(#D0E1FF)。
于是顶部整体代码变为
CSS:
#head {
background: linear-gradient(to right, #FFFFFF,#D0E1FF);
height: 64px;
line-height: 64px;/*通过设置line-height等于height实现文字垂直居中*/
color:#247398;/*头部文本颜色*/
}
HTML:
<div id="head">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="bank.png"" alt="山南银行">
山南银行讯息
</div>
这时发现头部真的很棒了：
`
共同学习，写下你的评论
评论加载中...
作者其他优质文章
