雨无形的BLOG

关注互联网发展

Follow me on TwitterRSS订阅

  • 首页
  • 一些广告

《网页设计技巧》系列之一 浅谈文本排版

三 2nd

由雨无形发表在用户体验

没有评论

本文转载自毅博客

我们在做网页的时候自己画的图也不错,自己做的布局也很精致,做的图标也很漂亮,第一眼看起来也觉得很漂亮,但是看看就觉得不舒服。也不清楚为什么,这里我告诉你,也许就是你的排版出现问题了。由于排版的不合理,所产生的视觉效果会对读者的眼睛产生一定的疲劳影响,基本的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。下面的内容可以从图示中看出效果来,同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥,我所提供的都是一般性的提议,不同网站不同对待,不要过于拘泥我所给大家的一些参数。

 

大家看到上图,前三个是行距的问题:

第一个太挤了,都粘在一起了,这样眼睛在看这个文本的时候会需要花点时间去分辨,这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了,如果是那就改一下吧!第二个是比较适中的,由于每行分得很清楚,这样看起来有很强的识别性。第三个是比较宽的,松了一点,这样看起来也很清楚,但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节,一般排版不会越过两个字体高度(2em)

下面两个就是字数的问题了,第四个每行文字太长,这样看起来头要摇来摇去,这样读者更容易显得很累。因为要不断的转动头,或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完,不然从行末到下一行行首也会形成断裂感。而下面的又太扁了,这样看起来也不是很舒服。由于在不断的换行阅读,眼球也会觉得不舒服。而推荐的最好的字数是: 不大于45个字母,不大于30个汉字。

上面的图是关于段距的,第一个是比较合适的,这样的把段落分开了,让读者觉得文章并不是很多很难读,而如果不把段落当一回事,任其自然那么就会如下面一样,两段成为一段,这里是两段还好,如果是几十段,那么这个文章就很少有人能读下去了!

在经典论坛中的行距已经重新设定过了,现在发布长篇的文章就不会觉得糊在一起了,并且在链接上加了下划钱,对于色盲或色弱的朋友也容易识别,更为人性化了!

排版

PHP学习之一 sql语言笔记

二 26th

由雨无形发表在服务器相关

没有评论

mysql -h localhost -u username -p //登录mysql数据库
create database dbname;//创建数据库
insert into 表名 (字段1,字段2,字段3,…) values (数据1,数据2,数据3,…);
select * from 表名 where 条件;
SELECT * FROM `customers` WHERE name like ("%mi%");
select orders.orderid, orders.amount, orders.date from customers, orders where customers.name = ‘Julie Smith’ and customers.customerid = orders.customerid;
delete from 表名 where 条件;
update 表名 set 表达式(如 字段=“值”) where 条件;

php数据库链接
@ $db = new mysqli(‘localhost’, ‘用户名’, ‘密码’, ‘数据库’);

php执行SQL语句
$query = "sql语句";
$result = $db->query($query);

mysql, php, sql

解决框架中的水平滚动条问题

二 15th

由雨无形发表在css

没有评论

在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个
bug,在firefox上是正常的,出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.

对于这个bug一般有3种解决方案,

方法1:
代码:
[code=css]html { overflow-y: scroll; }[/code]
原理:强制显示ie的垂直滚动条,而忽略水平滚动条
优点:完全解决了这个问题, 允许你保持完整的XHTML doctype.
缺点:即使页面不需要垂直滚动条的时候也会出现垂直滚动条。

方法2:
代码:
[code=css]html { overflow-x: hidden; overflow-y: auto; }[/code]
原理:隐藏横向滚动,垂直滚动根据内容自适应
优点:在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.
缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,
屏幕以外的内容会因为用户无法水平滚动,而看不到。

方法3:
代码:
[code=css]body { margin-right: -15px; margin-bottom: -15px; }[/code]
原理:这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.
优点:在视觉上解决了这个问题.,垂直滚动根据内容自适应
缺点:由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域.

css, 滚动条

CSS Hack 汇总快查

二 13th

由雨无形发表在css

没有评论

屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px  !important;} /*FF,OP可见,特别提醒:由于Opera最近的升级,目前此句只为FF所识别*/
select:empty {font:12px  !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7与IE5.0可以识别
*+html  select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
仅IE7可以识别
*+html  select {…!important;}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别
* html  select {…}
这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body  select {…}
这句与上一句的作用相同。
仅IE6不识别,屏蔽IE6
select { display /*屏蔽IE6*/:none;}
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。
仅IE6与IE5不识别,屏蔽IE6与IE5
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
仅IE5不识别,屏蔽IE5
select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。
盒模型解决方法
selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。
只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:"\";/*" "*/}} @import ‘ie5win.css‘; /*";}
}/* */
IE5/MAC的过滤器,一般用不着
/*\*//*/
    @import "ie5mac.css";
/**/
IE的if条件Hack
<!–[if IE]> Only IE <![endif]–>
所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–>
仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
仅IE7可识别

