DIV+CSS网页布局知识整理.docVIP

CSS命名规范 一．文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css； 二．常用类/ID命名规范 外　套：　　wrapper 主导航：　　mainnav 子导航：　　subnav 整个页面：　content 页　眉：　　header 页　脚：　　footer 商　标：　　label 标　题：　　title 主导航：　　mainmav(globalnmav) 顶导航：　　topnav 边导航：　　sidebar 左导航：　　leftsideBar 右导航：　　rightsideBar 旗　志：　　logo 标　语：　　banner 菜单内容1： menu1content 菜单容量：　menucontainer 子菜单：　　submenu 边导航图标：sidebaricon 注释：　　　note 面包屑：　　breadcrumb(即页面所处位置导航提示) 容器：　　　container 内容：　　　content 有哪些信誉好的足球投注网站：　　　search 功能区：　　shop(如购物车，收银台) 当前的： current 按　钮： btn 滚动： scroll 登　录：login 登录条：loginBar 链　接：link 信息框：manage 投票：vote 提示信息：msg 加入：joinus 指南：guild 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 小技巧：tips 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，：诸如“有哪些信誉好的足球投注网站框”则应命名为“searchinput”、“有哪些信誉好的足球投注网站图标”命名这“searchicon”、“有哪些信誉好的足球投注网站按钮”命名为“searchbtn，左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.尽量不缩写，除非一看就明白的单词. CSS书写规范及方法 一. 常规书写规范及方法 1. 选择DOCTYPE： XHTML 1.0 提供了三种DTD声明可供选择： 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性。 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。 理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。 2. 指定语言及字符集： 为文档指定语言： 为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言； 常用的语言定义： 标准的XML文档语言定义： 针对老版本的浏览器的语言定义： 为提高字符集，建议采用“utf-8”。 3. CSS样式书写顺序 1、显示属性 * display * list-style * position * float * clear 2、自身属性 * width * height * margin * padding * border * background 3、文本属性 * color * font * text-decoration * text-align * vertical-align * white-space * other text * content 重置 html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 4.调用样式表： 外部样式表调用： 页面内嵌法：就是将样式表直接写在页面代码的head区。 如： style type=”text/css”!– body { background ： white ; color ： black ; } – /style 外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。 link rel=”stylesheet” rev=”styleshee