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(即页面所处位置导航提示)
在E-Spacy看到了漂亮的Tab Pane,于是也给自己的BLOG装了个。
安装方法是参照E-Spacy做的,效果见侧栏 。
到tabpane下载源代码,解压缩后,上传到自己的网页空间,推荐放到WP安装目录的wp-content\themes内。
然后把此两行代码复制到模板文件的header.php内,head之间:
- <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部分改成自己的网络链接地址,推荐使用
- <?php bloginfo('template_directory'); ?>
这样在更换空间时也不会出错。
1.CSS Creator
这个小工具可以为您可视化的制作theme的框架结构,包括doctype、外形(满屏,居中,靠左)、最小宽度、最大宽度、头部、左右栏、底部等的基本CSS定义。设置完毕以后点击Generate Layout便会生成HTML和CSS文件,右键另存为即可使用了。
总的来说,对于CSS初学者还是很有用的,因为初学者对一些margin、float可能搞不懂,使得左右栏这样的布局无法实现。这个小工具仅仅是各出一个基本的框架结构,生成的CSS文件还需要进一步的完善。比如说,你要加入你的配色。
2.kuler
布局完成以后,我们就需要考虑theme的色系了,凭空的想像是很难得,使用这个小工具可以为你节省冥思苦想的烦恼。而且网站还列出了一些优秀的配色方案,值得借鉴。需要注册。
3.Stripe Generator
有些时候,我们对一些区域,比如说背景,不仅仅需要一些颜色的装饰,可能会需要一些条纹?但PS等制图软件又不会,这时该怎么办?使用Stripe吧,通过Stripe可以更具自己的需要选择背景色,背景样式,条纹色,条纹的形状,条纹间距和宽度等,而且生成的条纹可以实现无缝连接,免去一些考虑是否无缝的苦恼。
学习程序最好的方法是查看别人的原代码,学习CSS也一样,这篇文章介绍最人们的CSS网站收集站点,行话叫CSS陈列馆(showcase),[专录]网站设计师必看,必收藏,毕学习
http://www.csszengarden.com/
CSS禅意花园是最富盛名的CSS设计陈列馆,Dave Shea在创办之初是为了让网页设计师通过CSS样式表针对同一个Html文件的设计不同的样式,却没想到这个项目成为了当今网页设计顶尖高手展现无穷创意的舞台,看看禅意花园的
http://www.cssvault.com/
Cssvault是第一个以网站缩略图的方式呈现的优秀设计的网站,而CSS陈列馆(showcase)这一说法也是由这里开始,从开始至今大约一年的时间里面,收录了大量的优秀设计,是CSS设计师必去的网站之一。
http://www.webstandardsawards.com/
Web Standards Award,顾名思义,这里也是收集符合“网页标准”设计的网站,除收集外,还对每月收集来的网站进行评选,获胜设计可以冠以当月“网页标准”设计奖的头衔,对于设计师来说,也是一种殊荣。
http://www.unmatchedstyle.com/
这个网站是最新出炉的一个CSS陈列馆,和前面介绍的几个网站大同小异,也是采用缩略图的方式呈现,当然每个网站收集者的审美特征都不同,多一个地方无疑也给钟情于CSS设计的朋友多了一个选择,而且他们的更新很勤快。
这半个月以来今天是头一天在20:00左右下班,想起关于这个教程一直没有完成,心里感觉非常不踏实。两个月前刚辞职,本想把教程全部完成,但是由于一次不幸,导致硬盘中的数据大部分丢失,本写了一半的教程也随之灰飞烟灭。但最近有许多的网友通过博客、QQ、MSN、E-MAIL等途径与我联系,希望能继续更新这个教程,甚至有网友居然拨打我的手机(我不知道大家是如何知道我的号码的,,哎~~)被大家所感动,时间虽然很紧,但还是抽点时间来尽量完成这个教程吧~~就像鲸鱼叔叔所说的,时间就是奶,越挤就越多~~
首先,有些东西需要说明一下。对于之前的文章,由于为了让大家更好的区分各层的关系,教程中不少地方使用了大写的CLASS或者ID,其实这样做是不推荐的,我推荐的方法是使用单词之间增加下划线,或者单词拼接的方法。因为CSS是区分大小写的。大家可以看到,我提供给大家的下载文件中全部都是使用小写来处理的。
我们先来处理sidebar的样式,经过分析,我们可以得知,sidebar有四个部分,我们将这四个部分分为四个层:
