Xu Design » CSS http://xuui.net 专注和分享界面设计的点点滴滴. Sat, 28 Jan 2012 01:04:27 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 HTML5 的网页代码示例 http://xuui.net/librarys/html5-web-page-code-sample.html http://xuui.net/librarys/html5-web-page-code-sample.html#comments Fri, 04 Nov 2011 09:04:45 +0000 Xu.hel http://xuui.net/?p=2326 了解更多]]>

一直找不到 HTML5 的代码示例就直接写了一个作为备用。

这是一个符合 W3C 标准的 HTML5 的页面基本代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 DEMO</title>
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
    <header></header>
    <article>
        <section>
            <div></div>
        </section>
    </article>
    <aside></aside>
<footer></footer>
<script src="scripts/script .js"></script>
</body>
</html>

这篇文章也用来顺便测试一下集成的代码高亮插件。呵呵。现在本站字体改成 13px 的大小了。换算成 pt 单位也就是 9.75pt。

计划 iStudio 2.0 将会优先使用这个代码高亮的插件。

]]> http://xuui.net/librarys/html5-web-page-code-sample.html/feed 2 再次更新 iPhone CSS 样式 http://xuui.net/ui-design/iphone-css-style-update-again.html http://xuui.net/ui-design/iphone-css-style-update-again.html#comments Tue, 11 Oct 2011 05:28:58 +0000 Xu.hel http://xuui.net/?p=2238 了解更多]]> 首先是今天是本 Blog 上线 5 周年的纪念日。Blog 5 岁生日快乐！iLost 的 CMS 版在进行语音包的处理，很快就可以发布了。

最近把 iPhone 的样式更新了，主要是正对iPhone 的触摸特性把一些链接的点击区域放大了。iPhone 上由于屏幕限制就主打横屏浏览模式，搜索和分享在竖屏状态下是隐藏了的。

现在直接使用 iPhone 访问本站就可以看到新的针对 iPhone 优化后的主题样式了。

预览图在这里：

首页竖屏：

首页横屏：

列表竖屏：

列表横屏：

文章竖屏：

文章横屏：

还有就是评论的插入表情的地方，我把可点击区域加大了。

感觉这次 iPhone 又是像 iPad 那样朝 Web APP 形式发展了。呵呵。

]]> http://xuui.net/ui-design/iphone-css-style-update-again.html/feed 7 再次更新iPad CSS 样式 http://xuui.net/bloglife/ipad-css-style-update-again.html http://xuui.net/bloglife/ipad-css-style-update-again.html#comments Tue, 13 Sep 2011 16:30:08 +0000 Xu.hel http://xuui.net/?p=2224 经过几天的努力，再次把 iPad 的样式更新了，现在搞成类 WebApp 的风格了。竖屏状态下看不到边栏内容，完全是个阅读模式，横屏的时候就可以看到边栏的内容了。直接使用 iPad 访问本站就可以看到了。预览图在这里：

首页：

竖屏：

横屏：

想看更多详细的那就请用 iPad 访问本站吧。iPhone 的还在调整中。

]]> http://xuui.net/bloglife/ipad-css-style-update-again.html/feed 5 CSS 技巧收集1 http://xuui.net/librarys/css-techniques-to-collect-1.html http://xuui.net/librarys/css-techniques-to-collect-1.html#comments Tue, 03 Aug 2010 10:32:13 +0000 Xu.hel http://xuui.net/?p=1879 了解更多]]> IE6、IE7、Firefox兼容最简单的 CSS Hack。

具体写法很容易：

#someNode{
    position:fixed;
    #position:fixed;
    _position:fixed;
}

说明和解释：

  • 第一排给Firefox以及其他浏览器看
  • 第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看
  • 第三排给IE6以及更老的版本看

最好的应用就是可以让IE6也“支持”position:fixed，而且，配合这个原理，可以做到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS如下写：

#class{
    position:fixed;
    _position:absolute;
    right:15px;
    top:15px;
    _top:expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop+15 :
    document.body.scrollTop +
    (document.body.clientHeight - this.clientHeight));
}

CSS 的自动换行问题：

