FF与IE7下input type="text" 和 input type="password"输入框的长度都是一样的，但在IE6下偏偏前面的长后面的短2px，设置size也不行，而设置width可以，但为了不影响其他input(如type=submit)的width，我们可以这样写css:
input[type="text"], input[type="password"] {
width: 200px;
}
input {
width: expression((this.type=="text" || this.type=="password") ? "200px" : ...
一、DIV标记与SPAN标记
div和span都可以作为一个容器，集体控制容器内的样式
区别是div使块级元素，前后会有换行
而span是行内元素，前后不会换行
div内可以有span，而span内不能有div
二、盒子模型
1，概念
任何页面元素都可以看成一个盒子
一个盒子模型由content、padding、border、margin四部分组成
width(height)的值指content的width(height)+padding的值
2，border
color
width: thin、medium、thick、数值
style: none、hidden、dotted、dashe ...
给div指定高度height并使用overflow属性来让它出现scrollbar样式：
<div style="border: solid 1px #ff0000; height: 200px; overflow: auto;">
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15&l ...
今天工作中发现jQuery的lightbox将calendar_date_select覆盖掉了，经sliu指点原来是CSS中的一个z-index的问题，z-index越大则显示在页面的最上面，否则就被覆盖掉了。
一、item list
1,列表符号
ul {
list-style-type: decimal;
}
li.special {
list-style-type: circle;
}
disc
circle
square
decimal
upper-alpha
lower-alpha
upper-roman
lower-roman
none
2,图片符号
ul {
list-style-image: url(icon1.jpg);
}
or
ul {
list-style-type: none;
}
li {
...
一、超链接
1，动态超链接
a:link {
color: #005799;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #FFFF00;
text0decoration: underline;
}
2，按钮式超链接
a:link, a:visited {
color: #A62020;
padding: 4px 10px 4px 10px;
background-color ...
一、控制表格
1，表格中的标记
table: border, summary
caption
th: scope(row, col)
2，表格的颜色
.datalist {
color: #0046a6;
background-color: #d2e8ff;
font-family: Arial;
}
.datalist caption {
font-size: 18px;
font-weight: bold;
}
.datalist th {
color: #003e7e;
background-color: #7bb3ff; ...
一、背景颜色
1，页面背景色
body {
background-color: #5b8a00;
}
2，使用背景色给页面分块
body {
background-color: #ffebe5;
}
.topbanner {
background-color: #fbc9ba;
}
.leftbanner {
background-color: #6d1700;
}
二、背景图片
1，页面背景图
body {
background-image: url(test.jpg);
}
2，背景图的重复
body {
bac ...
一、图片样式
1，图片边框
img.test1 {
border-style: dotted; /*点划线*/
border-color: #FF9900; /*边框颜色*/
border-width: 5px; /*边框粗细*/
}
img.test2 {
border-style: dashed; /*虚线*/
border-color: blue; /*边框颜色*/
border-width: 2px; /*边框粗细*/
}
img.test3 {
border-style: d ...
一，文字样式
1，字体
p {font-family: 黑体,Arial,宋体,sans-serif;}
浏览器按先后顺序查找字体，如果这些字体都没有，则使用浏览器默认字体显示
2，大小
# 绝对大小物理单位(与分辨率无关)
p.inch {font-size: 0.5in;}
p.cm {font-size: 0.5cm;}
p.mm {font-size: 4mm;}
p.pt {font-size: 12pt;}
p.pc {font-size: 2pc;}
# 绝对大小关键字(不同浏览器效果不同)
p.one {font-size: xx-small;} ...
一、CSS选择器
1，标记选择器
h1 {
color: red;
font-size: 25px;
}
2，class选择器
.one {
color: green;
font-size: 20px;
}
其中对于一个div使用多个class时(class="one two")，在css文件中定义靠后的class中的同名属性(比如class1和class2
都定义了color属性)会覆盖靠前的class中的同名属性
3，ID选择器
#one {
font-weight: bold;
}
同一HTML标记只能使用一个id
二、 ...
本人忘性大，每读一书必做笔记，便于日后查阅。
《精通CSS+DIV》做CSS入门，不错。
一、CSS的四种使用方式
1，行内式
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">Content</p>
2，链接式
<head>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
3，内嵌式
<head>
<style type="text/css">
< ...
hideto
- 浏览: 612371 次
- 性别:
- 来自: BJ
- 详细资料
搜索本博客
我的相册
共 1 张
最近加入圈子
最新评论
-
深入了解Java ClassLoader ...
当我对字节码编译不知所措的时候,发现了这个帖子 谢谢楼主,目前正在学习ASM C ...
-- by ytzhsh -
Rails里如何结合Exceptio ...
收藏了,小工具,好东西.
-- by yangzhihuan -
使用coderay和railscasts ...
不错，很爽，如果能显示成textmate那样的就好了。
-- by carlosbdw -
Axis2快速上手指南
看得很累,希望楼主写个HelloWorld.谢谢
-- by zznj1123 -
使用coderay和railscasts ...
javaeye自己用的是什么highlight什么的吗？
-- by qichunren
评论排行榜