以上内容可能并不全面,欢迎大家能和我一起把这些技巧都汇总起来,为以后工作的查询提供一个方便,同时在这里感谢那些研究出这些HACK的作者们。

css, hack

20 个漂亮的 Ajax + CSS 表格

二 3rd

由雨无形发表在css

没有评论

并不是所有的Web 开发者都会对美化表格数据感兴趣,今天我们收集了20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。

现在让我们来看看这些表格:

#1. Tablecloth

Tablecloth 由CSS Globe 开发,是一个轻量级的、易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中。

 

#2. Ask the CSS Guy Table

Ask the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格,例如在单击某个单元格时可以同时突出显示最顶端的行和最左边的列。

#3. A CSS styled table version 2

Veerle Duoh 为我们介绍了一种如何利用CSS 使表格更有吸引力的方法,并且在实现的过程中充分考虑了表格的可访问性。

#4. Sortable Table

Sortable Table ——演示了如何按升序或降序排列以及如何过滤显示表格中的数据。

#5. Row Locking with CSS and JavaScript

演示了如何利用Javascript 和 CSS 实现“锁定行”的效果,选中的行会一直显示高亮效果直到用户再次点击才会消失。

#6. Vertical scrolling tables

如果你有大量的数据但是没有足够大的空间来显示它,这会是一个很好的解决办法。通过CSS 固定表格的页眉和页脚,但是内容却可以滚动显示。

#7. Replicating a Tree table

利用HTML 和CSS 建立的树状表格。

#8. Collapsible tables with DOM and CSS

利用DOM 和CSS 建立的可折叠的表格效果。表格页脚部分包含的箭头有一个名为“footcollapse”的类,通过为之添加Javascript 代码可以让表格展开或折叠。

#9. TableSorter plug-in for jQuery

为jQuery 定制的插件,它的主要功能包括允许多列排序,支持<TH> 元素的rowspan 和colspan 属性。

#10. Stripe your tables the OO way

利用Javascript 为指定表格中的行定义交替颜色,并添加onmouseover 和onmouseout 事件。

#11. MooTools Table Row & Column highlighting

利用MooTools 框架高亮显示鼠标悬停的单元格所在的行和列。

#12. CSS Table Gallery

又一个利用CSS 高亮显示鼠标悬停当前行时的表格效果。

#13. jQuery Table Filter

为jQuery 框架开发的表格排序、过滤插件,可以通过Ctrl + 鼠标单击选择多重列。

#14. PHP Ajax Table

支持所有主流浏览器,自动填入数据,利用后台PHP / MySQL 可以实时滚动、排序、编辑、添加、过滤数据。包括默认、MS Office 2007 、 MS Office XP Excel 三种样式。

#15. SortTable

只需为你想要排序的表格添加一个名为“sortable ”的class ,就可以实现表格的排序功能。

#16. Zebra Tables

A List Apart为我们提供了一个极好的利用Javascript 和 DOM 为表格的单元格应用背景色的示例。

#17. Standardista Table Sorting

Standardista Table Sorting 是一个可以让你按照表格的任何列进行排序的Javascript 脚本。

#18. GridView3 Example

利用Ext Js 框架,功能强大的表格。

#19. Mootable

利用MooTools 框架开发的又一个可排序的表格。

#20. Drag & Drop Sortable Lists with JavaScript and CSS

利用Javascript 和 CSS 实现的可以拖曳、排序列表的效果。

ajax, css, 表格

关于linux下安装zend不能激活的问题

一 26th

由雨无形发表在服务器相关

没有评论

昨天晚上安装zend,安装成功了可是用phpinfo()检查的时候zend Optimizer却没有激活,一直以为是配置的问题,找了半天,最后发现是SElinux和Zend冲突的问题,关闭SElinux就好了。

linux, zend

linux 命令笔记1

一 26th

由雨无形发表在服务器相关

没有评论

通过安装linux和配置服务器暂时学会了以下命令安装rpm软件 rpm -ivh 文件名查找安装的软件 rpm -qa|grep 文件名卸载rpm软件 rpm -e 软件名强制卸载 rpm -e –nodeps 软件名升技rpm软件 rpm -uvh 文件名 解压tar包 tar xzvf 文件名 查找文件 find / -name 文件名

command, linux

让IE支持min-height/width max-height/width 的JS

一 23rd

由雨无形发表在JavaScript

没有评论

ie不支持min-width/max-width min-height/min-width有时候做些效果有些不便,这个js可以让IE支持这个效果 minmax.js

ie, JavaScript

图片超过大小自动缩放代码

一 22nd

由雨无形发表在JavaScript

没有评论

以下是网页中图片超过指定大小自动缩放,并且可以点击看大图的代码

