好的设计没有周详的计划是不可能实现的，而数学在这个计划中有着举足轻重的作用。
有人可能会说我早就知道了，比如算什么margin或是padding的，算高度什么的，这个应该就是你所说的在设计中运用的数学吧？其实不然。应该说我的数学有更高一层的意义（脸皮比较厚）。
我觉得我在这里和大家讲几千个字，还不如给大家一个真实的例子。让大家看看我在做设计前的一些“准备工作”。
最近我正在设计一个教会网站，我一边设计一边把一些截图发到方格本上获取一同行们的意见和反馈，但是大家并没有看到这些设计背后蕴藏的”玄机”。
这篇文章并不是教大家怎样做设计，而是教大家通过一些“工具”把你的设计变的更合理，更平衡；同时也要记住，规则是死的，人是活的，怎样遵守规则的同时破坏规则是决定你是否能成功的关键。
废话不多说了，现在进入正题！
在你设计任何一个网页之前有一些东西你是应该尽快做出决定的。其中最主要一个东西应该是页面的宽度，我个人是比较喜欢960px作为宽度，即使用户使用的是1024＊768的分辨率，网页也不会出现横向移动 － 当然你可以使用任何宽度。
第一步已经完成了，我们进入第二步。
接下来我们要把这个960px的宽度纵向划分为12或者16个区域，请看下方图示。今天我会选择12纵向区域，所以每一个纵向区域应该是60px宽，而且每一个纵向区域的左边和右边都有一个10px的空间，用数学的语言来表达就是： 12*60+24*10=960px， 总和等于我们的页面宽度－960px。 继续阅读 »
如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。今天我们主要是讲解如果用CSS3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS3的解析，只有还不太主流的IE9支持CSS3和HTML5的标准。让IE支持CSS3的解析方法有很多种，下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角：
1、下载一个压缩包，里面有一个微软的脚本文件（11KB）和一个用来测试服务器是否有正确的Content-Type的HTML文件：iecss3.rar；.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性，程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。 继续阅读 »
我们在编写CSS样式的时候，往往或遭遇CSS样式的修改或者界面设计的变更，页面的CSS在经历几个版本的修改之后，可能有些样式已经用不到了，或许将 某些样式更名了而原来的忘了删除，总之页面中可能存在着一些无用的样式。这些无用的浪费了一些服务器空间和带宽消耗，也会增大我们的维护成本。那么有没有 一些办法来清理那些无用的样式呢？今天就让我们来了解一下几个比较有用的工具。
一、Dust-Me selectors
Dust-Me是一个很有用也很好用的Firefox插件，它可以分析到你的页面中调用的所有CSS文件并分析那些在页面中没有被用到。
支持本地和远程样式文件，包括使用<link>标签、<?xml-stylesheet?>处理指令、@import语句等方式引入的样式文件；(但是不支持页面中的<style>块和内联样式)
支持IE条件注释中引入的样式文件；
可以检查一个页面，也可以检查整个网站；
支持CSS1选择器、大部分CSS2和CSS3选择器；
理解通用的CSS hack，比如 “* html #fuck-ie”将会被认为是”html #fuck-ie”；
支持Firefox 3.5和Firefox 3.0，事实上得益于FF 3.5的js引擎的改进，FF 3.5中的性能比FF 3.0要高50%。 继续阅读 »
CSS透明技巧概总：这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。
关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。
一、旧的Opacity设置
以下代码是Firefox和Safari旧版本所需的透明度设置:
1
| #myElement { -khtml-opacity: .5; -moz-opacity: 0.5; } |
-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。
第二行使用专用属性 -moz-opacity是 为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。 Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Gecko引擎）已经不在支持这个属性。
继续阅读 »
临近春节，作为站长自然要体现人性化的一面，给你的访客进行拜年，那么如何在网站首页加入春节贺年背景呢？TechSEO为大家奉献一个。
在上面加入以下代码：
1
2
3
4
5
6
| <style>
body.rabbitin{background:url(http://www.oxbridgedu.org/ad/bg.jpg) center 0 no-repeat; padding-top:120px;}
#navigation{width:950px;margin:0 auto;position:relative;}
#navigation h1{height:105px;}
#navigation b{position:absolute;right:0;top:-20px;background:#F60;color:#fff;cursor:pointer; font-size:12px; font:"微软雅黑"; font-weight:normal;}
</style> |
继续阅读 »
学习HTML5必然有一套上手的工具，Dreamweaver CS5再合适不过了，另外还有HTML5开发包，整理出来一并下载。
Adobe Dreamweaver CS5 官方简体中文完整正式版
软件大小：203 MB 软件语言：简体中文
适用系统：WinXP (x86)/WinVista (x86)/Win7 (x86)
迅雷下载一（电信） 迅雷下载二（网通） DW破解补丁下载 HTML5&CSS开发包ForDW5下载
原 Pre-release 版序列号经验证可以使用。激活方法见下。
软件运行如果遇到“14001:并行配置错误”、“15002:应用程序初始化错误”或点击运行之后长时间无反应的情况，请安装 VC2008 运行库。 继续阅读 »
CSS 3.0 参考手册 (中文版)版本号：beta1 (最后更新时间：2009-8-22)
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
手册难点
1.中文资料少，对英文翻译功底要求较高；
2.基础语法要求字斟句酌，避免产生歧义；
3.兼容性列表涉及浏览器及版本众多；
4.草案中的Grid布局被业界同仁普遍认为比“天书”还难…
CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。 继续阅读 »
近来html5热度很高，有时间坐下来研究一下，很多和我一样的新人可能无从下手，这里整理了一份html5中文手册可提供大家下载。
HTML5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。本文专题将带您体验HTML 5，深入下一代Web开发标准。
html5中文手册 继续阅读 »
div中LI超出宽度换行虽然是个小问题，也是老生常谈，但还是会经常遇到，这里整理出来以备查阅：
CSS样式部分：
1
2
3
4
5
6
7
8
9
10
11
| div{
width:200px;
overflow:hidden;
white-space:nowrap; /*强制内容不折行显示*/
border:#333 1px solid;
}
div ul li{
display:inline-block;/*Firefox3 beta、IE8 beta、Opera、Safari 支持*/
display:-moz-inline-stack;/* Firefox 的私有属性，也可以用 -moz-inline-box */
*display:inline;/*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
} |
HTML代码部分：
1
2
3
4
5
6
7
8
9
10
11
| <div>
<ul>
<li>传说中的测试文字</li>
<li>传说中的测试文字</li>
<li>传说中的测试文字</li>
<li>传说中的测试文字</li>
<li>传说中的测试文字</li>
<li>传说中的测试文字</li>
<li>传说中的测试文字</li>
</ul>
</div> |
预览效果自己测试去吧