毛哥的快乐生活(13) 实现一个好看的顶部标题栏

周末到了,人未变,景已变。

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

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

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

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

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

电脑上已经安装了最新版的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 src="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 src="bank.png"" alt="山南银行">
        山南银行讯息
    </div>

这时发现头部真的很棒了:
图片描述

`


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页