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

2024-08-26 01:48

本文主要是介绍牛腩新闻发布系统之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文件控制,就避免了不同区域或不同页面体现出的效果偏差。这样的话,可以方便后期的维护管理工作。

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



   

这篇关于牛腩新闻发布系统之DIV+CSS前台界面设计的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1107204

相关文章

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

使用Python构建一个Hexo博客发布工具

《使用Python构建一个Hexo博客发布工具》虽然Hexo的命令行工具非常强大,但对于日常的博客撰写和发布过程,我总觉得缺少一个直观的图形界面来简化操作,下面我们就来看看如何使用Python构建一个... 目录引言Hexo博客系统简介设计需求技术选择代码实现主框架界面设计核心功能实现1. 发布文章2. 加

售价599元起! 华为路由器X1/Pro发布 配置与区别一览

《售价599元起!华为路由器X1/Pro发布配置与区别一览》华为路由器X1/Pro发布,有朋友留言问华为路由X1和X1Pro怎么选择,关于这个问题,本期图文将对这二款路由器做了期参数对比,大家看... 华为路由 X1 系列已经正式发布并开启预售,将在 4 月 25 日 10:08 正式开售,两款产品分别为华

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》:本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子:使用 Blob

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法(推荐)二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript