牛腩新闻发布系统之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

相关文章

新特性抢先看! Ubuntu 25.04 Beta 发布:Linux 6.14 内核

《新特性抢先看!Ubuntu25.04Beta发布:Linux6.14内核》Canonical公司近日发布了Ubuntu25.04Beta版,这一版本被赋予了一个活泼的代号——“Plu... Canonical 昨日(3 月 27 日)放出了 Beta 版 Ubuntu 25.04 系统镜像,代号“Pluc

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Linux系统之主机网络配置方式

《Linux系统之主机网络配置方式》:本文主要介绍Linux系统之主机网络配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、查看主机的网络参数1、查看主机名2、查看IP地址3、查看网关4、查看DNS二、配置网卡1、修改网卡配置文件2、nmcli工具【通用

Linux系统之dns域名解析全过程

《Linux系统之dns域名解析全过程》:本文主要介绍Linux系统之dns域名解析全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、dns域名解析介绍1、DNS核心概念1.1 区域 zone1.2 记录 record二、DNS服务的配置1、正向解析的配置

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

Linux系统中配置静态IP地址的详细步骤

《Linux系统中配置静态IP地址的详细步骤》本文详细介绍了在Linux系统中配置静态IP地址的五个步骤,包括打开终端、编辑网络配置文件、配置IP地址、保存并重启网络服务,这对于系统管理员和新手都极具... 目录步骤一:打开终端步骤二:编辑网络配置文件步骤三:配置静态IP地址步骤四:保存并关闭文件步骤五:重

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...