div,p{white-space:normal;word-break:break-all;word-wrap:break-word;}
table{table-layout:fixed;}
table th,table td{word-wrap:break-word;overflow:hidden;}
pre{white-space:pre-wrap;word-wrap:break-word;width:auto;}

pre 下面添加宽度自动的属性是为了防止在 IE7 里面的某些情况下宽度失效。

另外附赠 收集到的常见浏览器的默认 CSS 样式，下载在这里

]]> http://xuui.net/librarys/css-techniques-to-collect-1.html/feed 15 CSS Reset Template http://xuui.net/ui-design/css-reset-template.html http://xuui.net/ui-design/css-reset-template.html#comments Tue, 20 Jul 2010 06:33:40 +0000 Xu.hel http://xuui.net/?p=1861 了解更多]]> Css Reset是什么? 有些同行叫 “css复位”, 有些可能叫 “默认css”.

CSS Reset 就是要重置 CSS 样式. 但是 CSS Reset 绝不仅仅是为了清除 html 元素默认表现,而是为了更好的统一各种浏览器下面的表现从而使得我们避开各种浏览器 BUG 所带来的问题, 所以”重 置”这个词很恰当. 需要注意的是: Reset 不是万能的! 随着时间的流逝和技术的进步, Reset也应相应的变化.

Reset CSS 能够达到使浏览器”统一”表现的作用.对于比较大点的项目,好处更加的明显.然而, CSS reset 却并没有一个 “一统江湖” 的唯一标准. 个人认为, CSS Reset 应该根据各种项目和不同需求去定制一套”最适合”的, 因为并不是所有的 html 元素都会在一个项目里面出现.

目前有三个 CSS Reset 方案可供我们使用:

对于这三套方案,我更倾向于射雕的KISSY CSS Reset,原因是:更适合中国国情.当然,这三套方案都不是适合于你直接使用的,因为没有最好,只有最适合.你需要根据你的需要进行添加,修改或者删 除.这里有一些延伸阅读可以帮助你进行接下来的工作:

html5是个不那么新鲜的事物了,大家纷纷去”体验”超前的技术.然而,html5要真正的铺开来,还有待时日.但是国外的同学总是那么的”超前”于我 们,这不,对于html5的CSS Reset已经出来. 点这里查看 html5 的 CSS Reset.

我参考了其他网站的 CSS Reset 有结合自己工作中的实际经验. 自己写了一个模板出来. 这个模板在 CSS Reset 的基础上又加入了 在项目中经常遇到的文字自动换行的样式定义, 还有 html5 的部分标签重置的样式. 也有比如 单选框的文字对齐的问题,和小图片的垂直居中排版对齐的文件.

感兴趣的可以在这里下载来看看. 使用的时候就按照自己的需求来进行删减了. 下载在这里:

注意该文件使用 BSD 协议发布。你可以依照 BSD 协议任意使用。

]]> http://xuui.net/ui-design/css-reset-template.html/feed 3 中文字体的英文名称对照表 http://xuui.net/ui-design/english-name-of-chinese-characters-table.html http://xuui.net/ui-design/english-name-of-chinese-characters-table.html#comments Sun, 30 May 2010 14:12:35 +0000 Xu.hel http://xuui.net/?p=1809 了解更多]]>

有时css文件里面用到中文字体的时候由于字体编码的关系要使用到中文字体的英文字体名字.

然而有些中文字体的英文名字却不是那么好记. 所以我这里就搜集了一些.