[CODE=javascript] //改变图片大小 function resizeImg() { var contentwidth=565;//设置图片最大宽度 var imageAll=document.getElementById("con").getElementsByTagName("img");//con为图片所在层的ID var turewidth,tureheight; if (imageAll !=null) { for (i=0; iimageAll[i].width) { if(imageAll[i].height==tureheight) { imageAll[i].style.height=imageAll[i].height/turewidth*imageAll[i].width+"px"; } imageAll[i].onclick=function(){window.open(this.src)}; imageAll[i].style.cursor="pointer"; imageAll[i].title="点击查看原始尺寸:"+turewidth+"*"+tureheight+"px"; } else { imageAll[i].style.width=turewidth+"px"; } } } } if (window.addEventListener) window.addEventListener("load", resizeImg, false); else if (window.attachEvent) window.attachEvent("onload", resizeImg); else window.onload=resizeImg [/CODE]

JavaScript

由修改漂浮广告代码而学到的DOCTYPE声明对JS的影响

一 21st

由雨无形发表在JavaScript

没有评论

经常有些JS代码明明在别人网页上可以运行,拷贝过来运行却出错,这个时候可以检查下是不是DOCTYPE声明的问题

在没有DOCTYPE声明的情况下:

document.body.clientWidth

document.body.clientHeight

为当前窗口的宽度/高度;

在DOCTYPE声明以后

document.body.clientWidth

document.body.clientHeight

为整个页面的宽度/高度;

document.documentElement.clientWidth

document.documentElement.clientHeight

为当前窗口的宽度/高度;

同样增加DOCTYPE声明后

document.body.scrollLeft

document.body.scrollTop

要改为

document.documentElement.scrollLeft

document.documentElement.scrollTop

DOCTYPE, JavaScript
« 第一页...«56789»
    • 最新评论
    • 热门文章
    • 存档
    • 标签
    • 分类
    • 互联网观察 (8)
    • 生活点滴 (20)
    • 电子玩意 (5)
    • 网络技术 (48)
      • 服务器相关 (10)
      • 程序开发 (4)
      • 网页设计 (34)
        • css (19)
        • flash (4)
        • JavaScript (7)
        • 用户体验 (2)
        • 设计 (2)
    ajax centos code command css css3 DOCTYPE flash hack host ie ietester jacascript JavaScript linux lvm mysql openssl php QQ空间 reset rpm s60 sql table xml zend zenphoto 分区 分辨率 创业 团队 塞班 字体 开心网 排版 服务器 权限 淘宝 滚动条 焦点图 用户体验 菜单 表格 设计
    • 2011 年七月 (1)
    • 2010 年十一月 (1)
    • 2010 年七月 (1)
    • 2010 年六月 (1)
    • 2010 年五月 (1)
    • 2010 年四月 (1)
    • 2010 年三月 (2)
    • 2010 年二月 (3)
    • 2010 年一月 (5)
    • 2009 年十二月 (1)
    • 2009 年十一月 (1)
    • 2009 年十月 (2)
    • 2009 年九月 (3)
    • 2009 年八月 (9)
    • 2009 年七月 (9)
    • 2009 年六月 (1)
    • 2009 年五月 (1)
    • 2009 年四月 (1)
    • 2009 年三月 (1)
    • 2009 年二月 (3)
    • 2009 年一月 (5)
    • 2008 年十一月 (5)
    • 2008 年七月 (1)
    • 2008 年五月 (5)
    • 2008 年三月 (7)
    • 2008 年二月 (4)
    • 2008 年一月 (6)
    • [进阶]通过外部XML文件加载外部SWF动画 (2)
    • 一个优秀的相册程序zenphoto安装记 (2)
    • 推荐一个不错的jq的UI库 (2)
    • 新的开始,最近要做的事情 (2)
    • flash中用attachMovie复制元件置于舞台的方法 (1)
    • div层总是被flash层遮盖的解决方案 (1)
    • IETester多IE版本共存的解决方案 (1)
    • 举国同悲,一条CSS代码把网页变黑白 (1)
    • 千万网上“账客族”异军突起 (1)
    • 帮太和服饰做的网站售前页面 (1)
    • 猫猫在线: 你这是免费空间?
    • 猫猫在线: 备案网站 哈哈。。。
    • 猫猫在线: 有决心 就一定能成功、
    • 猫猫在线: 所以说。操作时一定要小心了
    • 过客: 无效果
    • yayaus: 把你的博客订阅了
    • yayaus: 你的这个图床访问速度真是太给力了,不像我的那个免费空间。。
    • yinters: 最好把测试的文件给我们看下啊
  • 用户登录






    • 忘记你的密码?
  • 友情链接

    • 7天连锁
    • 格林豪泰酒店
    • 楚天都市报读者俱乐部
    • 汉庭酒店
    • 湖北包装网
    • 酒店地址
    • 零柒创意生活馆
版权所有 © 2012 雨无形的BLOG
由digitalnature提供主题Mystique | 由WordPress强力驱动
RSS订阅 XHTML 1.1 顶端

无觅相关文章插件,快速提升流量