老子是80后的强人，却保持着70后的优秀思想，拥有90后的聪明头脑，贱踏在00后艰苦奋斗的大马路上……
没事儿做，就去偷了个 CSS 命名规范
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css命名规范</title> <style type="text/css"> /****************************************************************** * 名称: css命名规范 * 作者网名: 未知 * 创建日期: 2007-1-10 * 最近修改: 2008-4-3 ******************************************************************/ <!-- body{ background:#000000; margin:0; padding:0;} h1{ text-align:center} h2{ font: bold 14px "Arial";} #content{ margin:10px 20px; padding:10px; text-align:left; font: 12px Arial; background:#FFFFFF;} table{ width:80%; padding:10px; text-align:left; background:#eee;} th{color:#f00; background:#FFF} td{background:#FFF} b{ color:#000;} --> </style> </head> <body> <div id="content"> <h1>CSS 命名规范</h1> <h2>XHTML-CSS写作建议</h2> <ol> <li>所有的xhtml代码小写</li> <li>属性的值一定要用双引号("")括起来，且一定要有值</li> <li>每个标签都要有开始和结束，且要有正确的层次</li> <li>空元素要有结束的tag或于开始的tag后加上"/"</li> <li>表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等</li> <li><h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。</li> <li>给每一个表格和表单加上一个唯一的、结构标记id</li> <li>给重要的区块加上注释,如：<!-- Begin Last news --> <!-- End Last news --></li> <li>给图片加上alt标签</li> <li>所有的标签必须进行合理的嵌套</li> <li>根元素前必须有<!DOCTYPE>元素，宣告使用那一种DTD</li> <li>根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace</li> </ol> <h2>CSS样式表规范：</h2> <ol> <li>id和class命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个字母大写，如:newRelease（最新产品/new+Release)</li> <li>CSS样式表各区块用注释说明</li> <li>尽量使用英文命名原则</li> <li>尽量不加中杠和下划线</li> <li>尽量不缩写，除非一看就明白的单词</li> </ol> <h2>CSS命名规范：</h2> <table cellspacing="1" cellpadding="0" class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'"> <tr> <th width="40%"><b>DIV</b></th> <th width="30%"><b>CSS名称</b></th> <th width="30"><b>说明</b></th> </tr> <tr> <th colspan="3">网站公用相关</th> </tr> <tr> <td>Container div </td> <td>#container </td> <td>容器 </td> </tr> <tr> <td><div>Layout</div></td> <td>#layout</td> <td>布局</td> </tr> <tr> <td>Header or banner div </td> <td>#head, #header</td> <td>页头部分 </td> </tr> <tr> <td>Footer div </td> <td>#foot, #footer </td> <td>页脚部分 </td> </tr> <tr> <td>Navigation list </td> <td>#nav </td> <td>主导航 </td> </tr> <tr> <td>Sub-navigation list </td> <td>#subNav </td> <td>二级导航 </td> </tr> <tr> <td>Menu </td> <td>#menu </td> <td>菜单 </td> </tr> <tr> <td>Sub Menu </td> <td>#submenu </td> <td>子菜单 </td> </tr> <tr> <td>Left or right side columns </td> <td>#sidebar_a, #sidebar_b </td> <td>左边栏或右边栏 </td> </tr> <tr> <td>Main div </td> <td>#main </td> <td>页面主体 </td> </tr> <tr> <td>Tag </td> <td>#tag </td> <td>标签 </td> </tr> <tr> <td>Message </td> <td>#msg #message </td> <td>提示信息 </td> </tr> <tr> <td>Tips </td> <td>#tips </td> <td>小技巧 </td> </tr> <tr> <td>Vote </td> <td>#vote </td> <td>投票 </td> </tr> <tr> <td>Friend Link </td> <td>#friendlink </td> <td>友情连接 </td> </tr> <tr> <td>Title </td> <td>#title </td> <td>标题 </td> </tr> <tr> <td>Summary </td> <td>#summary </td> <td>摘要 </td> </tr> <tr> <td>Search input </td> <td>#searchInput </td> <td>搜索输入框 </td> </tr> <tr> <td>Search output </td> <td>#search_output </td> <td>搜索输出和搜索结果相似 </td> </tr> <tr> <td>Search </td> <td>#search </td> <td>搜索 </td> </tr> <tr> <td>Search bar </td> <td>#searchBar </td> <td>搜索条</td> </tr> <tr> <td>Search results </td> <td>#search_results </td> <td>搜索结果 </td> </tr> <tr> <td>Copyright information </td> <td>#copyright </td> <td>版权信息 </td> </tr> <tr> <td>brand </td> <td>#branding </td> <td>商标 </td> </tr> <tr> <td>branding-logo </td> <td>#logo </td> <td>LOGO </td> </tr> <tr> <td>Site information </td> <td>#siteinfo </td> <td>网站信息 </td> </tr> <tr> <td>Copyright information etc. </td> <td>#siteinfoLegal </td> <td>法律声明 </td> </tr> <tr> <td>Designer or other credits </td> <td>#siteinfoCredits </td> <td>信誉 </td> </tr> <tr> <td>Join us </td> <td>#joinus </td> <td>加入我们 </td> </tr> <tr> <td>Partnership opportunities </td> <td>#partner </td> <td>合作伙伴 </td> </tr> <tr> <td>Services </td> <td>#service </td> <td>服务 </td> </tr> <tr> <td>Regsiter </td> <td>#regsiter </td> <td>注册 </td> </tr> <tr> <td>Arrow</td> <td>arr/arrow</td> <td>箭头</td> </tr> <tr> <td>Little</td> <td>#little</td> <td>标题</td> </tr> <tr> <td><div>Website map</div></td> <td>#sitemap</td> <td>网站地图</td> </tr> <tr> <td>List</td> <td>#list</td> <td>列表</td> </tr> <tr> <td>Home page</td> <td>#homepage</td> <td>首页</td> </tr> <tr> <td>Sub page</td> <td>subpage</td> <td>二级页面子页面</td> </tr> <tr> <td>Toolbar</td> <td>#tool, #toolbar </td> <td>工具条</td> </tr> <tr> <td><div>Next pulls</div></td> <td>#drop</td> <td>下拉</td> </tr> <tr> <td>Next pulls menu </td> <td>#dorpmenu</td> <td>下拉菜单</td> </tr> <tr> <td>Status </td> <td>#status </td> <td>状态 </td> </tr> <tr> <th colspan="3">电子贸易相关</th> </tr> <tr> <td>Products </td> <td>.products </td> <td>产品 </td> </tr> <tr> <td>Products prices </td> <td>.products_prices </td> <td>产品价格 </td> </tr> <tr> <td>Products description </td> <td>.products_description </td> <td>产品描述 </td> </tr> <tr> <td>Products review </td> <td>.products_review </td> <td>产品评论 </td> </tr> <tr> <td>Editor's review </td> <td>.editor_review </td> <td>编辑评论 </td> </tr> <tr> <td>New release </td> <td>.news_release </td> <td>最新产品 </td> </tr> <tr> <td>Publisher </td> <td>.publisher </td> <td>生产商 </td> </tr> <tr> <td>Screen shot </td> <td>.screenshot </td> <td>缩略图 </td> </tr> <tr> <td>FAQ </td> <td>.faqs </td> <td>常见问题 </td> </tr> <tr> <td>Keyword </td> <td>.keyword </td> <td>关键词 </td> </tr> <tr> <td>Blog </td> <td>.blog </td> <td>博客 </td> </tr> <tr> <td>Forum </td> <td>.forum </td> <td>论坛 </td> </tr> </table> </div> </body> </html>
提示：您可以先修改部分代码再运行
姓名
Email (不会被公布)
网站
Spam protection: Sum of 10 + 5 ?
本文分类于uncat.您可以订阅本文评论的RSS 2.0.您可以 发表评论, 或者引用本文 到您的站点
0 Responses to “偷个东西 CSS 命名规范”