中文名 英文名 Unicode Unicode 2
Mac OS
华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑
华文黑体 STHeiti \534E\6587\9ED1\4F53 华文黑体
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
丽黑 Pro LiHei Pro Medium \4E3D\9ED1 Pro 丽黑 Pro
丽宋 Pro LiSong Pro Light \4E3D\5B8B Pro 丽宋 Pro
标楷体 BiauKai \6807\6977\4F53 标楷体
苹果丽中黑 Apple LiGothic Medium \82F9\679C\4E3D\4E2D\9ED1 苹果丽中黑
苹果丽细宋 Apple LiSung Light \82F9\679C\4E3D\7EC6\5B8B 苹果丽细宋
Windows
新细明体 PMingLiU \65B0\7EC6\660E\4F53 新细明体
细明体 MingLiU \7EC6\660E\4F53 细明体
标楷体 DFKai-SB \6807\6977\4F53 标楷体
黑体 SimHei \9ED1\4F53 黑体
宋体 SimSun \5B8B\4F53 宋体
新宋体 NSimSun \65B0\5B8B\4F53 新宋体
仿宋 FangSong \4EFF\5B8B 仿宋
楷体 KaiTi \6977\4F53 楷体
仿宋_GB2312 FangSong_GB2312 \4EFF\5B8B_GB2312 仿宋_GB2312
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312 楷体_GB2312
微软正黑体 Microsoft JhengHei \5FAE\x8F6F\6B63\9ED1\4F53 微软正黑体
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1 微软雅黑
Office
隶书 LiSu \96B6\4E66 隶书
幼圆 YouYuan \5E7C\5706 幼圆
华文细黑 STXihei \534E\6587\7EC6\9ED1 华文细黑
华文楷体 STKaiti \534E\6587\6977\4F53 华文楷体
华文宋体 STSong \534E\6587\5B8B\4F53 华文宋体
华文中宋 STZhongsong \534E\6587\4E2D\5B8B 华文中宋
华文仿宋 STFangsong \534E\6587\4EFF\5B8B 华文仿宋
方正舒体 FZShuTi \65B9\6B63\8212\4F53 方正舒体
方正姚体 FZYaoti \65B9\6B63\59DA\4F53 方正姚体
华文彩云 STCaiyun \534E\6587\5F69\4E91 华文彩云
华文琥珀 STHupo \534E\6587\7425\73C0 华文琥珀
华文隶书 STLiti \534E\6587\96B6\4E66 华文隶书
华文行楷 STXingkai \534E\6587\884C\6977 华文行楷
华文新魏 STXinwei \534E\6587\65B0\9B4F 华文新魏
]]> http://xuui.net/ui-design/english-name-of-chinese-characters-table.html/feed 11 15个 HTML5 教程和参考手册 http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html#comments Mon, 10 May 2010 10:13:23 +0000 Xu.hel http://xuui.net/?p=1753 了解更多]]> 和以前的 HTML 版本不同，HTML5 带给网页设计师和开发人员更多幻想新事物的能力。使用符合语义结构的特定标记，使得现在的网页更符合语义化的需求。如内建的圆角视觉元素、以及对拖放式交 互的原生支持。尽管 HTML5 并没有完全得到主流浏览器的支持，但有些已经在尝试推进和试验新功能。为了鼓励对 HTML5 进行试验性的应用，也为将来更加丰富的应用做足准备，芒果整理收集了 15+ 有用的 HTML5 教程和参考手册。

教程

利用 HTML5 创建 iPhone 应用程序

html5 tutorial

使用 HTML5 和 CSS3 组合，编写向后兼容的代码

html5 tutorial

使用 HTML5 设计和编写超酷的 iPhone 应用程序网站

html5 tutorial

从零开始编写 HTML5 布局

html5 tutorial

HTML5 和 CSS3：即将使用的新技术

html5 tutorial

利用 HTML5 表单大做文章

html5 tutorial

使用 HTML5 设计博客

html5 tutorial

触摸未来：使用 HTML5 和 CSS3 创建一个优雅的网站

html5 tutorial

HTML5 的结构标签

html5 tutorial

编写基于 HTML5 和 CSS3 的单页面网站模板

html5 tutorial

如何使所有浏览器正确渲染 HTML5 – 甚至是 IE6

html5 tutorial

参考手册

HTML5 参考手册

cheat sheet

HTML5 视觉参考手册

cheat sheet

HTML5 图形参考手册

cheat sheet

HTML5 袖珍手册

html5 tutorial

