石周明

1.CSS字体属性简写规则 一般用CSS设定字体属性是这样做的： font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif; 但也可以把它们全部写到一行上去： font: bold italic small-caps 1em/1.5em verdana,sans-serif; 真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。 2. 同时使用两个类 一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样： <p class="text side">…</p> 同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。 补充：对于一个ID，不能这样写<p id="text side">…</p>也不能这样写 3. CSS border的缺省值 通常可以设定边界的颜色，宽度和风格，如： border: 3px solid #000 这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。 如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。 4. CSS用于文档打印 许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。 也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印： <link type="text/css" rel="stylesheet" href="../../../stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="../../../printstyle.css" media="print" [...]

老外写的.如何写出漂亮的HTML代码.总结的不错.拿出来分享一下. 1.DOCTYPE Properly Declared 别忘记头部的声明.它会告诉浏览器如何渲染你的HTML. 2.Tidy Head Section 设置title,字符集.将CSS和JS外链(包括一个打印用的CSS). 3.Body IDed 给body一个ID.这里作者提到的原因是.为多页面的中容器选择提供便利.比如通过给page1和page2中BODY设置不同的ID.就可以通过#page1 h2和#page2 h2来设置两种不同的效果.我感觉这个到是要看情况和具体架构再具体使用. 4.Semantically Clean Menu 编写符合语意的菜单代码. <div id=”menu”> <ul> <li><a href=”index.php”>Home</a></li> <li><a href=”about.php”>About</a></li> <li><a href=”contact.php”>Contact</a></li> </ul> </div> 5.Main DIV for all Page Content 要有一个主体DIV包含所有的内容.方便固定主体的宽度,边距等等. 6.Important Content First 先写主要内容,再写次要内容.如果你的导航或者侧边栏不是很重要,最好将他们写在最后. 7.Common Content INCLUDED 将导航,页尾等公用的部分用动态调用的方式引入,比如PHP的include. 8.Code is Tabbed into Sections 缩进代码. 9.Proper Ending Tags 注意结束标签 10.Hierarchy [...]

黄金分割前不久在Taobao UED Team上看过玉伯的分析,当时觉得挺有意思,还着实研究了一番,正好这几天在写一个静态网站,按那个比例设计出来效果的确不错.今天又看到一篇写黄金分割的,这个没有玉伯的详细,但把最主要的东西写出来了… 以下是原文: 希腊Web 设计师Christos Chiotis 发表在 CssGlobe 的一篇文章，讲述了黄金分割率在 CSS 中的应用。黄金分割率是一个应用广泛的数学常数，大约为 1.6180339887。黄金分割率用在 Web 设计中，可以为设计带来更多视觉上的和谐。 在一个简单的两栏式页面布局中，使用两个容器，第一个容器用来显示主要内容，第二个容器显示侧条。比如，页面宽度为 960 px，使用黄金分割率，主内容容器的宽度应该为 960 / 1.62 = 593 px，而侧条的宽度为 960-593=367 px。 作者建议，在 Web 排版与布局中可以使用以下基本 CSS 设置 line-height = font-size * 1.62 paragraph margin = paragraph line-height * 1.62 / 2 header’s margin-top = headers line-height * 1.62 不过对中文而言，至少 font-size 和 [...]

直入正题，现在有这么一个表格： 请实现鼠标移到交易内容区域时，高亮当前行背景的效果。 1、建立一分标准的HTML文档结构 谈到标准HTML结构，有人可能会说，嗯，用div标签，里面再多套些li，最后用css来个float也就能排成这样的结构了。其实真正标准的结构并不是说一定要用div来布局，而是要尽量使用语义化的HTML标签。在HTML标签的定义中div与span其实是两个没有语义的标签，table则有数据表的语义。 所以这里我们来建一张符合XHTML 1.0 Strict标准的文档结构试试。以下为该表结构的HTML代码： 交易类型 交易号 收款方 金额 管理 上一页 2 3 4 下一页 即时到账 20081009001 其中需要注意的是： 你需要使用<thead />、<tbody />、<tfoot />等标签，分别对应的含义是表头区域，表主体内容，表底部区域。 表头区域的单元格你应该使用<th />而非<td /> <tfoot />标签块应该在<thead />与<tbody />之间，否则无法通过W3C标签验证 再给它们加上样式： .tableList { border:2px #666 solid; } .tableList td, .tableList th { border:1px #666 solid; padding:5px 25px; } .tableList tfoot td { text-align:right; } [...]

网易右键邮是网易去年推出的一款邮箱桌面工具，通过网易自身推广平台已经聚集了一批忠实的用户，但我平时很少发邮件，收发基本都是用公司的outlook。 刚推出的时候，我安装试用了一下，感觉不错。软件小巧轻便，整个界面也很简约易用，下面和大家一起来看看它的界面··· 怎么样？是不是看着很舒服？相对于web版，界面相对比较简单，一目了然，只要会操作电脑就会用右键邮发mail。 下面再来看看它的一些细节 看看左边的红色框内的文字提示，是不是感觉很不错？只要不是文盲，就知道怎么用这样一个小小的邮件桌面端来发附件。 如果你把一个文件拖进去了，然后想想又不想把它作为附件发送了，那该怎么做呢？这个大家可以自己去下载然后试用一下就知道了··· 尽管是如此简单的一个界面，但个人认为还是有很多地方值得我们学习，比如： ·左侧写信区域的字体 颜色 字号的统一 input的样式统一 附件提示语的字体的颜色 字号 以及前面的小图标 ·右侧通讯录的表现方式 ·界面里a的样式统一性 ·发送和取消按钮相对于整个界面的协调性都是值得我们学习的地方

很多时候 相信大家都会用到空格进行排版 但是原生的空格（也就是用空格键硬敲出来的空格，这里所指的原生空格也并非是全角空格）往往连续的空格不会起作用 你在DW里代码视图编辑状态下敲一个空格和敲一万个空格是一回事 那么这里告诉大家一个简单的css设置 就可以让多个连续的空格起作用 只要加上这句white-space: pre;就可以了 可以参见css2.0手册里对white-space的介绍： pre : 　用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。 希望这个小技巧对大家有用

天天用Firebug，常用功能就不多啰嗦，下面是Taobao UED前端们的私家珍藏秘笈： 快速查看背景图 大部分情况下，Firefox自带的右键就搞定了： 但有时，只能通过CSS找到背景图片地址： 通常做法是： 要准确无误的选中URL部分，即辛苦又没成就感…… 秘技： Ctrl + 左键点击URL部分，图片自动就在Firefox新页面中打开了，嘿嘿。 本质：在Firebug的HTML和CSS视图中，任何出现URL的地方，Ctrl+左键点击都能快速打开链接。 快速更改CSS数值型属性值 传统的做法是，在CSS视图中，点击属性值，然后修改数值，回车确认，反复重复操作，以查看效果，苦不堪言。 秘技： 编辑状态下，按 Up/Down 方向键就可以快速改变数值型属性值了，还可以用 PgUp/PgDn 每次改变10. 缩写的多个属性值，也可以将光标定位到要改变的数值属性处，通过 Up/Down 快速调节： 还有一个：CSS视图，双击空白处，快速添加属性