牛腩新闻发布系统之DIV+CSS前台界面设计

    完成了后台代码设计之后，接下来就要对前台界面进行设计了。牛腩新闻发布系统前台设计采用的是DIV+CSS，短短几集视频收获颇多。

    先回想一下大佬给我们讲的关于UI设计。那堂课真的非常的生动形象。想必大家都记得：

    “一个美观的界面，首先给用户很强的视觉冲击，让用户产生“想要使用”的冲动，只有用户的使用，才有机会体现系统的功能。这也好比，工作面试，只有取得面试通知，才有机会展示才华。接着就是“用户体验”。用户体验好，才有机会被使用，才能达到我们的的目的。让用户体验好，这就是一种“全心全意为人民服务”的境界了，简单的说就是一句话：操作简单。”

    没错，我们做软件就是要本着全心全意为人民服务的精神，提高访问速度、增加用户体验性。要做就做的功能好，界面美观，简单易操作。所以，需要在界面上，突出主题、排版得当。

    在牛腩新闻发布系统视频资料中，老师使用了DIV+CSS进行网页设计。一点点的优化界面，一步步的跟着来，也切身体会了界面优化的过程。下面总结一下前台界面设计中我学到的东西。

【首先要知道什么是DIV+CSS】

DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。（百度百科）

【CSS分析与应用】

CSS特点之一是实现网页内容与样式的分离，其次是CSS选择器优先级：ID选择器>类选择器>HTML选择器，举例说明一下：



也就是说，上图中的ID和Class是有其优先级的。在设置ID和Class内容格式的时候需要特别注意，如果只是设置了ID的格式则class默认继承ID的格式，当让也可以再单独给class设置自己的格式。



CSS的核心内容：标准流、盒子模型、浮动、定位。

先说一下标准流，标准流就是标签的排列方式。（主要是文字排版）

盒子模型：



大家可以根据自己的需要设定不同内外边距，以达到相应效果。具体设置就不说了，视频里面讲的十分详细，每次测量的时候老师都特别的认真谨慎，这种学习态度也是需要我们去学习的。浮动和定位也是十分简便的这里就一笔带过了。

【界面设计】

根据设计文档上需要表现出来的内容进行设计。

主要包括：首页、其他页面以及出错页的制作。

涉及到：盒子模型、添加图形、制作和套用母版页等。

中间过程不再细说，很简单。

【小结】

    在这里面对DIV+CSS只是一知半解。采用DIV+CSS布局可以保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的布局方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。这样的话，可以方便后期的维护管理工作。

    界面设计好了，接下来是对后台代码与前台界面的整合。