毛哥的快乐生活(26) Servlet版新闻网站之前端样式编码-原创手记-慕课网

工欲善其事必先利其器的VSCode

毛哥的原型图都已经画好了，第二天火急火燎的找到小范妹子，想再次目睹范妹子前端设计的风采。

这次毛哥好好瞄了一眼范妹子编码环境，果然是传说中的VSCode，写前端代码相当犀利效果那是顶呱呱。心里好一阵盘算回去自己也要入手最新的VScode用一用，作为一个专业程序猿写前端用Eclipse那也确实比较低端。

设计并实现新闻分类浏览页面

拿出毛哥设计的效果图，小范妹子开始一步步编写前端代码，注意每次新改动的样式部分都添加了注释！

图片描述

1，新建一个view.html，内容如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新闻浏览页面</title>
    <head>
    <body>
    </body>
</html>

2，添加顶部标题栏，中间内容栏，且两栏居中

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新闻浏览页面</title>
    <style>
        /*文字居中*/
        body {
            text-align: center;
        }
        /*标题栏设置一个宽度，避免横向占满屏幕
          此时margin:0 auto;表示上下没有外边距，左右外边距自动相等，所以整个title-bar就居中了*/
        #title-bar {
            width: 600px;
            margin: 0 auto;
        }
        #content-bar {
            width: 800px;
            margin: 0 auto;
        }
    </style>
    <head>
    <body>
        <div id="title-bar">
            顶部标题栏
        </div>
        <div id="content-bar">
            内容区域
        </div>
    </body>
</html>

3，为导航栏添加边框，同时设置导航栏每个菜单之间的间隔

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新闻浏览页面</title>
    <style>
        body {
            text-align: center;
        }
        #title-bar {
            width: 600px;
            margin: 0 auto;
            border: 1px solid black;/*添加标题栏边框*/
        }
        /*此处表示设置title-bar内部的span标签样式*/
        #title-bar span{
            margin-right:24px;/*每个菜单的右边距，避免菜单挤在一起难看*/
        }
        #content-bar {
            width: 800px;
            margin: 0 auto;
        }
    </style>
    <head>
    <body>
        <div id="title-bar">
            <span>公司业务</span>
            <span>个人业务</span>
            <span>银行卡业务</span>
            <span>活动通知</span>
        </div>
        <div id="content-bar">
            内容区域
        </div>
    </body>
</html>

此时效果如下：
图片描述

4，设置标题栏高度

修改部分样式：

      #title-bar {
            width: 600px;
            margin: 0 auto;
            border: 1px solid black;
            height:64px;/*标题栏需要稍微高点*/
            line-height: 64px;/*通过设置标题栏每行文字占用高度等于标题栏高度，让标题栏文字垂直居中显示*/
        }

此时效果如下：
图片描述

5，对标题栏进行部分微调

此时标题栏总体样式还算比较符合设计，需要再调整一部分，调整后整体代码如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新闻浏览页面</title>
    <style>
        body {
            text-align: center;
        }
        #title-bar {
            width: 600px;
            margin: 0 auto;
            border: 1px solid black;
            height:64px;
            line-height: 64px;
            border-radius: 16px;/*为标题栏边框添加圆角，使界面更活泼*/
            font-size:1.4em;/*增大标题栏字体，让标题栏更突出*/
        }
        #title-bar span{
            margin-right:24px;
        }
        #content-bar {
            width: 800px;
            margin: 0 auto;
        }
    </style>
    <head>
    <body>
        <div id="title-bar">
            <span>公司业务</span>
            <span>个人业务</span>
            <span>银行卡业务</span>
            <span>活动通知</span>
        </div>
        <div id="content-bar">
            内容区域
        </div>
    </body>
</html>

效果如下：
图片描述

6，设置内容区域及最小高度

注意内容区域有可能因为内容很多，占用高度可能编号，所以设置一个最小高度即可。

 #content-bar {
            width: 800px;
            margin: 0 auto;
            min-height: 600px;/*内容区域最小高度*/
            border: 1px solid black;/*内容区域边框*/
            border-radius: 16px;/*内容区域边框圆角*/
        }

此时效果如下：

图片描述

7，让内容区域顶部和标题栏分离

目前内容区域顶部和标题栏紧挨着，不好看，稍微改下：

#content-bar {
            width: 800px;
            margin: 24 auto;/*上下外边距改大*/
            min-height: 600px;
            border: 1px solid black;
            border-radius: 16px;
        }

8，设置内容区域新闻条目样式

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新闻浏览页面</title>
    <style>
        body {
            text-align: center;
        }
        #title-bar {
            width: 600px;
            margin: 0 auto;
            border: 1px solid black;
            height:64px;
            line-height: 64px;
            border-radius: 16px;
            font-size:1.4em;
        }
        #title-bar span{
            margin-right:24px;
        }
        #content-bar {
            width: 800px;
            margin: 24 auto;/*上下外边距改大*/
            min-height: 600px;
            border: 1px solid black;
            border-radius: 16px;
        }
    </style>
    <head>
    <body>
        <div id="title-bar">
            <span>公司业务</span>
            <span>个人业务</span>
            <span>银行卡业务</span>
            <span>活动通知</span>
        </div>
        <div id="content-bar">
            <ul>
                <li>2019-04-08 【公司业务】 今天加班</li>
                <li>2019-04-09 【公司业务】 今天加班</li>
            </ul>
        </div>
    </body>
</html>

效果：
图片描述

9，让新闻条目靠左显示

 #content-bar ul li{
            text-align: left;
        }

最终效果：

图片描述

OK，至此新闻分类浏览页面前端代码一步一步写出来了，后面的登录和新闻发布页面编写流程也不外如此。

毛哥也来试一试

剩下的工作小范妹子交给了毛哥去做，毛哥感觉简直就是小小菜一碟碟啊，no problem啊。

确实毛哥是个前端天才，迅速就把剩下的登录页、新闻发布页前端代码写好了。效果如下：

图片描述

代码详见：

Github chapter26源码。