随笔分类 -  div+css

web标准化研究
HTML5 新增元素整理
摘要:<!DOCTYPE html> <title>HTML5新增元素</title> <header> header元素表示页面中的一个内容区块或整个页面的标题 </header> <hr/> <nav> 导航 </nav> <hr/> <aside>aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。</aside> <article> article元素表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文 阅读全文
posted @ 2012-01-17 17:23 刘卿 阅读(241) 评论(0) 推荐(0)
css外部字体引用
摘要:* .TTF或.OTF,适用于Firefox 3.5、Safari、Opera * .EOT,适用于Internet Explorer 4.0+ * .SVG,适用于Chrome、IPhone 比如:@font-face { font-family: 'HansHandItalic'; src: url('fonts/hanshand-webfont.eot'); src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'), url(' 阅读全文
posted @ 2011-12-30 10:39 刘卿 阅读(1573) 评论(0) 推荐(0)
ie下兼容html5
摘要:自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注,然而唯一能让IE识别那些新元素(如<article>)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。 使用和下载 html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。) 作者已经把js文件放在Google code project上并允许大家直接调用,当然,前提是你不在意调用额外的文件。 http://html5shiv.googlecode.com/svn/trunk/html5 阅读全文
posted @ 2011-06-08 14:11 刘卿 阅读(261) 评论(0) 推荐(0)
css页面翻转
摘要:<style>html{filter:fliph}/*ie fliph(水平翻转滤镜),还有flipv垂直翻转滤镜*/ body{-webkit-transform: rotateY(180deg);transform: rotateY(180deg);-moz-transform: skew(0deg, 180deg) scale(-1, 1); -o-transform: skew(0deg, 180deg) scale(-1, 1);} </style> 阅读全文
posted @ 2011-05-05 17:29 刘卿 阅读(254) 评论(0) 推荐(0)
Google 推出 Font API
摘要:对于网站制作者&前端老湿们来说,为了确保显示效果,长期以来不得不一直使用“安全字体”,英文站一色的 Verdana,中文站一律的宋体——因为这是每台电脑里肯定装有的字体。这是设计理念不断进步的UI老师们所不能容忍的。字体可是页面效果的根本,好比T台模特的衣服换了千万种,但你只能用这一两个模特(对于中文用户那就几乎只有一个宋体)?曾经流传有将字... 阅读全文
posted @ 2010-08-02 22:52 刘卿 阅读(186) 评论(0) 推荐(0)
input上下边距
摘要:刚才同事问我怎么去掉ie下input上下边距,解决了半天没成功,问一圈别人 还是没给出确切的答案,给出的只是,margin设为负值,不算去掉, 发上来问下大家..知道的说说,, 阅读全文
posted @ 2008-12-15 15:58 刘卿 阅读(588) 评论(0) 推荐(0)
li里元素浮动引起的问题,及其解决
摘要:红世2008-12-9 红世2008-12-9 红世2008-12-9 红世2008-12-9 红世2008-12-9 红世2008-12-9 红世2008-12-9 红世2008-12-9 上面的是未解决,下面的是解决,仔细看欧!~ 红世2008-12-9 红世2008-12-9 ... 阅读全文
posted @ 2008-12-09 18:36 刘卿 阅读(263) 评论(1) 推荐(0)
比较舒服的配色
摘要:#EFF7FF #96C2F1 #F0FBEB #9BDF70 #FFFFDD #E3E197 阅读全文
posted @ 2008-12-08 17:30 刘卿 阅读(215) 评论(0) 推荐(0)
选项切换卡使用中你有被雷到过吗?
摘要:如今的设计中,选项切换卡在网页中的使用已十分的普便,对网上浏览信息的人,你不敢说你没有使用过。至少在无数的页面浏览中让我造成了恐惧过的错觉, 是否大家也有过同样的想法和曾有过一秒钟的思维扭转。但是对于UI Team工作者来说,如何更为恰当的设计和效果实现让用户造成的错觉更为小和贴心呢? 每个设计者都有自己想法,没法统一。 网上常见状态效果: 1.鼠标划过(onmouseover)按钮切换信息,... 阅读全文
posted @ 2008-12-08 17:02 刘卿 阅读(219) 评论(0) 推荐(0)
css挂掉ie6
摘要:点我挂掉IE6 阅读全文
posted @ 2008-11-27 15:12 刘卿 阅读(145) 评论(0) 推荐(0)
first-letter--一个空格的问题
摘要:今天一个朋友问我怎么让段落首字母变大,我首先想到的是使用伪类 first-letter 来解决这个问题,但是我发现ie6下不兼容这个属性,在无意间一个空格解决了这个问题 ,这个属性使用的时候一定要在first-letter和{直接多加一个以上空格.........这个问题到底是什么导致,那位大侠知道个我说说 我要长大 阅读全文
posted @ 2008-11-27 12:55 刘卿 阅读(245) 评论(0) 推荐(0)
Collapsing margins
摘要:例子请用Firefox, Opera, Safari,google查看 before HTML document 父容器里设置margin-bottom:100px....是不是觉得象margin:100px auto 100px auto; after HTML document 父容器里设置margin-bottom:100px....是不是觉得... 阅读全文
posted @ 2008-11-27 09:48 刘卿 阅读(196) 评论(0) 推荐(0)
css reset研究
摘要:网易 (http://www.163.com) body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;} div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; b... 阅读全文
posted @ 2008-11-16 17:20 刘卿 阅读(204) 评论(0) 推荐(0)
FLOAT测试
摘要:千烨-翼 千烨-翼 阅读全文
posted @ 2008-10-06 14:54 刘卿 阅读(307) 评论(0) 推荐(0)
aptana
摘要:aptana专业的js开发工具 阅读全文
posted @ 2008-09-28 09:18 刘卿 阅读(276) 评论(0) 推荐(0)
UTF-8文件的Unicode签名BOM(Byte Order Mark)问题
摘要:近日在调测一个UTF8编码的中文Zen Cart网站时遇到一件怪事,网页显示文字正常,用ie的察看源文件(记事本打开)却发现乱码,firefox没有这个问题。经在网上多方查证和多次测试,解决了这个问题,其实是UTF-8文件的Unicode签名BOM(Byte Order Mark)问题。 BOM(Byte Order Mark),是UTF编码方案里用于标识编码的标准标记,在UTF-16里本来是FF... 阅读全文
posted @ 2008-09-11 09:19 刘卿 阅读(2425) 评论(3) 推荐(0)
完全css-tab切换
摘要:完全css-tab切换 1 2 3 阅读全文
posted @ 2008-09-08 12:44 刘卿 阅读(968) 评论(0) 推荐(0)
完全css弹出菜单
摘要:弹出菜单 DEMOS DEMOS zero dollars wrapping text styled form active focus HOVER/CLICK &gt; HOVER/CLICK &gt; styled fo... 阅读全文
posted @ 2008-09-05 09:47 刘卿 阅读(730) 评论(0) 推荐(0)
前台开发的18个小技巧
摘要:1、xml文件尽量以utf-8编码,gb2312有些字是存储不了的,如?,就算能存也需要转换,比较麻烦,utf-8也符合国际规范。 2、CSS中:hover这个伪类,如果放在:visited前面则会失效。 3、<a>标签如果没有href属性,所有对它的css的伪类如:hover均失效。 4、js文件中用document.wirte("<script language=’ja... 阅读全文
posted @ 2008-08-31 10:43 刘卿 阅读(240) 评论(0) 推荐(0)
首页head区代码专业规范
摘要:head区是指首页HTML代码的和之间的内容。 必须加入的标签 1.公司版权注释 2.网页显示字符集 简体中文: 繁体中文: 英 语: 3.网页制作者信息 4.网站简介 5.搜索关键字 6.网页的css规范 (参见目录及命名规范) 7.网页标题 xxxxxxxxxxxxxxxxxx .可以选择加入的标签 1.设定网页的到期时间。一... 阅读全文
posted @ 2008-08-31 10:40 刘卿 阅读(207) 评论(0) 推荐(0)