产品设计

细节决定成败

由 kailysky 撰写 | 2008/11/23 23:06 发表在产品设计 | 评论 (0)

突然发现周五的新闻还没上，可能是没收到。好就没做这细活了，认真上了一番，真不容易。
首先编辑器的问题还是有有写毛病，需求跟程序那边做出来的效果不一样，导致老出现一些小差错返工率偏高。然后就是一些小的东西，编辑CMS做的时候可能是针对大部分人来订，当自己要用的时候还是最好把它调为自己最合适的。但关键是要整理出来，并寻求办法解决，那样才会进步。行动，比如被弹窗弹了几个星期了，居然无动于衷，旁人看着都着急，但他习惯了。
这有点跟我的脸差不多呵呵，习惯是一件很KB的事。

比如常用的几个颜色。可以直接放在上面，不用弹出来选。插入图片人性化一点。毕竟现在流行图文并茂。
等等。。用工具，利用现有资源，程序，来提高效率。

CSS常用标签

由 kailysky 撰写 | 2008/11/20 17:17 发表在产品设计 | 评论 (0)

用了一段CSS 布局设计网页,发现自己的命名有点混乱,完全按照自己的想法命名,虽然没什么影响,有不给别人看源文件,但是工作室有时候和团队合作完成项目的时候,就遇到麻烦了,要修改一个地方相当的费事.所以还是有个标准比较好啊!
在网上看到的一个相关的参考,再加上平时也研究别人的代码,发现这样的命名使用很广泛!我再加上自己的经验,希望对看到这篇文章的人能有用!

命名规范

常用的CSS命名规则：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如user-list

常用代码结构：

div：主要用于布局，分割页面的结构
ul/ol：用于无序/有序列表
span：没有特殊的意义，可以用作排版的辅助，例如

Example Source Code [www.52css.com]

<li><span>(4.23)</span>天幻网六周年天幻网六周年天幻网六周年天幻网六</li>

然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

h1-h6：标题
h1-h6 根据重要性依次递减
h1位最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：

Example Source Code [www.52css.com]

fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：

Example Source Code [www.52css.com]

<form>
<fieldset>
<legend>title</legend>
<label for="user-password">密　码</label>
<input type="password" name="password" id="user-password" />
</fieldset>
</form>

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如

Example Source Code [www.52css.com]

<dl>
<dt>什么是CSS?</dt>
<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
<dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>
</dl>

Example Source Code [www.52css.com]

C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名：
根据w3c网站上给出的,最好是用意义命名
比如：是重要的新闻高亮显示（像红色）
有两种

Example Source Code [www.52css.com]

