CSS模板是怎么炼成的
作者:李丽媛
邮箱：lly219@gmail.com
日期：2009-1-12
前言（自说自话）
从初识CSS到现在已经5个年头了。大多是断断续续的，可是近一年来接触颇多，甚有一些些体会。
第一次接触只知道font，color，background，margin，padding等基本知识，乃至连margin、padding都分不清个所以然。
在第一次Web大作业中知道了有“div+css template”,为了交差，从哪个时候就开始收集模板，看到各种各样的模板，不由惊叹他人的配色能力，创作技巧以及丰富的想象力。
于是从图书馆借了一堆PS，配色，广告之类的书，当时没看出个所以然，只是觉得纸质和印刷都很好，要是弄丢了赔的钱可不少。
转眼4年过去了，还是只会下载别人的模板，夸夸几下改成自己实用的，基本的css还是不甚了解。
第五个年头来了，工作了，自己的想法也比较多了，对web方面有了自己的见解。CSS不能说精通，但是浏览器差异，基本原理能说的比较清楚了。
正文
FOR：模仿者的炼金术
一个模板的炼成可以靠很多办法，对于没有创作，没有经验的人来说，最为适当的方法就是找模板来修改。
以下是平时积累的一些模板，大多是国外的：
简洁的白色网站设计欣赏 | ShowCase | 前端观察
www.qianduan.net/showcase-of-clean-white-web-de...
淡蓝，浅绿
demo.templateworld.com/zero/in_action/temper
模板实例
two24studios.com
页面模板
sudasuta.com/?p=1342
Web Designer Wall - Design Trends and Tutorials
www.webdesignerwall.com
We Are not Freelancers
www.wearenotfreelancers.co.za
99 High-Quality Free (X)HTML/CSS Templates | Showcases | instantShift
www.instantshift.com/2009/09/29/99-high-quality...
Open Web Design - Download Free Web Design Templates
www.openwebdesign.org
CSS Templates (Page 1 of 25 ) - Free CSS Templates
www.freecsstemplates.org/css-templates
纹理
www.qianduan.net/showcase-of-beautiful-textured...
对于很没经验的人来说，最好是把模板备份，然后直接在模板上修改，修改完毕记得在多个浏览器中查看。
题外话
：话说没学会走，怎么能开始学跑呢？在此，不见得就一定，虽然你不是很精通，但它是个所见即所得的东西，再加上Firefox上的firebug，只要稍加理解，不要只图着修改的快乐，很大程度上不会走也能跑了。
但基本功是必须的，等再次回过头来看css，就会觉得很简�
相关文档：
姓名：乐乐---乐css-lecss
团队开发做的。本人负责的页面以及排版之类的，有兴趣的可以去网站上转悠转悠下。。
天堂网：
www.tiantang.cn
http://tiantang.cn/hills/hill1/page/hillindex.aspx
老人网：
www.laoren.cn
--
设计过程那是一种漫长而昂贵的折磨..。
--
我蛮喜欢CSS的，可是却也对它很烦恼，有 ......
Css代码
1.line-height:24px;
line-height:24px;
使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致），更多的垂直居中总结可以看这里。
清除容器浮动
Css代码
1.#main {
2. overflow:hidden;
3.}
#ma ......
CSS:
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
......
css渐变代码4种
一、从上往下渐变
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}
二、从左上至右下渐变
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-col ......
CSS滤镜的使用方法：filter:filtername(parameters) 即 filter:滤镜名称（参数）
alpha：设置透明层次
blur：创建高速度移动效果，即模糊效果
chroma：制作专用颜色透明
DropShadow：创建对象的固定影子
FlipH：创建水平镜像图片
FlipV：创建垂直镜像图片
glow：加光辉在附近对象的边外
gray：把图片灰度化
inver ......