英文原稿：15 Useful HTML5 Tutorials and Cheat Sheets | Web Designer Ledger
翻译整理：15+ 有用的 HTML5 教程和参考手册 | 芒果

]]> http://xuui.net/ui-design/15-useful-html5-tutorials-and-cheat-sheets.html/feed 4 评“15个CSS常识” http://xuui.net/librarys/15-css-knowledge.html http://xuui.net/librarys/15-css-knowledge.html#comments Tue, 22 Dec 2009 00:56:49 +0000 Xu.hel http://xuui.net/?p=858 了解更多]]> 1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200*200=40, 000 次，占用资源。
（不认同这个）

2、无边框。推荐的写法是 border:none;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源。
（的确是这样，不过这个在IE下有些问题要和背景一起用才有效）

3、慎用 * 通配符。所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。（不认同这个）

4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
（这是推荐的写法也是减少CSS文件体积的方法。）

5、样式放头上，脚本放脚下。不内嵌，只外链。
（不认同，因为内嵌可以解决部分CSS样式解析失效的问题，而且内嵌CSS一般都在大型网站中使用。）

6、坚决不用 CSS 表达式。
（反对）

7、使用 引用样式表，而不是通过 @import 导入。
（反对，这个要看具体应用了）

8、一般来说，PNG 比 GIF 要小，小得多。再者，GIF 中有多少颜色是被浪费的，很值得优化。（反对，png 不能做动画。）

9、千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
（反对，这个方法可以优化一下图片的JS预览效果）

10、正文字体最好用偶数，12px、14px、16px，效果非常好。特例，15px。
（反对15px，单数是英文字体的。）

11、block、ul、ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
（反对，这个看个人习惯）

12、段落之间，至少要有一倍行距。
（这个也是个人习惯，我认为是 1em）

13、强行指定某些元素的 line-height，正文 1.6 倍于文字大小，标题 1.3 倍。
（反对，通用的是 1.5）

14、中文标点用全角。英文夹杂在中文中，左右空格，半角。
（这个要看个人习惯）

15、中文字体的粗体和斜体，远离较好，利民利己。
（这点我基本无视）

查看原文请到这里，我的评价基本完成。

]]> http://xuui.net/librarys/15-css-knowledge.html/feed 8 [转]在CSS里面定义中文字体 http://xuui.net/librarys/inside-the-definition-of-chinese-characters-in-the-css.html http://xuui.net/librarys/inside-the-definition-of-chinese-characters-in-the-css.html#comments Mon, 23 Nov 2009 13:50:03 +0000 Xu.hel http://xuui.net/?p=825 了解更多]]> 有时候写在页面中的中文字体css样式有效果，将样式保存到css文件中，中文字体就没有效果了，浏览器版本低还可能影响其他样式的执行。解决办法如下：

1、将中文样式名换成英文名：

附Windows系统常见中文字体英文名称：
========================
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong  SimFang?
楷体：KaiTi    SimKai?
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微软雅黑体：Microsoft YaHei
隶书：LiSu    SimLi?
幼圆：YouYuan     SimYou?
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

但这些英文名在非ie的浏览器中是不能识别的，可以在页面的body中定义：

font-family:SimSun, “宋体”;

这样至少可以保证在几个浏览器中能够准确显示我要的字体样式。

2、包含css文件时，添加charset属性，注意css文件的编码，如：

<style href=”style.css” type=”text/css” rel=”stylesheet” charset=”utf-8″>

3、将css文件存为UTF-8 编码，在css文件开头添加以下语句：

@charset “utf-8″;

原文地址：http://blog.csdn.net/eastsea/archive/2009/09/14/4550551.aspx

]]> http://xuui.net/librarys/inside-the-definition-of-chinese-characters-in-the-css.html/feed 1 iDm Studio Test http://xuui.net/themes/idm-studio-test.html http://xuui.net/themes/idm-studio-test.html#comments Tue, 02 Jun 2009 10:12:49 +0000 Xu.hel http://xuui.net/?p=738 iDm Studio 暂时叫这个名字吧。现在上线测试了。

还有部分插件的支持还在调整中，等几天有空了再弄了。最近很忙。

目前 FF 下正常。发现问题就请留言哈。

PS：NeoVFX 改版了，有兴趣的可以逛逛去。

终结者4里面是有州长客窜的，出现的具体时间是保密

1:20:00 左右出现

]]> http://xuui.net/themes/idm-studio-test.html/feed 6