.red{color:red}
.important-news{color:red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字。

DIV+CSS命名规范

由 kailysky 撰写 | 2008/11/20 16:53 发表在产品设计 | 评论 (0)

命名对于网页的开发管理的重要性往往被人忽略，很多初学者认为，css命名没什么，就是个名字而已，随便根据自己的意愿写就行了，因为它对于网页的表现没有任何影响。可是有过网页制作和网站管理经验的人都会知道，css的命名对于网站的清晰和日后的管理很重要，初学者应该从一开始就学习和尊重这些规范，形成良好的代码编写习惯，对于以后网站的建设、维护和改造有着至关重要的影响。下面是作者列出的一些css常用的规范性命名，这些名字已经成了网页设计规范，在网页设计中我们应该遵循这些规范性的名字。
注意css中是区分大小写的。

站点：site
首页：homepage
导航：nav
布局：layout
搜索：search
网页头部：head/header
二级页面/子页面：subpage
登录条：loginbar
侧栏：side/sidebar
广告：banner
子导航：subnav
当前位置导航：crumb
菜单：menu
子菜单：submenu
滚动：scroll
下拉：drop
表单：form
箭头：arr/arrow
下拉菜单：dropmenu
主题/外观：theme
页面主体：main
内容：content
标签页：tab
列表：list
工具条：tool/toolbar
转角/圆角：cor/corner
提示信息：msg
小技巧：tips
标题：title
特别的：spec
资源：source
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
关于我们：aboutus
网站地图：sitemap
合作伙伴：partner
友情链接：friendlink
网页底部：foot/footer
版权：copyright
提交：submit
搜索框：searchbox
文本框：textbox
统计：count
以上结构就可以组合使用，例如：左列标题lefttitle；底部导航footernav

　　规范不是说要所有人照一个样子来命名css，我们可以根据自己的需要定制命名规则，只要记住命名的规则，就可以根据网站本身的特点来创造具有自己风格的命名方式。
一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class，我们可以使用f即foot的头字母为前缀进行命名，如：
f-blue：表示蓝色字体样式
f-blod：表示粗体字体样式
对于网页中如新闻频道的一些新闻的现实样式，可以用n作为前缀进行样式设计，如：
n-title：新闻标题
n-list：新闻列表
二、我们还可以将代表各个部分的名字组合起来使用，如　，对于上面的例子，我们可以这样命名：
fontBlue：表示蓝色字体样式
newsTitle：表示新闻列表
这样的命名方式同样清晰明了，为大多网页设计师所接受，只不过要特别注意大小写的区分，css中是区别大小写的．开始时容易出错，多加注意便可．
按照这样的一些命名方式，我们可以非常明确的知道css中的每一个class的用途，便于使用和设计、维护。
想一想，你要想出很多名字来命名css也很麻烦的，是吧？

———– 另外一个规范 ——————-

1.CSS ID 的命名
外　套：　　wrap
主导航：　　mainnav
子导航：　　subnav
页　脚：　　footet
整个页面：　content
页　眉：　　header
页　脚：　　footer
商　标：　　label
标　题：　　title
主导航：　　mainbav（globalnav）
顶导航：　　topnav
边导航：　　sidebar
左导航：　　leftsidebar
右导航：　　rightsidebar
旗　志：　　logo
标　语：　　banner
菜单内容1： menu1 content
菜单容量：　menu container
子菜单：　　submenu
边导航图标：sidebarIcon
注释：　　　note
面包屑：　　breadcrumb(即页面所处位置导航提示）
容器：　　　container
内容：　　　content
搜索：　　　search
登陆：　　　Login
功能区：　　shop(如购物车，收银台)
当前的　　　current

2.另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

这里还有好多。
http://hi.baidu.com/momoca/blog/item/aae2b6fd4277931709244d2f.html
http://hi.baidu.com/fzcskycn/blog/item/cbe8788d289e7114b21bbabf.html

div左右居中，上下居中

由 kailysky 撰写 | 2008/11/20 16:18 发表在产品设计 | 评论 (0)

要想让图片左右对齐，我们可以在div里写入”style:text-align:center;”

大部分人可能会考虑使用vertical-align:middle来使图片居中，加上去看看没有出现效果，这里我们针对图片设置如下代码：style=”_margin-top: expression(( 300 – this.height ) / 2);发现在IE6下效果实现了，再看看IE7和firefox, 没有变化，这里我们针对IE7和firefox来设置，在div里写入

line-height:300px;vertical-align:middle,发现IE7这时候也有效果了，这里的line-height:300px;是根据div的高度定的.那么，这时候IE解决了

看一下firefox图片还没垂直居中，再对div增加样式:display:table-cell,现在再看看firefox也好了。

参考代码：

< div style="width:300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell">
< img src="aaaa.jpg" mce_src="aaaa.jpg" style="_margin-top: expression(( 300 – this.height ) / 2);" />
< /div >

原文链接：http://www.5252it.cn/blog/read.php/54.htm

——————————————————————————————————————————————–

上面的办法主要是针对图片的居中。

——————————————————————————————————————————————–

在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面布局过程中实现垂直居中的方法。

在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。

一、单行垂直居中

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。如：

div {
        height:25px;
        line-height:25px;
        overflow:hidden;
}

这段代码很简，后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。更多CSS教程。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 单行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
  height:25px;
  line-height:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>

不过在Internet Explorer 6及以下版本中，这和方法不支持对图片设置垂直居中。

二、多行未知高度文字的垂直居中

如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的padding值相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全填充的一种访求而已。可以使用类似下面的代码：

div {
padding:25px;
}

这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
</style>
</head>
<body>
<div><pre>现在我们要使这段文字垂直居中显示！
div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
}
</pre></div>
</body>
</html>

三、多行文本固定高度的居中

在本文的一开始，我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

div#wrap {
    height:400px;
display:table;
}
div#content {
vertical-align:middle;
    display:table-cell;
   border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
<
/style>
</head>
<body>
<div id="wrap">
<div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
  height:400px;
  display:table;
}
div#content {
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
}
</pre></div>
</div>
</body>
</html>

这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。

四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后，如果再对子元素进行百分比计算时，计算的基础似乎是有继承性的（如果定位的数值是绝对数值没有这个问题，但是使用百分比计算的基础将不再是该元素的高度，而从父元素继承来的定位高度）。例如，我们有下面这样一个(X)HTML代码段：

