![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html/css
文章平均质量分 83
SleepInDelphi
perl,c,java,delphi,ajax,biancheng
展开
-
浏览器如何渲染文本
浏览器是我们最常用的软件之一,文本又是网页中最主要的元素, 在浏览器显示文本的过程中有许多有趣的细节,值得展开来讲讲,或许能减少一些误解。这是一个比较粗略的,概括性的介绍,尽可能不涉及过多的技术细节和具体实现,而立足于给 Web 开发者和设计师提供一些正确的概念。下面的介绍主要根据我对 WebKit 和 Gecko (Firefox) 的印象来谈,其他的浏览器也大致相同,如有阙漏之处欢迎指...2012-04-13 12:14:10 · 115 阅读 · 0 评论 -
内容适应形式
学习了死猫的文章,我今天也来说说有关内容和容器的关系。 看标题你也许觉得有些囧,它和上一篇《形式追随内容?》看起来相反,而且好像从交互设计的角度看也是很不专业的一个观点,这有点像是我搬起石头砸自己的脚或是死猫的脚…… 不过不幸我是一只友爱并且怕疼的企鹅,所以事实上是这样的: 我们可以把形式追随内容定义为一个对默认界面的可用性建议,它可以适用于当用户进入一个界面时所看到的...原创 2010-06-22 14:02:08 · 115 阅读 · 0 评论 -
用户是如何浏览你的网站的
事实上,互联网用户浏览网页的习惯和顾客浏览商店中物品的习惯没有多大差别。用户打开一个新的页面,扫视一些文字,并点击第一个引起他兴趣的链接。在这过程中,页面上有大量的区域用户甚至完全没有看过。大部分用户在页面上寻找他感兴趣且可点击的内容,一旦发现目标,点击行为就会发生,但如果页面不符合期望,后退或关闭按钮也将马上被点击。用户是如何浏览你的网站的1. 大部分时候用户并非在阅读屏幕上的内...原创 2010-06-22 14:01:52 · 91 阅读 · 0 评论 -
多按钮共存——don’t make me think
之前在一个web系统的设计中,和另一个设计师讨论,“保存”和“取消”按钮该怎么设计。我的观点是,保存是比取消更常用的按钮,也是用户的主要目的(用户不会为了取消来使用表单),所以在视觉上,保存按钮应该比取消按钮更醒目,这样更容易被用户先看到,从而提高用户的效率。 下图:Google analytics系统中,Apply以按钮的形式表现,cancel以链接形式表现 后来碰巧看到...原创 2010-06-20 22:55:16 · 81 阅读 · 0 评论 -
轻量级设计,让网站灵敏轻便的6个技巧
在网站或软件的策划和设计过程中,我们经常听到这样的讨论:“这个功能设计得太重了”又或“我们希望能够处理得轻一些”。似乎轻设计是时下炙手可热的话题,也是方兴未艾的Web2.0大浪下设计师们的最爱(看看那些在全世界遍地开花的SNS网站,无论是视觉元素还是交互流程均能轻则轻)。本文主要从实践和总结的角度出发,提出了让设计变得更轻的6个技巧。何为轻设计: 在开始之前先需要明确下何为轻设计...原创 2010-06-20 22:51:48 · 114 阅读 · 0 评论 -
慢慢的网页
蜗牛很慢。 蜗牛快递会怎样? 答案是:当然也会很慢。 但是蜗牛尽了他的全力,为了它的兔子朋友,以生命在奔跑。 每天都是24个小时,快的只是速度,却不是时间。蜗牛的1天=火箭的1天=24小时。 我们总是认为,我们是向前奔跑的,和时间赛跑,一寸光阴一寸金。这些都是我们从小被教导的观念。但事实上,我们要那么快干什么呢? 你可以说信息瞬息万变,也可以说一刻千金。但是如果你...原创 2010-06-20 22:48:47 · 87 阅读 · 0 评论 -
用户体验的时间尺度
从接触互联网开始,一直在关注每个网站页面浏览速度,不管大小国内外网站,而且每个用户的浏览时间都不一样,从而了解用户在浏览页面上时间体验尺度的重要性。前几天看了这文章觉得不错,所以译了其中一部分与大家一起分享。 从0.1秒至10年或以上,用户界面设计有许多不同的时段,各有其独特的可用性问题。 在用户体验方面有其自己版本的“10的次方(powers of 10)”(Charles Eam...原创 2010-06-20 22:46:52 · 127 阅读 · 0 评论 -
页面表达原则
《页面表达原则》是整个“web交互设计方法”中的一部分:页面表达原则概述:1.更少的信息量更好。2.不提供多余的功能。3.结构化更易于理解。4.信息的表达应该清楚、明确、直接。5.操作可识别。6.操作前,结果可预知。7.操作时,操作有反馈。8.操作后,操作可撤销。9.让用户知道身处何地。10.避免内容看上去象广告。11.同一功能在不同页面上位置相同。12.措辞统一。详细描述:1.更少的信息...原创 2010-06-20 22:42:36 · 203 阅读 · 0 评论 -
面向对象的XHTML与CSS编程
要是XHTML与CSS能面向对象。。太阳应该从北边升起了。但是,凡事都应该带着OO的思想来看问题,也勉强可以凑数拉。其实,早在零几年就有人提出了OO-style,不过已找不到。那要怎样OO呢?现在大家都知道CSS是可以介样写滴:.G_G { /* xxxxxx */ }我们可以把它大约看一个原型,或者说成类,-__-b 好像本来就是类的样子,然后要在HTML里“实例化”一个对象,例...原创 2010-09-01 17:26:17 · 146 阅读 · 0 评论 -
CSS Frameworks的概念
最近看到N多介绍CSS框架,前些天我说过一句话:“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”,当然也可能是我的视野太小了,或者是说世界太大了,我自己还是感觉还有一大堆我看不到的东西。先来看一下一个我比较认同的概念:框架可分为白盒(White-Box)与黑盒(Black-Box)两种框架。基于继承的框架被称为白盒框架。所谓白盒即具备可视性,被继承的父类的内部...原创 2010-09-01 17:25:51 · 121 阅读 · 0 评论 -
加速图片显示
加速的关键,不是降低重量,而是减少个数。如果重量在200K以内,只要网络不是特别慢,效率都差不多。但是,如果图片个数多一倍,效率将明显低一个档次。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按Byte计算。客户端每显示一张图片都会向服务器发送请求,所以,图片越多请求次数越多,造成延迟的可能性也就越大。因为一张图片的传输时间,通常远小于请求等待的时间。...原创 2010-09-01 17:24:36 · 305 阅读 · 0 评论 -
如何快速的呈现我们的网页
如何快速的呈现我们的网页 作者:flashsoft,(内容被我略修删过)。一.我们需达解决的麻烦减少HTTP请求数. 减少HTTP请求数有什么好处降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压缩的CPU开销.减小被请求文件大小, 减少请求数据占用的网络带宽.让用户更快的...原创 2010-09-01 17:23:30 · 170 阅读 · 0 评论 -
如何减少网页的内存与CPU占用
有的网页看起来并不大但打开会很卡,有的网页虽然很长但使用流畅,占用用户电脑的内存与CPU就影响这些。浏览器问题,有各自的浏览器处理内存问题会影响到,但几乎没办法控制得了,Windows上的:IE系列,刷新回收的量不大,但最小化会释放内存,。Firefox2据说也会在最小化回收,可我从没见过最垃圾,用多少是多少,基本不回收。据说prototype的ajax还会引起内存一直增加。...原创 2010-09-01 17:22:19 · 175 阅读 · 0 评论 -
让我们一起忽悠 Spam 机器人吧
很多人的 Blog 都被 Spam 机器人骚扰,有的甚至已经到了无法容忍的地步。这是一种不幸,同时也是一种荣幸。不幸的是那些无聊的 Spam 尽是发一些广告消息,而荣幸的是它给我们带来了流量。很庆幸我的 Gracecode.com 的流量还不足够引起 Spam 机器人的重视。但是防患于未然,毕竟不是每个 Blog 都是喜欢垃圾评论的。下面根据我看到的、学到的结合我自己的经验在不影响用户体验...原创 2010-06-13 14:13:04 · 241 阅读 · 0 评论 -
CSS BUG顺口溜
一、IE边框若显若无,须注意,定是高度设置已忘记;二、浮动产生有缘故,若要父层包含住,紧跟浮动要清除,容器自然显其中;三、三像素文本慢移不必慌,高度设置帮你忙;四、兼容各个浏览须注意,默认设置行高可能是杀手;五、独立清除浮动须铭记,行高设无,高设零,设计效果兼浏览;六、学布局须思路,路随布局原理自然直,轻松驾驭html,流水布局少hack,代码清爽,兼容好,友好引擎喜欢迎。七、所有标签皆有源,只是...原创 2010-06-13 14:12:27 · 80 阅读 · 0 评论 -
形式追随内容?
今天想说的是内容和容器的关系,顺便把之前设计中碰到的问题和大家一起探讨下。我们从软件的设置说起。(这里以QQ的设置举例) 一个软件的设置(常称为系统设置)一般承载了软件所有的可配置选项。通过导航,把内容放置在不同的选项卡下面。 由于内容的划分是根据产品功能的逻辑划分,所以设计中经常碰到的问题就是:不同选项卡下面的内容多少不确定,对排版会带来很大麻烦。 正常情况如下图,...原创 2010-06-22 14:02:19 · 131 阅读 · 0 评论 -
自然描述与自然任务
这次我们来说一些很小的东西,相当小。不过先说一个故事: 这天晚上,你打算出去下一次馆子,就行动了,找到了一家新开的小店进去坐了下来,服务员很殷勤的走了过来问你想吃点什么。 你问:“你们有什么好吃的么?” 答:“我们有黄豆与可食用菌落群酿制剂与 Carassius auratus 共同高温加热制成品;大豆蛋白经氯化镁、硫酸钙、氯化钙及氯化钠作用固化物与Carassius aurat...原创 2010-06-22 14:02:31 · 88 阅读 · 0 评论 -
默认Web字体样式
通常用户看到的页面的样式(css)会受到三层控制:第一层是浏览器的默认样式;第二层是网页定义样式;第三层是用户自定义样式.和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式, 而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能, 但是极少数会有用户去自定义,一般用也是高级用户。而浏览器默认的样式往往...原创 2012-04-13 12:13:46 · 234 阅读 · 0 评论 -
最佳 Web 中文默认字体
最近淘宝网首页有个小小的 默认字体调整风波,中文默认字体远比我们想象中的复杂。以前主要关注 font-family 自身,忽略了 lang 属性和 charset 设置。今天做了个更详尽的测试:http://lifesinger.github.com/lab/2011/default-fonts/在不同操作系统下,用各个浏览器打开,特别是 Firefox 和 Opera,混乱的世界啊...原创 2012-04-13 12:12:45 · 442 阅读 · 0 评论 -
10 个改善网页可读性的实用排版技巧
网页的排版问题常常被忽视。这挺遗憾的,如果你能改进你的网页排版,那么设计和可读性也就随之改进。在这篇文章中,介绍了10个非常有用的排版技巧,可以使你的网站看起来更好。 1. 设置正确的行高 最常见的网页排版错误之一绝对是错误的行高。行高用来定义文本行的高度,所以它必须要根据字体大小进行设置。 一般来说,当我设置文本行的高度时我总是再给字体大小增加7个像素的行间距(字体大小为12至15个像素)。 ...原创 2012-07-25 08:48:08 · 119 阅读 · 0 评论 -
别告诉我你懂Javascript
过去几年我注意到技术圈一个很奇怪的现象,有太多程序员将那些他们只是有过非常浅显的了解,但其实根本就不懂的技术写到他们的简历中,这个现象几乎每种语言都有,但这其中最严重的就要数Javascript了。你不知道你不懂出现这种状况的一个很大的原因就是现如今几乎每个开发者的工作都或多或少要依赖于Javascript,但大多数人并不真的理解这门语言,他们常用的学习方式是复制粘贴,使用这种方式,你永远...2012-03-30 10:46:47 · 110 阅读 · 0 评论 -
HTML5标准学习 – DOCTYPE
上一篇文章主要讲述了HTML文档的构成,同时肤浅地接触了“标签省略”这一概念,本文会从概念上介绍HTML文档中第一个出现的重要元素 – DOCTYPE。所谓DOCTYPE,最初是XML的概念,即通过一种特定的语法,作为一种元数据,来描述XML文档中允许出现的元素,以及各元素的组成、嵌套规则等。具体的概念可以在WIKI中中得到一个更详细的结果。但是在HTML中,DOCTYPE又有着一些...原创 2012-03-28 09:49:17 · 108 阅读 · 0 评论 -
HTML5标准学习 – 文档结构
说起HTML的结构,很多人都能说得头头是道,一般来说答案可能是这样的:一个DOCTYPE,一个html,里面有head和body元素。这当然不能说是不正确的,但是如果问到一个最小的HTML源文件必须有哪一些东西的话,恐怕很少有人能正确地做出回答。先来回答一下这个问题,一个最简的HTML5源码文件需要的内容如下:<!DOCTYPE html>是的,就...原创 2012-03-28 09:49:09 · 192 阅读 · 0 评论 -
HTML5标准学习 – 简介
最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互、样式的时候,忘却了这一切的基础 – HTML。其实我很喜欢HTML,觉得这个语言远比XML来得有趣,其灵活、轻便远非极端规范的XML可以比拟。同时又因为HTML的作用范围极小,规定的标签有限等说不上优点还是缺点的特色,使得HTML有着自己的确定性。本系列的前面很大一部分会以...原创 2012-03-28 09:48:51 · 149 阅读 · 0 评论 -
CSS语法简单入门
整体组成在CSS中,顶层元素被称为Rule,而CSS中的Rule又分为2类:CSSStyleRule和CSSAtKeywordRule。CSSStyleRule是最基本的,即我们最常见的,由选择器+属性+值组成的部分,以下就是一个简单的示例:#nav>li~li { float: left; margin-left: 7px; paddin...原创 2012-03-27 15:57:20 · 156 阅读 · 0 评论 -
移动Web界面样式-CSS3
CSS2.1发布至今已经有7年的历史,在这7年里,互联网的发展已经发生了翻天覆地的变化。CSS2.1有时候难以满足快速提高性能、提升用户体验的Web应用的需求。CSS3标准的出现就是增强CSS2.1的功能,减少图片的使用次数以及解决HTML页面上的特殊效果。 在HTML5逐渐成为IT界最热门话题的同时,CSS3也开始慢慢地普及起来。目前,很多浏览器都开始支持CSS3部分特性,特别是基于We...2012-07-17 12:48:53 · 99 阅读 · 0 评论 -
《高性能网站建设指南》读书总结
昨天完整的读了一遍《高性能网站建设指南》,收获颇丰。正如作者序言里说的,拿到这本书的你是幸运的,但是更重要的是,你的网站的用户很幸运,:) 书的作者是YUI(Yahoo! User Interface)的一名核心开发人员,而书的内容是将他们在网站前端优化的14条原则逐一分享。书很薄,适合我这种懒人,可以一天就读完,:) 不过书的内容简洁明了,很有操作性,道理也讲得明白,喜欢这种...2012-02-28 13:26:01 · 158 阅读 · 0 评论 -
StackOverflow的404错误页面
不知道大家有没有注意到StakeOverflow的404错误页面?其显示了下面的这个图片:这个是一个很有意思的图片,不知道你看懂了吗?看上去像Python,又像 Ruby,还像 Perl,当然也有 C的影子,还有Brainfuck。是的,这是一个杂交程序,杂交了Python,Ruby,Perl,C,还有Brainfuck(注意其中的#号),所有的语句都是输出“404”字符串。关于这种杂...2011-12-02 15:30:26 · 173 阅读 · 0 评论 -
这样去写你的 HTML
昨天在 twitter 上说,怎么忍心把页面写得这么难用?是的,这个世界还有一群人等着我们创建出来的东西,可以让他们的生活能过得更容易呢。比如那些需要读屏软件的用户。作为一个前端,我们又怎么会忍心呢。之前就一直想写这样的一篇文章,分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 2HTML T2ag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML,让某些人的生活可以更容...2011-05-27 13:19:00 · 122 阅读 · 0 评论 -
网站开发中的文件存储 目录结构的探讨
网站应用中经常会有文件存储的需求,目录结构该怎么建才好呢?让我们来做下分析 对于少量用户写信息,大量用户都是在看信息的网站:例如CMS系统,编辑发咨询,用户看,例如中小企业产品发布网站。 对于这类需求我们可以把文件专门放到一个目录下,例如放到网站根目录的upload目录下,然后按天建文件夹,将每天的文件放到一个目录下,文件名可采用数字生成。例如:upload/20100612/122...原创 2010-06-22 14:03:09 · 173 阅读 · 0 评论 -
Internet Explorer 8 中的 CSS 改进
Internet Explorer 8 完全符合级联样式表 (CSS) 的 CSS2.1(级别为 2,修订号为 1)规范,并支持 CSS 级别 3 (CSS3) 的某些功能。 本主题包含 Internet Explorer 8 中对 CSS 支持所做更改的完整列表。有关最新版本的 Internet Explorer 中的 CSS 合规性概要,请参见CSS 合规性和 Internet Explo...原创 2010-06-22 14:02:45 · 89 阅读 · 0 评论 -
推荐的 CSS 书写顺序
//显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceot...原创 2010-06-12 20:32:09 · 66 阅读 · 0 评论 -
30秒钟评价一个网页
当你已经做好准备要开发一个网站时,你一定希望你开发出的网站能给用户最好的用户体验。能够准确快速的评价一个网站是一门艺术,也是一门科学,但这种艺术或科学是可以很快学会的。这里有几个简单的技巧能帮助你在30秒或更短的时间内对你的网页进行评价,帮你拨开云雾,看清你的网页上那些部分的设计是好的,那些部分不够好。注意你的视线的第一落点–打开网站,但在网站没有完全加载完成前不要睁开眼睛。 而当你睁...2010-05-24 20:53:15 · 187 阅读 · 0 评论 -
CSS布局中关于WEB标准的六条经验
一、少用偏门。 类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测。 二、center不是float的值。 很多新手都会把center误认为是float的值,而偏偏不是如此。center只是text-align的值。 三、对齐不能包括两个值。 ...2010-04-26 11:44:08 · 80 阅读 · 0 评论 -
XHTML编码七条基本规范
一、所有的标记都必须要有一个相应的结束标记 以前在HTML中,你可以打开许多标签,例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构,所有标签必须关闭。如果是单独不成对的标签,在标签最后加一个"/"来关闭它。例如: <br /><img..2010-04-25 22:57:36 · 93 阅读 · 0 评论 -
小议使用“完整”的CSS的缺点
1、浏览器支持的不一致性览器的漏洞或缺乏支持的CSS功能,导致不同的浏览器显示出不同的CSS版面编排。例如在微软Internet Explorer6.0的旧版本 ,执行了许多自己的CSS2.0属性,曲解了很多重要的属性,例如:width,height,和float。许多所谓的CSS人员,必须在最热门的或常用的浏览器中达到一致的版面编排。在不同的浏览器中,要达到像素精准的版面编排,有...2010-04-25 22:55:23 · 82 阅读 · 0 评论 -
书写高效的CSS - 漫谈CSS的渲染效率
总结了部分所学、所听、所看、所问的一些CSS写作经验,书写高效的CSS - 漫谈CSS的渲染效率,它们与渲染效率及所占用消耗的资源有一定的关联。部分为自己理解所写,不排除会有错漏,欢迎提供更好的意见。1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是...2010-04-23 11:28:59 · 106 阅读 · 0 评论 -
Web2.0网站十五个显著的流行风格
简短的介绍和图片,列举出Web2.0网站十五个显著的流行风格要素。不必在一个设计中应用下列所有的元素,掌握何时用和如何使用才是关键。希望此文对你的设计有参考意义。1.简约: 至于简约的风格,对于我们来说不是必要的一种推行,需要根据网站的目地进行定位。设计师如何协调网站的定位和客户需求之间的关系,完成工作是最关键。2.居中布局 居中布局很容易做到,而且已经...2010-04-23 11:28:36 · 129 阅读 · 0 评论 -
你真的了解HTML吗
有这么一段HTML,请挑毛病: <P>&nbsp;&nbsp;哥写的不是HTML,是寂寞。<br><br> &nbsp;&nbsp;我说:<br>不要迷恋哥,哥只是一个传说 这是原来雅虎一道笔试题(文字变了变),用了很多年了,还没有一个人完全答对过。===========...2010-04-22 08:48:17 · 150 阅读 · 0 评论 -
学习Web标准,您是哪个等级的CSS开发人员?
我们在不断的学习,追求进步与提高,到底学到什么程度了,到底是不是真的了解CSS,是哪个层次了呢。我们来对照一下。 第0级:CSS?那不是一个多人射击游戏吗? CSS? Isn't that a multiplayer game? 有些人因为在找CS:S(Counter Strike: Source)这款游戏的资讯而进到#CSS网站。不必担心这些人,他们不可能制...2010-04-22 08:46:03 · 91 阅读 · 0 评论