易截截图软件、单文件、免安装、纯绿色、仅160KB

转:有利于SEO的DIV+CSS的命名规则

文章转自于:http://www.pqshow.com/design/Dreamweaver/200912/12674.html
由于项目中编写文档结构、编写CSS的人员较多,并与程序员协同工作,所以就需要统一开发规范,根据XHTMl和CSS编织的规范和大多人的习惯,整理了以下针对本项目的一个简单的开发规范:
一、CSS文件及样式命名
1、CSS文件命名规范
全局样式:global.css;
框架布局:layout.css;
字体样式:font.css;
链接样式:link.css;
打印样式:print.css;
2、CSS样式命名规范
本人建议:用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字。为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间,例如:
头部样式用header,头部左边,可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列),box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列),其它的我就不一一举例了,大家按以上规律去命名就好。
下面列出一些常用的命名单词方便大家使用:(以后大家工作过程中慢慢把自己积累的单词都共享出来,那大家的命就会更加统一了,就不会有一义多词的情况了。)
容 器:container/box
头 部:header
主 导 航:mainNav
子 导 航:subNav
顶 导 航:topNav
网站标志:logo
大 广 告:banner
页面中部:mainBody
底 部:footer
菜 单:menu
菜单内容:menuContent
子 菜 单:subMenu
子菜单内容:subMenuContent
搜 索:search
搜索关键字:keyword
搜索范围:range
标签文字:tagTitle
标签内容:tagContent
当前标签:tagCurrent/currentTag
标  题:title
内 容:content
列 表:list
当前位置:currentPath
侧 边 栏:sidebar
图 标:icon
注 释:note
登 录:login
注 册:register
列 定 义:column_1of3 (三列中的第一列)
column_2of3 (三列中的第二列)
column_3of3 (三列中的第三列)
二、id和class的使用及区别
我们知道在样式表定义一个样式的时候,可以定义id也可以定义class,例如:
ID方法:#test{color:#333333},在页面中调用<div id="test">内容<div>
CLASS方法:.test{color:#333333},在页面中调用<div class="test">内容<div>
id一个页面只可以使用一次,class可以多次引用。
我在页面中用了多个


相关文档:

Web标准 css简写规则

1. css 字体简写规则
当使用css定义字体时你可能会这样做:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
事实上你可以简写这些属性:
font: 1em/1.5em bold italic small-caps verdana,serif
font: bold ital ......

【Css的一些小技巧1】右对齐的日期。


如图,做网站时经常遇到的情况,将项目名和发布时间左右分开。
方法1:
思路是直接将时间放到一个行内元素里,然后将这个元素右浮动。
   如:<li><span>(2009-01-01)</span>[媒体播放] KMPlayer
2.9.3.1428 中文正式版 </li>
只要将 li span{float:right;},然后 li{width:200 ......

Css条件样式表

Css中的条件样式表
<!--[if lte IE 6 ]>
<link rel="stylesheet" href="ie6.css" mce_href="ie6.css" media="all"
type="text/css"/>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" mce_href="ie7.css" media="all"
type="text/css"/>
<![en ......

对DIV+CSS的一点心得体会,让你尽快学会布局设置

请看下面一段代码:
<HTML>
<HEAD>
<style>
#login {font-size:14px;color:blue;}//定义了一个ID
.left{FONT-SIZE=12PX;COLOR=RED;TEXT-ALIGN=CENTER;}//定义了一个类
</style>
<TITLE>中国</TITLE>
<BODY>
<DIV STYLE="FONT-SIZE=12PX;COLOR=RED;TEXT-ALIGN=RIGHT; ......

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

margin-bottom:40px;       /*ff的属性*/
margin-bottom:140px\9;    /* IE6/7/8的属性 */
color:red\0;              /* IE8支持 */
*margin-bottom:450px;     /*IE6/7的属性*/ ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号