如果我们对subwrap进行了绝对定位，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进行相对定位的时候，你使用的100%分比将不再是content原有的高度。例如，我们设定了subwrap的position为40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么，如果我们设定subwrap的top:50%的话，我们必须使用100%才能使content回到原来的位置上去，但是如果我们把content也设置50%呢？那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中：

div#wrap {
    border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
position:relative;
}
div#subwrap {
position:absolute;
    border:1px solid #000;
    top:50%;
}
div#content {
    border:1px solid #000;
    position:relative;
    top:-50%;
}

当然，这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。（不过我不解，我查阅了很多文章，不知道是因为出处相同还是什么原因，似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理，我也只是了解了一点皮毛，还要再研究）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  position:relative;
}
div#subwrap {
  position:absolute;
  top:50%;
}
div#content {
  position:relative;
  top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
}
div#subwrap {
  position:absolute;
  border:1px solid #000;
  top:50%;
}
div#content {
  border:1px solid #000;
  position:relative;
  top:-50%;
}</pre>
  </div>
</div>
</div>
</body>
</html>

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案，不过这要用到CSS hack的知识。对于如果使用CSS Hack来区分浏览器，你可以参考这篇“简单CSS hack：区分IE6、IE7、IE8、Firefox、Opera”：

div#wrap {
    display:table;
    border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
   overflow:hidden;
}
div#subwrap {
    vertical-align:middle;
    display:table-cell;
   _position:absolute;
   _top:50%;
}
div#content {
   _position:relative;
   _top:-50%;
}

至此，一个完美的居中方案就产生了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div#wrap {
  display:table;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:400px;
  _position:relative;
  overflow:hidden;
}
div#subwrap {
  vertical-align:middle;
  display:table-cell;
  _position:absolute;
  _top:50%;
}
div#content {
  _position:relative;
  _top:-50%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="subwrap">
   <div id="content"><pre>现在我们要使这段文字垂直居中显示！
div#wrap {
  border:1px solid #FF0099;
  background-color:#FFCCFF;
  width:760px;
  height:500px;
  position:relative;
}
div#subwrap {
  position:absolu
te;
  border:1px solid #000;
  top:50%;
}
div#content {
  border:1px solid #000;
  position:relative;
  top:-50%;
}</pre>
  </div>
</div>
</div>
</body>
</html>

p.s. 垂直居中vertical-align的值是middle，而水平居中align的值是center，虽然同是居中但关键字不同。

table中css控制 css的border-collapse

由 kailysky 撰写 | 2008/11/19 15:40 发表在产品设计 | 评论 (0)

table中css控制 css的border-collapse

seperate 的边框如下：

|| ||
|| ||

collapse 的边框如下:

| | (两个相邻单元格的相邻边合并了)

下拉链接列表

由 kailysky 撰写 | 2008/11/03 15:50 发表在产品设计 | 评论 (0)

下拉链接列表样式
<select onchange=”javascript:window.open(this.options[this.selectedIndex].value);” size=”1″> <br /> <option selected value=”http://www.ads8.com/xx.php3?tid=13767″>赚钱网</option> <br /> <option value=”http://www.ads4cn.com/union/lead.asp?fkue00″>网上赚钱</option> <br /> <option value=”http://jzlh..home.sunbo.net”>甲子的天空</option> <br /> <option value=”http://asp2.6to23.com/goshyboy/mianfeidaima.html”>代码网站</option> <br /> <option value=”hthttp://www.ip138.com”>输入手机号即</option><br /> <option value=”http://88cy007.home.sunbo.net”>自由天空</option> <br /> </select>

上面的网址请读者自己改动！谢谢

整理css一些小问题（整理）

由 kailysky 撰写 | 2008/10/31 17:11 发表在产品设计 | 评论 (0)

段落用用缩进定义就省了敲空格了。

还有有时候IE6出现样式怎么读都读不了，请检查是不是CSS编码出问题了。

出问题时一般先检查是不是拼写错了。拼写错了在火狐是不出现那个属性的。

还有很多多，慢慢整理。

css背景半透明

由 kailysky 撰写 | 2008/10/31 17:07 发表在产品设计 | 评论 (0)

你需要把filter:alpha(opacity=50)添加到你想要处理成半透明的那张图片的后面，比如说，我现在想把我的header图片变成半透明的，那么就要在那张图片的后面加上这个，最后写成：
#header{background:url(http://hiphotos.baidu.com/lazycandy/pic/item/571b251fce65d1c8a6866960.jpg);filter:alpha(opacity=50)}
最后的效果就是顶部图片半透明了。

