1.基金会3 | Foundation 3 世界最先进的响应前端框架。
2.bootstrap twitter
3.960 Grid System
1，内嵌样式 > 内部样式表 > 外联样式表，即：当样式相同时，以最近的为主。
2，id选择器的权重是大于类选择器的权重。即：#mystyle 大于.mystyle
1，将excel数据自动转成网页形式：http://tableizer.journalistopia.com/
2，网站连接数测试：拟多用户同时访问你的站点，并出具报告以分析你的站点可以支撑的访问者数量。
http://loadimpact.com/index.php
3， Photoshop 插件，可以将你的 PSD 转换成 WordPress 主题。http://www.divine-project.com/
本地文件：enjoytools/ColorPicker/images/PrimaryColors.swf
利用过滤器解决：
<pre lang=”css”>#png
{background-image: url(images/logo.png)!important;
background-repeat: no-repeat;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’http://enjoyasp.net/logo.png’);
_background-image: none;
}</pre>
?<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″utf-8″ />
</head>
<style type=”text/css”>
/* CSS Document */
body {
font: normal 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
table {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA? no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa no-repeat;
font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*———for IE 5.x bug*/
html>body td{ font-size:11px;}
body,td,th {
font-family: 宋体, Arial;
font-size: 12px;
}
</style>
<body>
<table cellspacing=”0″>
<caption> </caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>电话</th>
<th>居住地点</th>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
<tr>
<td>badwolf</td>
<td>100</td>
<td>010-110</td>
<td>中国北京</td>
</tr>
</table>
</body>
</html>
?方法一
1：：<head></head>中加入代码:
<style>
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>
2：在css文档种加入以下代码
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
若 FLASH的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …></object>之间插入：
<param =”false” name=”menu”/>
<param =”opaque” name=”wmode”/>
方法二、给body加个css滤镜(仅限IE)
body {filter:gray;}
flash变灰的方法：object 之间加入
<param value=’false’ name=’menu’/>
<param value=’opaque’ name=’wmode’/
语法：STYLE=”filter:filtername(fparameter1, fparameter2…)”
（Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数）
滤镜说明：
Alpha：设置透明层次 ?
blur：创建高速度移动效果，即模糊效果
Chroma：制作专用颜色透明
DropShadow：创建对象的固定影子
FlipH：创建水平镜像图片
FlipV：创建垂直镜像图片
glow：加光辉在附近对象的边外
gray：把图片灰度化
invert：反色
light：创建光源在对象上
mask：创建透明掩膜在对象上
shadow：创建偏移固定影子
wave：波纹效果
Xray：使对象变得像被x光照射一样
哀悼日期间设置网站页面为灰色：
<style>
body{
? ?? ???filter:gray;
}
</style>
页面中所有的控件形状，位置，大小都可利用css来改变成所想要的效果。以前只是改td,div, 文字，要意识到input也是html元素，当然也能改变！！！
1，<a href=”http://www.w3schools.com/css/tryit.asp?filename=trycss_float5“>导航条</a>
body{
font-family: “宋体”;
font-size: 12px;
//对于页面中出现的文字，如外部没有CSS，就用这个CSS，默认。即最外层的CSS影响它所包含的内部所有元素，若其没有自己的CSS，则外部的应用之，对应应用。因为如td之类没有字体之类的属性，这种对应指的是外部CSS属性与元素含有的属性的交。
如： td
{
font-size:12px;s
}
对页面中td内的文字应用。
background-color: #F8FDF8;
margin: 0px auto;
}
2, 连接：link:正常显示 visited: 点击过后 hover: 鼠标滑过 active: 鼠标按下时
a.link {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:visited {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
a:hover {
font-size: 12px;
line-height: 22px;
color: #009900;
text-decoration: none;
}
a:active {
font-size: 12px;
line-height: 22px;
color: #333333;
text-decoration: none;
}
注： visited要在a:link之后。 active要在hover之后才会有效果。
3, 当控件获得焦点时进行样式操作
<html>
<head>
<style type=”text/css”>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action=”form_action.asp” method=”get”>
First name: <input type=”text” name=”fname” /><br />
Last name: <input type=”text” name=”lname” /><br />
<input type=”submit” value=”Submit” />
</form>
</body>
</html>
3, 图片由半透明转为透明
<html>
<head>
<style type=”text/css”>
img
{
opacity:0.4; //firefox的用法，范围从0.0 – 1.0
filter:alpha(opacity=40) //ie的用法，范围从0 – 100
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src=”klematis.jpg” width=”150″ height=”113″ alt=”klematis”
onmouseover=”this.style.opacity=1;this.filters.alpha.opacity=100″
onmouseout=”this.style.opacity=0.4;this.filters.alpha.opacity=40″ />
</body>
</html>
4, 改变html的表现形式： 如input text 这个文本框让其只有下线，改变其边框颜色
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”>
<html xmlns=”<a href=”http://www.w3.org/1999/xhtml”>http://www.w3.org/1999/xhtml</a>”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<style>
input {
border-color:red;
border-left-width:0px;
border-right-width:0px;
border-top-width:0px;}
</style>
</head>
<body>
sdf
<input name=”” type=”text” />sfd
</body>
</html>
5, 百度输入栏：高度为28px, 而google为21px, 而中文高度比英文字母要繁，高度要高，显然百度的输入栏更符合输入中文。
<input name=”” type=”text” autocomplete=”off”/>
input[type=”text”]{font:16px Verdana;height:28px;padding-top:2px} //改变html元素显示形状
注：页面要去掉头部的<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href=”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>”>
1，Dimension ：尺寸，用来控制控件的高与宽
2, Classification: 指定控件的显示方式
2，p
3，z-index 属性设置元素的堆叠顺序
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
注：Z-index 仅能在定位元素上奏效（例如 position:absolute;）
1, background
?? ???? body
?? ??? ?{
?? ??? ??? ?background: #00ff00 url(‘smiley.gif’) no-repeat fixed center;?? //当将css从文件中提取，放入一.css文件中时，图片路径注意调整
?? ??? ?}
2，text
?? ??? ?h1
?? ??? ?{
?? ??? ??? ?text-align:center;
?? ??? ??? ?text-transform:capitalize;
?? ??? ??? ?color:#800000;
?? ??? ?}
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
3，font
4, margin, border, padding, content：指示一个控件的显示位置，控件就是content
?
? 5，border
6, margin : 没有背景色，完全透明，填充空白
7, padding : 边框与控件的距离
8，list : 项目符号列表
9, table
1，定义方式：selector {property:value}
? selector可一次应用所有元素，或用class指定，或用ID，前者时selector名字为html自带，后者为自定义。
? （1）定义多个属性用;隔开。p {text-align:center;color:red}
? （2）多个同一样式：
?? ??? ??? ?h1,h2,h3,h4,h5,h6
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?color:green
?? ??? ??? ??? ?}
?（3）应用多个样式：用空格分开 <p>This is a paragraph.</p>
?（4）内部样式，外部样式，在页面中应用：
?????????? <style>
p{ background-color:#006633}background-color:#006633}
</style>
?若有相同的css定义，相同的部分部分优先级为本页最高，其次是外部引用，本页覆盖外页，若不相同，则二者求并集。
优先级也可通过? !important 为调节，带它的优先级会最高，无论是内页还是外页。
.module ul{margin-left:-55px !important; } //直接加在分号前即可。
2，html自带：
??? （1）p {font-family:”sans serif”} ? ?? 页面中所有段落都会自动应用此样式。
??? （2）自带内部定义用 点 ：p.right {text-align:right}? 应用于 ? <p>This paragraph will be right-aligned.</p>
??? （3）指定子类自动应用：input[type=”text”] {background-color:blue}? 类型为text的所有控件都会被应用。
注：自定义的用. 如p.right, html的以空格隔开如:a:hover img {border: 1px solid #0000ff;width:500px;height:500px;} //以a 内的img应用
?<a target=”_blank” href=”klematis_big.htm”><img src=”klematis_small.jpg” alt=”Klematis” width=”110″ height=”90″ /></a>
3，自定义：以.开头，以class引用
???? .cc {text-align:center}
? ?? <p>This paragraph will also be center-aligned.</p>
????? 注：名称不能以数字开头，firefox不支持。
4，id指定，不用class
??? #username{color:green}? 则页面中ID为username的控件会自动应用此样式。
5，注释：/*This is a comment*/
6，总结：
?? ???? （1）自动应用的，即不用class指定的
?? ????????????? 1）名字以html元素开头，如body, h1, th, td,table
???????????????? 2)? 用[]指定子类型的。如：input[type=”text”] {background-color:blue}
???????????????? 3)? 以#开头的ID，页面中有此ID的自动应用。
??????? （2）用class指定应用的。名字以 . 开头
??????????????? （1）页面元素前为元素名后为 .? 如:p.right {text-align:right}? 应用于 ? <p>This paragraph will be right-aligned.</p>
??????????????? （2）自定义，以 . 开头??? .cc {text-align:center} ? ?? <p>This paragraph will also be center-aligned.</p>
注：因一些浏览器不支持css, 要在<style></style>加上<!–????????????????????? –>