- 1、本文档共14页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
关于语义化的一些建议:
在开始之前,我想推荐两种简单的编写较好的CSS代码的指导方针:
1、为CSS类名定义的时候,尽量使用小写字母,如果有两个以上的单词,在每个单词之间使用”-”符或单词首字母大写(第一个单词除外)。如:”main-content”或”mainContent”。
2、优化CSS代码,仅创建关键主要的CSS类并重新为子元素使用符合HTML标准的标签(h1, h2, p, ul, li, blockquote,…),例如,不要使用这种哦你那个方式:
div class=”main”div class=”main-title”…/divdiv class=”main-paragraph”…/div/div
而要这样写:
div class=“main”h1…/h1p…/p/div
三栏布局中使用语义化方式的例子
让我们来通过这个简单的例子讲解一下如何为经典的三栏布局使用语义化方式命名:
使用语义化方式为CSS命名可以像这样:
#container{…}/*—- Top section —-*/#header{…}#navbar{…}/*—- Main —-*/#menu{…}#main{…}#sidebar{…}/*—- Footer —-*/#footer{…}
3???????? Container“#container“ 就是将你页面中的所有元素包在一起的部分,这部分你还可以命名为: ”wrapper“, “wrap“, “page“.
4???????? Header“#header” 是网站页面的头部区域,一般来讲,它包含网站的logo和一些其他元素。这部分你还可以命名为:”top“, “logo“, “header” (或 pageHeader).
5???????? Navbar“#navbar“等同于横向的导航栏,是最典型的网页元素。这部分你还可以命名为:“nav”, “navigation”, “nav-wrapper”.
6???????? Menu“#Menu”区域包含一般的链接和菜单,这部分你还可以命名为: ”sub-nav ”, “links“.
7???????? Main“#Main”是网站的主要区域,如果是博客的话它将包含你的日志。这部分你还可以命名为: ”content“, “main-content” (or “mainContent”)。
8???????? Sidebar“#Sidebar” 部分可以包含网站的次要内容,比如最近更新内容列表、关于网站的介绍或广告元素等…这部分你还可以命名为: ”sub-nav“, “side-panel“, “secondary-content“.
9???????? Footer“#Footer”包含网站的一些附加信息,这部分你还可以命名为: ”copyright“.
一、文件命名规范
基本样式:base.css全局样式:global.css框架布局:layout.css字体样式:font.css链接样式:link.css打印样式:print.css
?
二、常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer版 权:copyright导 航:menu主导航:mainMenu子导航:subMenu标 志:logo标 语:banner标 题:title侧边栏:sidebar图 标:icon注 释:note搜 索:search按 钮:btn登 录:login链 接:link信息框:manage……常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn
?
XHTML-CSS写作建议1、所有的xhtml代码小写;2、属性的值一定要用双引号(“”)括起来,且一定要有值;3、每个标签都要有开始和结束,且要有正确的层次;4、空元素要有结束的tag或于开始的tag后加上”/”;5、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等;6、h1到h5的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询;7、给每一个表格和表单加上一个唯一的、结构标记id;8、给重要的区块加上注释;9、给图片加上alt属性;10、所有的标签必须进行合理的嵌套;11、根元素前必须有元素,宣告使用那一种DTD;12、根元素必须
您可能关注的文档
- 内外墙面砖施工工艺准确.doc
- 内存不能为READ解决技巧.doc
- 关于标准的小小建议.doc
- 内存卡无法格式化如何解决 [2].doc
- 内存句柄及指针的区别.doc
- 内审及注册会计师.doc
- 内审建设意见—已打印.doc
- 内容[团支部工作手册].doc
- 内控工作小结报告.doc
- 内控评价汇报模板上传百度.docx
- 江苏省灌云高级中学2023-2024学年高三上学期第一次月考地理试题含答案.docx
- 备战2024年高考物理一轮重难点复习 第十三章 近代物理.docx
- 江苏省高邮市一中2021-2022学年高三上学期第一次月考语文试题(原卷版).docx
- 江苏省华罗庚中学2023-2024学年高三上学期12月阶段检测数学试卷含答案.docx
- 江苏省海门中学2023-2024学年高三上学期第一次调研考试地理试题及答案.docx
- 备战2024年高考物理一轮重难点复习 第九章 恒定电流.docx
- 江苏省高邮市2023-2024学年高三下学期3月学情调研数学试题含答案.docx
- 备战2024年高考物理一轮重难点复习 实验十一:探究影响感应电流方向的因素.docx
- 备战2024年高考物理一轮重难点复习 实验三:验证平行四边形定则.docx
- 备战2024年高考物理一轮重难点复习 第十四章 光.docx
文档评论(0)