毛哥的快乐生活(14) 界面全面升级赢得广泛赞誉

接上文,已经实现了整体界面布局,顶部标题栏也已经有模有样了:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nockiWG2-1570538329922)(//img.mukewang.com/5c5b7e320001ae6306800226.png)]

接下来实现左侧导航栏,和右边的内容区域。

左侧导航栏实现

放入菜单

首先将之前导航菜单放入左侧区域,一般导航菜单用列表<ul>实现,如下:

<body>
    <div id="head">
        <img src="bank.png"" alt="山南银行">
        山南银行讯息
    </div>
    <div id="left">
        <ul>
            <li>全体通知</li>
            <li>公司业务</li>
            <li>个人业务</li>
            <li>文体活动</li>
        </ul>
    </div>
    <div id="content">
        内容
    </div>
</body>

效果如下:
图片描述

调整背景色和边框

观察qq邮箱左侧导航栏的样式,背景色应该是很淡的蓝色,然后边框为有一定宽度的蓝色边框,而且是圆角边框。
图片描述

于是添加样式:

	  #left {
            width: 186px;
            float: left;  /*靠左浮动*/
            height: 100%; /*高度铺满浏览器*/
            border:4px solid #89B5E9;/*边框,颜色是取色器取得哦*/
            background-color: #EAF0F6;/*背景,颜色是取色器取得哦*/
            border-radius: 12px;/*圆角边框*/
        }

左侧变为:
图片描述

调整内边距和字体

已经有点那个样子了,还需要调整菜单文字和边框的边距,然后改下字体样式。代码如下:

	#left {
            width: 186px;
            float: left;  /*靠左浮动*/
            height: 100%; /*高度铺满浏览器*/
            border:4px solid #89B5E9;/*边框,颜色是取色器取得哦*/
            background-color: #EAF0F6;/*背景,颜色是取色器取得哦*/
            border-radius: 12px;/*圆角边框*/
            padding-left:8px;/*设置左侧内边距*/
            color:#247398;/*字体颜色*/
            font-size: 1.3em;/*字体大小*/
            font-family:"STKaiti";/*百度找了一种楷体*/
        }

此时再看样式:
图片描述

调整列表项的间距

需要给列表每一项添加一些上外边距,这样菜单就蓬松而好看。

代码:

		 #left ul li/*设置列表项样式*/
        {
            margin-top:12px;/*列表项的上边距*/
        }

效果:
图片描述

内容区域实现

现在这个内容区域好像并不适合放一条一条的通知啊,没事,咱们对页面整体风格已经有了初步的把握,先把你的通知内容放进来看看。

<div id="content">
        <table border="1">
            <tr>
                <td>通知时间</td>
                <td>通知内容</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理13号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班2小时,整理14号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理133号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理1322号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理1333号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理143号街道公司信息</td>
            </tr>
        </table>
    </div>

界面:
图片描述

该如何调整呢,首先应该让表格与左侧上侧有边距,然后去掉表格边框,还要增加每一行的高度:
html:

	<div id="content">
        <table>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理13号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班2小时,整理14号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理133号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理1322号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理1333号街道公司信息</td>
            </tr>
            <tr>
                <td>2018-06-26 10:00</td>
                <td>今天加班1小时,整理143号街道公司信息</td>
            </tr>
        </table>
    </div>

css:

		#content table{
            margin-top:24px;
            margin-left:224px;/*注意此处因为左侧浮动,设置的是到窗口左边沿的宽度*/
        }

        #content table tr{
            height:48px;
        }

看下效果:
图片描述

升级版界面发布

于是乎,带着小范给的源码,又经过一晚上的挣扎,毛哥改出了新版的通知网站,阿不,应该叫“山南银行讯息网”了。

一看墙上的钟摆,已经是凌晨1点了,秒针滴答滴,想着周一上班惊掉大牙的同事,毛哥很期待。

在梦中,成功的作品,赢得广泛赞誉,毛哥,一颗冉冉升起的科技明星,厉害炸了这次,真的。

Github


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

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