css文档中心

由于各浏览器的默认CSS样式不一样，我们必须写一个CSS Reset统一起来。
通常我的做法是在common.css里写全局控制，这里面也包括header和footer，其它CSS文件就通过@import url(”
common.css”);引用。
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-
family:Arial;}
form,ul,ol,h1,h2,h3,h4,h5,h6,p{margin:0;padding:0;list-style:none;}
input,textarea,select,button{font-size:12px;}
img{border:none;}
address,cite,small{color:#999;font-style:normal;font-size:12px;}
a{color:#09c;text-decoration:none;}
a:hover{text-decoration:underline;}
#header{...}
#footer{...} ......

首先介绍一下eidtarea：
EditArea是一个javascript源代码编辑器。支持：文本格式化，搜索与替换，实时语法着色加亮。当前支持的语言包括：PHP、CSS、
Javascript、Python、HTML、XML、VB、C、CPP、SQL、Pascal、Basic、Brainf*ck
下载地址：http://sourceforge.net/projects/editarea/
可以作为很好的在线编辑工具 ......

嵌入式SGF查看和编辑器
EidoGo Player
(SGF viewer and editor) 是一款开源（AGPLv3
许可）纯javascript+css编写、在浏览器内运行的围棋打谱、编辑软件。
可嵌入到任何页面，提供打谱、编辑SGF棋谱。
源代码：http://code.google.com/p/eidogo/
例子：第24届天元战本赛第1轮 2010-01-27 常昊vs罗洗河白中盘胜
(
TE[第24届天元战本赛第1轮] RD[2010-01-27 ] PC[] TM[] LT[] LC[] KO[7.5]
RE[白中盘胜] PB[常昊] BR[] PW[罗洗河] WR[]
;B[pd];W[dd];B[qp];W[dp];B[fq];W[dn];B[kq];W[fc];B[cl];W[cj];B[el];W[go];B[hp];W[cm];B[bk];W[ej];B[eo];W[ck];B[cd];W[ce];B[de];W[cc];B[bd];W[be];B[dk];W[bl];B[dl];W[bm];B[dj];W[di];B[ci];W[bj];B[ee];W[dh];B[ed];W[dc];B[ec];W[eb];B[db];W[fb];B[bc];W[cb];B[bb];W[da];B[cg];W[bg];B[ch];W[df];B[cf];W[bf];B[bh];W[ff];B[ef];W[dg];B[ag];W[bi];B[ah];W[eg];B[ae];W[nc];B[en];W[eq];B[do];W[co];B[cp];W[cq];B[bp];W[bq];B[pf];W[fp];B[ep];W[dq];B[gq];W[gm];B[fm];W[gl];B[gn];W[hn];B[fo];W[ne];B[pi];W[og];B[of];W[nf];B[ng];W[mg];B[nh];W[mh];B[mi];W[li];B[mj];W[lj];B[lk];W[ni];B[oh];W[mk];B[nj];W[ ......

边框风格属性(border-style)
这个属性用来设定上下左右边框的风格，它的值如下：
none (没有边框，无论边框宽度设为多大)
dotted (点线式边框)
dashed (破折线式边框)
solid (直线式边框)
double (双线式边框)
groove (槽线式边框)
ridge(脊线式边框)
inset (内嵌效果的边框)
outset (突起效果的边框)
边框宽度属性(border-width)
这个属性用来设定上下左右边框的宽度，它的值如下：
medium (是缺省值)
thin (比medium细)
thick (比medium粗)
用长度单位定值。可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。
演示示例：分别用medium, thin, thick和长度单位定制的CSS边框宽度属性示例
边框颜色属性(border-color)
这个属性用来设定上下左右边框的颜色。例句如下：
.d5 {border-color:gray;border-style:solid;}
演示示例
边框属性(border)
这个属性是边框属性的一个快捷的综合写法，它包含border-width, border-style和border-color。例句如下：
.d1 {border:5px solid gray;}
演示示例
单边边框属性
上下左右四个边框不但可以统一设定，也可以分开设定。
设定上边框属性，你可以使用border-top, border- ......

图片自动适应大小的问题在平时制作的时候是比较常见的问题，下面提供一个比较简单的解决方法：
div img {
max-width:600px;
//IE7、FF等其他非IE浏览器下最大宽度为600px;
width:600px;
//所有浏览器中图片的大小为600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
//当图片大小大于600px，自动缩小为600px;
overflow:hidden;
} ......

相信很多人都非常喜欢用div+css布局,无论你是前端开发者，还是后台程序员，因为它的好处实在太多，可以用很少的代码来控制布局，然后用CSS表现其形态，表现和样式分离。而且在SEO方面，它还能提供30%的优化，我们何乐而不为呢。
很多人都会碰到如题的布局问题，解决方案很多，可以用背景图来填充，或用js来控制，但终不是最佳方案，最好还是从DIV,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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列高度自适应</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#top{background:#dcdcdc;height:30px;}
#main{overflow:hidden;}
.sidebar{float:left;width:150px;background:#ff0000;}
.content{background:#333333;over ......

CSS公用文件

CSS在线编辑工具editarea

纯Javascript+css开源围棋软件eidogo

纯Javascript+css开源围棋软件eidogo

CSS边框属性

用css让图片自动适应大小

经典DIV+CSS案例两列高度自适应

CSS公用文件

CSS在线编辑工具editarea

纯Javascript+css开源围棋软件eidogo

纯Javascript+css开源围棋软件eidogo

CSS边框属性

用css让图片自动适应大小

经典DIV+CSS案例 两列高度自适应

经典DIV+CSS案例两列高度自适应