Category Archives: XHTML&CSS

Web Design

CSS 居中大全

<center>

不建议用了。

text-align:center

在父容器里水平居中 inline 文字,或 inline 元素

vertical-align:middle

垂直居中 inline 文字,inline 元素,配合 display:tabledisplay:table-cell,有奇效。

line-height

与 height 联手,垂直居中文字

margin:auto

示例:

hac[......]

阅读全文»

这 30 类 CSS 选择器,你必须记在脑袋里

大概大家读知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式。这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相应最新版本的浏览器中才能生效,你完全应该把这些都记在你聪明的脑袋里面。

1. *

在我们看比较高级的选择器之前,应该认识下这个众所周知的清空选择器。星号呢会将页面上所有每一个元素都选到。许多开发者都用它来清空marginpadding。[......]

阅读全文»

IE8下实现兼容rgba

昨天遇到一个问题,要实现一个背景透明的效果,用CSS3用rgba()就能实现,即

但是要兼容到IE8,就发现没有透明效果,因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。

rgba的含义,r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0,.5)就是透明度为0.5的黑色。现代浏览器是支持rgba的,但是在IE8等古董级[......]

阅读全文»

中文字体网页开发指南

字体的选择,是网页开发的关键因素之一。

合适的字体,对网页的美观度(或可读性)有着举足轻重

的影响。

bg2014071502

 

bg2014071503

 

bg2014071504

 

但是,相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做。)

不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大[......]

阅读全文»

自定义Access-Control-Allow-Origin策略以解决字体文件跨域权限问题

什么是Access-Control-Allow-Origin

Access-Control-Allow-Origin是HTML5中定义的一种服务器端返回Response header,用来解决资源(比如字体)的跨域权限问题。

它定义了该资源允许被哪个域引用,或者被所有域引用(google字体使用*表示字体资源允许被所有域引用)。

什么是资源跨域权限

当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.example.[......]

阅读全文»

防御 XSS 的七条原则

前言

本文将会着重介绍防御XSS攻击的一些原则,需要读者对于XSS有所了解,至少知道XSS漏洞的基本原理,如果您对此不是特别清楚,请参考这两篇文章:《Stored and Reflected XSS Attack》《DOM Based XSS

攻击者可以利用XSS漏洞向用户发送攻击脚本,而用户的浏览器因为没有办法知道这段脚本是不可信的,所以依然会执行它。对于浏览器而言,它认为这段 脚本是来自可以信任的服务器的,所以脚本可以光明正大地访问Cookie,或者保存在浏览器里被当前[......]

阅读全文»

人人都能用的 10 个网站易用性技巧

1. 给logo添加替代文本

这样有两个好处:屏幕阅读器能识别logo图片代表的含义,图片未加载到时,也能告诉非视障用户那里是你的logo。

几种方法:

或者,你用背景图来实现logo的话,也可以添加title属性来实现:

当然,链接+背景图的方式是最好的,但最好也加上title属性:

[crayon-5adaa[......]

阅读全文»

css hack一览(包含IE10)

css一招解决不同浏览器页面错位问题

用CSS+DIV来写网站代码的好处显而易见,这里不多说了,但由于不同浏览器对CSS的解释不统一,造成不同浏览器下页面错位的现象十分常见……

页面乱的原因是因为IE6认为一个DIV超宽了,所以把本应float;right的DIV挤了下去。而如果设置为IE6下显示正常的宽度,则在IE7和Firefox下看页面就会少了一块一样,也很别扭….  

怎么办?用CSS HACK 来改写CSS代码

改写前:xxx. yyy:{width:600px;} (当设为IE[......]

阅读全文»