就是说，你想要哪个模块半透明，就先找到那个模块，再在它的background后加上filter:alpha(opacity=50)，数字可以自己改，50正好半透明。

transpanrent呢就不能调整透明度，就是全透明的效果，可以直接看到背景图，用法是｛background:transparent｝,当然，也要先找对模块。

IE浏览器下同一网页多图片显示的瓶颈与优化[zz from 张宴]

由 kailysky 撰写 | 2008/10/28 07:28 发表在产品设计 | 评论 (0)

Internet Explorer 浏览器在同一时刻只能从同一域名下载两个文件。

至于原因请见 MSDN Blogs：《Internet Explorer and Connection Limits》，如何解除限制请见微软客户帮助与支持主页：《如何将 Internet Explorer 配置为可以同时进行两个以上的下载会话》。

不管 Firefox 有多火，无可否认，IE 仍然是浏览器市场的老大。所以，在做系统架构时，不得不去考虑 IE 同时只能从同一域名下载两个文件的限制。如果超过两个文件，IE 将会以队列形式等待两个文件下载完毕，再去下载接下来的两个文件。这样，当在一个页面显示多张图片时，IE 用户的图片下载速度就会受到影响。

百度、新浪、雅虎等网站采用了同一组图片服务器，使用多个二级域名的方式来解决这个问题。

通过 HttpWatch Professional 5.2.17 分析可以看出，百度的图片搜索采用了 t1.baidu.com ～ t8.baidu.com 八个域名来显示图片，消耗在 IE 浏览器端的 Blocked 时间小于0.001秒，非常快。

新浪的图片 CDN 同样采用了 i0.sinaimg.cn ～ i3.sinaimg.cn 四个域名来显示图片，消耗在 IE 浏览器端的 Blocked 时间也是0.001秒。新浪采用独立的顶级域名 sinaimg.cn 而非 ***.sina.com.cn 域名作为图片服务器域名，还有一个好处，就是 sina.com.cn 域下的 Cookie 信息不会被带到 sinaimg.cn 域下，提高了图片服务器解析 header 头的速度。

再看网易相册的一组图片服务器，只使用 pics.photo.163.com 一个域名，消耗在 IE 浏览器端的 Blocked 时间为0.647秒，就比较慢了。

margin padding缩写

由 kailysky 撰写 | 2008/10/08 21:54 发表在产品设计 | 评论 (0)

CSS代码简化在工作中是非常有益的，也是必要的。在编写CSS代码时，经常会出现冗余的代码，为了提高代码的质量及文件压缩到最小，使代码具有可读性，不得不把CSS代码简化。下面用一些比较常用的属性来做示例。

margin

　　margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
代码简化为：margin:1px

　　margin-top:1px;
margin-right:2px;
margin-bottom:1px;
margin-left:2px;
代码简化为：margin:1px 2px 上下，左右，

　　margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:2px;
代码简化为：margin:1px 2px 3px 上，左右，下。

　　margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;
代码简化为：margin:1px 2px 3px 4px

　　注意：当属性值是0的时候单位可以不写如：0px 直接就写成0

padding

　　padding的书写方法和margin相类似

　　padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
代码简化为：padding:1px

　　padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
代码简化为：padding:1px 2px

　　padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
代码简化为：padding:1px 2px 3px

　　padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
代码简化为：padding:1px 2px 3px 4px

border

　　border-width:1px;
border-style:solid;
border-color:#000000;
代码简化为：border:1px solid #000

background

　　background-color:#CCFFFF;
background-image:url(图片路径);
background-repeat:repeat-x;
background-position:5px 4px;
代码简化为：background:#CFF url(图片路径) repeat-x 5px 4px

font

　　font-size:26px;
font-weight:bold;
font-family: “宋体”;
代码简化为：font:26px bold “宋体”

color属性值

　　color:#000000;
color:#ff0000;
代码简化为：color:#000, color:#f00

凯阔天空

细节决定成败

CSS常用标签

DIV+CSS命名规范

div左右居中，上下居中

一、单行垂直居中

二、多行未知高度文字的垂直居中

三、多行文本固定高度的居中

四、在Internet Explorer中的解决方案

五、完美的解决方案

table中css控制 css的border-collapse

下拉链接列表

整理css一些小问题（整理）

css背景半透明

IE浏览器下同一网页多图片显示的瓶颈与优化[zz from 张宴]

margin padding缩写

分页

分类

存档

搜索

RSS源

Meta