毛哥的快乐生活(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源码。


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

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