工欲善其事必先利其器的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源码。