希望能书写简单而漂亮的CSS网站代码吗？Nice and Free CSS Templates 这个网站提供免费的模板代码，代码均能通过W3C检验。该网站提供12款模板代码，基本上能满足日常网站的设计样式。有兴趣的各位可以参详下。
分类目录归档：网页制作
网站制作之八大要领
要领一：确定网站主题
做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。美国《个人电脑》杂志(PC Magazine)评出了99年度排名前100位的全美知名网站的十类题材:第1类:网上求职;第2类:网上聊天/即时信息/ICQ;第3类:网上社区/ 讨论/邮件列表;第4类:计算机技术;第5类:网页/网站开发;第6类:娱乐网站;第7类:旅行;第8类:参考/资讯;第9类:家庭/教育;第10类:生 活/时尚。我们可以参看上面的分类，继续细分。如果自己在某些方面有兴趣，或掌握的资料较多，也可以做一个自己感兴趣的东西，一者，你可以有自己的见解， 做出自己的特色;二者，在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品。
对于内容主题的选择，要做到小而精，主题定位要小，内容要精。不要去试图制作一个包罗万象的站点，这往往会失去网站的特色，也会带来高强度的劳动，给网站的及时更新带来困难。记住:在互联网上只有第一，没有第二!
10 步学习如何进行 css 定位
我们今天来探讨一下不同的 css 布局特性，包括：position:static, position:relative, position:absolute, 等等。
1 . position:static：
网页各个单元的默认位置，这意味着该单元的位置通常不发生变化。在一般情况下，你不需要特别对它进行设定，除非你需要指定先前已经确定的另一个位置。
1 2 3 | #div-1 { position:static; } |
效果：
继续阅读
几种典型配色方案
新模板《 羽落凡尘》
网站设计精华65条原则
01.明确内容
如果你想成为一个网站设计者，并正想建一个网站的话，首先应该考虑网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。
02.抓住用户
如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。
03.优化内容
内容是核心。大约在两年以前，企业网站就像一本广告册子，更槽糕的是，网站使用了大量的图片，似乎要几个世纪才能下载完。
Chanels网站（www.channels.co.uk）在设计的某些方面是成功的，但是内容太贪乏，并且要花很长时间才能找到所要的东西，因此不能算是一个成功的网站。
04.快速下载
没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。
05.网站升级
时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。
用 CSS 打造一个惟妙惟肖的网页版苹果工具条！
如果你是大苹果的粉丝，你一定会爱上这款由 CSS 打造的苹果工具条（dock menu，效果预览），原文作者原创，原文会手把手教你打造！该工具条使用了 Jquery 这个轻量级 Javascript 类库（很多 AJAX 效果哦）提供的接口，Interface 提供的界面组件和原作者的原创 Icon。 这款 CSS dock menu 是为了用在作者打造的 WordPress 皮肤 iTheme 上的，不用我多说，大家都猜到了吧：一款模仿苹果的 WP 主题。
该皮肤支持 widgets ，侧边栏支持拖拽，适合WordPress 2.0 和 2.1，适合以下浏览器：IE, Firefox, Safari, Opera。
想看原文教程呢，请点击这里，想下载 CSS dock menu呢，这里。
Insert code
In between the HTML <head> tag, add the following code
1 2 | <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/interface.js"></script> |
1 | <link href="style.css" rel="stylesheet" type="text/css" /> |
1 2 3 4 5 | <!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style> <![endif]–> |
一些DIV+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(即页面所处位置导航提示）
继续阅读
为自己的网页制做Tab Pane
在E-Spacy看到了漂亮的Tab Pane，于是也给自己的BLOG装了个。
安装方法是参照E-Spacy做的，效果见侧栏 。
到tabpane下载源代码，解压缩后，上传到自己的网页空间，推荐放到WP安装目录的wp-content\themes内。
然后把此两行代码复制到模板文件的header.php内，head之间：
1 2 | <script type="text/javascript" src="js/tabpane.js"></script> <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" /> |
其中js/tabpane.js和css/tab.webfx.css部分改成自己的网络链接地址，推荐使用
1 | <?php bloginfo('template_directory'); ?> |
这样在更换空间时也不会出错。
3个小工具
1.CSS Creator
这个小工具可以为您可视化的制作theme的框架结构，包括doctype、外形(满屏，居中，靠左)、最小宽度、最大宽度、头部、左右栏、底部等的基本CSS定义。设置完毕以后点击Generate Layout便会生成HTML和CSS文件，右键另存为即可使用了。
总的来说，对于CSS初学者还是很有用的，因为初学者对一些margin、float可能搞不懂，使得左右栏这样的布局无法实现。这个小工具仅仅是各出一个基本的框架结构，生成的CSS文件还需要进一步的完善。比如说，你要加入你的配色。
2.kuler
布局完成以后，我们就需要考虑theme的色系了，凭空的想像是很难得，使用这个小工具可以为你节省冥思苦想的烦恼。而且网站还列出了一些优秀的配色方案，值得借鉴。需要注册。
3.Stripe Generator
有些时候，我们对一些区域，比如说背景，不仅仅需要一些颜色的装饰，可能会需要一些条纹？但PS等制图软件又不会，这时该怎么办？使用Stripe吧，通过Stripe可以更具自己的需要选择背景色，背景样式，条纹色，条纹的形状，条纹间距和宽度等，而且生成的条纹可以实现无缝连接，免去一些考虑是否无缝的苦恼。