公用样式模板的设计制作(5)
作者:rukey67 来源:UED163 发布时间:2009-09-13 21:27:00
3. 设计风格统一,保持一致性
设计师主导着网页的视觉风格,他们充分发挥聪明才智使用户界面好用又好看。但任何创造性的工作,也都需要遵循一定的范式。书法家泼墨挥毫笔走龙蛇,看似漫不经心,实则章法井然法度森然,钤印题款都有讲究;音乐家作曲,灵感喷涌如滔滔江水绵绵不绝,音符的组织却必须符合韵律节拍;诗人情感迸发,花间一壶酒,笔下三千言,但好的诗作往往也需要讲求平仄格律。设计师在设计模板样式的时候,也要有一定规范。对于字体、字号,常用颜色,以及模块的边框、间距等,要有整体规划,保持一致性,同一元素在不同页面的风格保持统一。只有这样,负责代码编写的重构人员才能对元素样式进行抽象化,提炼出可以重用的部分编写高效代码。这些规范一定是设计师与重构开发人员在长期的交流探讨中逐步完善的,有一定跨专业的知识对于两者的合作将大有益处——请永远记住,你不是一个人在战斗。
4. 合理拆分样式,巧妙组合运用
网页模板的设计风格确定了,剩下就要靠页面工程师来把设计图稿实现成精良的网页了。考量网页重构品质的各项指标之中,包括浏览器兼容性、代码的易扩展和可重用性。要做好这些,必须对抽象出来的页面元素样式进行合理拆分,区分哪些样式可以作为全局公用,哪些需局部定义,并运用样式的继承覆盖原则进行优化。
(1). 样式拆分组合的理论依据
class=“cRed textLeft ”
class属性可以赋值为多个类选择器名称,中间用空格分隔,这多个类定义的样式可以同时作用于标签元素。依据这一特性,可以在CSS里定义时对样式进行拆分打散,在(X)HTML里调用样式类时再将其组合使用。例如,有些常用的字号和颜色可以单独进行全局定义,在具体模块的类“newsList”中定义其他除字体和颜色之外的样式属性,用class调用样式的时候再组合多个选择器进行赋值 class=“newsList f14px cRed”。这样,颜色和字号属性在全局范围内就可以多次使用,提高了样式的复用率,松散耦合的样式也更利于扩展。而且,同一属性进行最少次数的定义,一定程度也优化了CSS性能。
样式的继承覆盖原则,选择器优先级算法
在对样式进行全局公用或局部特殊定义时,考虑最多的是样式的继承覆盖原则。对于最普遍的样式进行全局定义,在需要个性化定义的地方再对全局样式进行覆盖,可以很大地提高CSS效率。这正是辩证唯物主义关于矛盾普遍性和特殊性关系的典型实践。例如,为改善CSS的浏览器兼容性而定义的reset文件作为全局样式,将元素在各个浏览器中表现不同的默认样式进行了初始化,在页面的具体模块中需要个性定制元素样式的地方再对初始化的样式进行覆盖。要有效地利用继承和覆盖原则,关于选择器优先级的算法必须熟练掌握。id选择器、类选择器、标签选择器以及行内样式的优先级权重是不一样的,特别是这些选择器进行组合运用的时候。
本文从公用样式模板的设计制作为例,详解了一个项目从实际需求到技术要求的分析过程,以需求为主导,不放弃专业追求的理念贯彻其中,未涉及具体的技术实现细节,旨在提供一种思考问题的思路,希望能给大家提供借鉴。
附录:
猜你喜欢
- 在数据库中,UNION和UNION ALL关键字都是将两个结果集合并为一个,但这两者从使用和效率上来说都有所不同。MySQL中的UNIONU
- 删除Git缓存的用户名和密码昨天在上传代码的时候提示输入用户名密码,结果输错了3次就没有提示框了,就一直报错(身份验证失败),没办法提交代。
- 本文实例讲述了Python实现列表删除重复元素的三种常用方法。分享给大家供大家参考,具体如下:给定一个列表,要求删除列表中重复元素。list
- 一、前期准备(windows7+mysql-8.0.18-winx64)1.下载地址:https://dev.mysql.com/downl
- class SLTimer(multiprocessing.Process): #from dateti
- 下面来先看一个简单例子<!DOCTYPE html><html lang="zh-CN" ng-app
- 单分支结构:if 语句Python 中 if 语句的语法格式如下:if <条件>:  
- vue项目中在可编辑div光标位置插入内容html:<div class="mouse-move fl f12 h22 lh
- python实现监听键盘,供大家参考,具体内容如下实现服务端import picklefrom io import BytesIOimpor
- 异常的捕获与处理什么是错误简而言之:还没运行,在语法解析的时候,就发现语法存在问题,这个时候就是错误。什么是异常简而言之:代码写好之后,无明
- 1、简要说明结巴分词支持三种分词模式,支持繁体字,支持自定义词典2、三种分词模式全模式:把句子中所有的可以成词的词语都扫描出来, 速度非常快
- Python的装饰器的英文名叫Decorator,当你看到这个英文名的时候,你可能会把其跟Design Pattern里的Decorator
- 问题:<!DOCTYPE html><html lang="en"><head> &
- 1.确保系统中有依赖的libaio 软件,如果没有: yum -y
- 前言为了介绍python语言中pandas库在数据分析中的重要作用,本人打算以NBA球星勒布朗詹姆斯在2020-2021赛季常规赛个人数据为
- 1.Vue父子组件通信方式父子组件通信方式一般为props和emit组合使用,那么在不同的文件中应该如何使用呢?|.vue文件和.jsx文件
- 1、环境搭建需安装:python3.6Pycharm专业版django 2.2.6mysqlclientpip install django
- 是的,我们知道:我们可以为border设置它的width,这个border的宽度可以是5px,可是10px,可以是20px,可以是随意数值。
- 客户端: <%@ Page Language="C#" AutoEventWireup="true&qu
- Profile 和 cProfile在 Python 标准库里面有两个模块可以用来做性能测试。1. 一个是 Profile,它是一个纯 Py