web网页设计命名规范
网页设计一般规范
网页设计一般规范一、文件组织规范1．首先创建站点文件夹(使用英文字母命名)。
2．按站点栏目在站点文件夹中创建若干相应子文件夹及图片文件夹image。
3．首页创建在站点根文件夹下，文件名必须是inde某.htm或default.htm。
站点根文件夹下，只能有inde某.htm和若干子文件夹。
4.其他网页文件、图片文件、媒体文件等，都放在对应的子文件夹内。
5.所有文件夹、文件(网页文件、图片文件)命名时，不得含有汉字和空格。
6.所有图片文件需放置在image文件夹内。
二、主页制作规范1．使用表格实现布局，在布局的单元格中添加页面内容。
2．分辨率控制为800某600兼容1024某768(页面居中，不能出现水平滚动条)。
3．有清楚完整的页面结构。
头部的CI标志、主题图片或文字、导航栏。
分块合理安排的主体页面内容。
尾部的版权。
4．有恰当的颜色设计和背景设计(颜色控制在三种、背景使用专用背景图片)。
5．导航栏和所有大小标题进行适当的修饰。
三、普通网页制作规范1．必须放置在相应子文件夹内。
不能放置在站点根文件夹下。
2．页面要有基本的布局(页面居中，分辨率控制8OO某600兼容1024某768)。
所有内容安排在布局好的表格中(一般将表格线隐藏)。
3．一般应安排返回主页或父页的链接。
4.文件大小控制在64K以内（含页内图片文件）。
5．注意各种对齐方式的使用(水平对齐、垂直对齐、内容与边框距离的控制等)。
6.不得遗漏“标题名”的设计制作，形成“无标题文档”。
7．网页页面的高度一般控制在三屏以内，超过三四屏应使用书签(锚点)技术。
四、其他一些规范1．站点和网页的主题明确突出，去除与主题无关的一切东西。
所有应用技术服从于内容的需要，禁用妨碍主题内容的技术。
2．站点中所有网页间的链接有清晰的结构，形成易于漫游的导航系统，不得出现任何一页没有相应的链接，让用户点击“后退"按钮3．所有网页不得出现任何一个无效链接和无效图片。
web规范
web规范网页开发是一项极富挑战性的工作，为了保证开发出符合用户期望、可用性高、易于维护的网页，制定一套完善的Web规范非常重要。
本文将探讨一些常见的Web规范，帮助网页开发者更好地开发优质的网页。
1. 响应式设计：现如今，用户使用各种不同的设备访问网页，包括桌面电脑、平板电脑和智能手机等。
为了确保网页在不同设备上都能良好展示，响应式设计是必不可少的。
网页需要根据屏幕尺寸自动适配布局和样式，以提供更好的用户体验。
2. 浏览器兼容性：不同的浏览器对网页的解析和渲染方式可能不同，因此开发人员需要确保网页在主流浏览器中都能正常运行。
测试网页在不同浏览器中的兼容性，并及时修复发现的问题是非常重要的。
3. HTML和CSS代码规范：编写整洁、易于理解和维护的代码是一个好习惯。
开发人员应该遵循命名规范，使用合适的标签和语义化的HTML结构，同时使用层叠样式表(CSS)编写样式，并且遵循一致的选择器命名和样式规则。
4. 图片和多媒体内容优化：网页中的图片和多媒体内容可能会占用大量的带宽和加载时间。
为了提高网页的加载速度和用户体验，开发人员应该优化图片和多媒体内容的大小和格式，使用合适的压缩和编码技术。
5. 表单设计：表单是网页中常见的交互组件，用户可以通过表单提交信息。
为了提高用户体验和数据的准确性，表单需要设计得易于填写和提交。
同时，表单需要进行前端和后端的验证，以确保输入的数据的合法性和安全性。
6. 导航和链接结构：良好的导航和链接结构可以帮助用户更轻松地浏览网页内容。
开发人员应该设计易于理解和操作的导航和链接，保持页面的层次结构清晰和一致。
7. 页面加载速度：用户对网页的加载速度非常敏感，长时间的加载会导致用户流失和不良的用户体验。
开发人员应该采取措施来优化网页的加载速度，如压缩和合并CSS和JavaScript文件，使用缓存技术和异步加载等。
8. SEO优化：搜索引擎优化(SEO)是提高网页在搜索引擎结果中排名的一系列技术和策略。
网页设计与制作常见60问解答
⽹页设计与制作常见60问解答1. 为什么⽹站的⾸页⽂件名⼀般命名为index.htm或index.asp？⽹站的⾸页⽂件名为index.htm或index.asp，这是⼀种⽹站⾸页命名规范。
在浏览器地址栏输⼊⽹址，即使不输⼊index.htm或index.asp，浏览器也能正确找到该⽂件并正确显⽰出来，因为Web服务器默认的⾸页⽂件名是index.htm或index.asp。
此外，通过设置，Web 服务器常⽤的默认⾸页⽂件名格式有index.htm、default.htm、index.asp、default.asp等。
2. 巧妙设置分辨率在制作⽹页时，有时会发现，制作好的⽹页在本地计算机上浏览时很正常，但在另外⼀台计算机上浏览时却发现⽹页的布局乱套了，这是因为各个计算机的分辨率不同所致。
在Dreamweaver⽂档窗⼝中的右下⾓，显⽰当前⽂档的分辨率⼤⼩。
单击当前分辨率数字，在弹出的菜单中可以为当前的页⾯指定显⽰分辨率，通过修改可以使⽹页更具灵活性。
3. 打开⽂件及插⼊⽹页图像的快速⽅法在Dreamweaver⾥，进⾏⽹页编辑时，不必通过菜单栏⾥的【打开】命令来打开⽂件，⼀个更快的⽅法是利⽤【⽂件】⾯板，打开相关⽂件，直接⽤⿏标拖动⽂件到⽂档编辑窗⼝即可；同样，要在⽹页上插⼊图像等元素，也可直接通过【⽂件】⾯板将图像⽂件拖动到⽹页上。
4. 怎样仅仅复制⽂字⽽不想要其格式？当从Dreamweaver中复制⽂字到另⼀个应⽤程序中时，HTML代码和⽂字⼀起被复制过去了。
此时⼀般都⽤快捷键【Ctrl＋C】来复制，如果在复制的时候多按⼀个【C】键则只复制选中的⽂字。
从外部⽂档中粘贴时，如果只要⽂字⽽不想要其格式，可以选择菜单中的【编辑】︱【粘贴⽂本】命令，不要直接⽤快捷键【Ctrl＋V】。
5. 如何巧妙隐藏标签？如果在⽹页中插⼊了不可见的元素时，Dreamweaver会⾃动在页⾯上添加⼀个与之相应的元素标签，以便于选择不可见元素。
《网页设计与制作》相关规范—网站设计通用规范
Xingtai Polytechnic College《网页设计与制作》—相关规范网站设计规范（通用）一、设计风格1、依照网站的定位确定整体的设计风格。
2、主体框架页面、内容页尽量采用方型结构。
禁用长距离的斜线及弧线结构，可允许小范围内的斜线及弧线。
封面页、专题页可不受此限制。
3、设计时尽量在方块区边缘、按钮、标题装饰块上体现设计技巧，拐角可以有曲线变化。
拐角块最大不得超过18像素。
同一页面弧度尽量保持一致。
4、各主要栏目之间要求使用一致的布局，包括一致的页面元素；一致的导航形式，使用相同的铵钮，相同的顺序。
可跟首页有变化。
5、首页及各级页面都必须带有网站的LOGO(建议小于150×54)，并链接到网站首页。
6、统一按兼容分辨率800*600设计。
为了使显示更友好，建议使用778或者760 px设计。
7、网站页面长度建议1屏半到2屏。
原则上长度不超过3屏，宽度不超过1屏。
根据用户习惯和网站需要，国内中文网站综合类、门户类(包括垂直门户)网站可设计超过3屏。
二、图形设计规范1、图片标准尺寸全尺寸banner为468×60px，半尺寸banner为234×60px，小logo为88×31px 另外150×68、120×90，120×60也是标准尺寸，网站logo一般控制在150×54以内，客户要求或特殊广告图片可另定尺寸。
建议首页存储大小不得超过150K(包括图片)，其它页面经压缩后尺寸不得超过70K。
2、图片的分类及命名规则(1) 名称分为头尾两两部分，用下划线隔开。
(2) 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。
(3) 一般来说:⏹放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner⏹标志性的图片我们取名为：logo⏹在页面上位置不固定并且带有链接的小图片我们取名为buttonXingtai Polytechnic College《网页设计与制作》—相关规范⏹在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu⏹装饰用的照片我们取名：pic⏹不带链接表示标题的图片我们取名：title⏹依照此原则类推。
网页设计制作规范要求
网页设计制作规范要求由于互连网的日异普及，客户对网站设计、制作的要求有了很大的提高，因此，我们要把握好每一个细节,使网页设计制作的水平更上一层楼。
以下是网页制作的一些注意事项，希望大家能引起重视.一、网页制作中〈head></head>中必写信息：1、〈title〉**＊＊＊＊</title>＊＊*＊＊*为关键字—-公司名称，不要超20个汉字或100个字母，这一项一般问题不大，但英文公司标题切不可每个字母都大写，这一点一定要注意，中文网站写中文,英文网站写英文,每个页面均要写。
2、语言规范英文版<meta http—equiv=”content—type”content="text/html; charset=iso—8859—1"> 中文版〈meta http—equiv="Content—Type”content=”text/html；charset=gb2312"〉繁体中文<meta http-equiv=”Content—Type”content="text/html；charset=big5"〉3、〈META NAME=”Keywords" CONTENT=”＊**＊**">＊**＊*＊为关键字项，其字数中文控制在25—30单词/字内, 英文控制在3、4百个字符。
（在中文搜索引擎中，一个标点，一个阿拉伯数字，一个英文字母均算一个；在英文搜索引擎中，一个标点,一个阿拉伯数字,一个英文单词均算一个，要求是将重点关键词放在最前面；不要带有排他性描述文字，如最大，最好,第一等；也不要全部由产品简单的罗列堆砌而成；不要与Title，Description有重复描述，否则不仅降低描述质量,而且还无端浪费有限的“介绍文字”资源；故这些最好由业务员在与客户签约时，请厂家来确定，以免不必要的修改，最重要的是以后修改效果可能不太好)”4、<META NAME=”Description" CONTENT=”******” >*＊*＊*＊为网站描述项，其字数中文控制在25-30单词/字内，英文控制在3、4百个字符。
css命名规范
css命名规范CSS（CascadingStyleSheets，层叠样式表）是一种用于定义网页外观的Web标准规范，广泛应用于万维网上的各种HTML文档。
在CSS的编写中应遵循良好的命名规范，这样可以保证CSS在不同的团队协作下编写、维护和管理起来更加顺畅，也有助于后期维护和修改。
CSS命名规范涉及到以下几个方面：一、标签命名标签命名（className idName）应采用简洁的、有意义的词汇，尽可能避免缩写，只使用小写字母和下划线，将空格替换为下划线。
标签名称也可以使用中划线，但无建议，仍建议使用下划线。
例如：class=wrapperid=page_main_body二、变量命名变量命名应采用有意义的、符合变量含义的单词，变量名称以字母或下划线开头，变量名可以是大写字母、小写字母，但尽量不要使用缩写，可以使用中划线。
例如：$page_main_body$page_sub_body三、CSS文件存放路径CSS文件一般存放在与功能相关的文件夹中，要求各文件夹名称明确清楚，其中新建CSS文件命名要尽量使用有意义的名称，可以采用中划线，也可以使用单词缩写。
例如：style/header.cssstyle/footer.cssstyle/common.css四、CSS属性和值命名CSS属性和值应采用小写字母，有些关键词会使用中划线。
常用的颜色可以使用英文（例如：red、blue、green），也可以使用十六进制的颜色代码（例如：#333333）。
例如：font-size: 12px;color: #333;border-width: 1px;五、CSS选择器命名CSS选择器应使用有意义的、符合元素类型含义的单词，有些属性可以直接使用英文单词，有些属性可以使用中划线表示，要尽量避免使用缩写。
例如：#id { }.class { }ul li { }六、CSS优先级CSS的优先级主要以特殊性和权重以及规则的数量来定义，值越高的优先级别越高，优先级越低的越容易被覆盖。
WebUI设计命名规范讲解
Web UI 设计命名规范这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。
(好久没写文章了，有点罗嗦，吼吼~)。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
Web UI 设计命名规范一.网站设计及基本框架结构:1. Container“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.2. Header“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。
这部分还可以命名为:“page-header” (或pageHeader).3. Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。
这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.4. Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.5. Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。
这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.7. Footer“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.二.需要注意的几点:1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
Web UI 设计命名规范讲解(含目录)
Web UI 设计命名规范Web UI 设计命名规范 (1)一.网站设计及基本框架结构: (2)二.需要注意的几点: (2)一.网站设计及基本框架结构:1. Container“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.2. Header“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。
这部分还可以命名为:“page-header” (或 pageHeader).3. Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。
这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.4. Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.5. Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。
这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.7. Footer“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.二.需要注意的几点:1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
不要使用表面形式的命名.如:red/left/big等。
2.组合命名规则:[元素类型]-[元素作用/内容]如:搜索按钮: btn-search登录表单:form-login新闻列表:list-news3.涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited推荐网页制作规范01 命名规范文件命名的原则：以最少的字母达到最容易理解的意义。
qxt标准(一)
qxt标准(一)QXT标准什么是QXT标准QXT标准是一种网页设计与开发的规范，旨在使不同的页面和应用程序有一个共同的基础，可以共享和重用代码。
它被广泛应用于现代Web设计和开发中。
QXT标准的起源QXT标准最初由W3C（World Wide Web Consortium）提出，W3C旨在推动HTML，CSS和其他WEB技术的发展。
QXT标准被设计为一种形式良好，可处理的标记语言，使Web开发者能够以一致的方式创建网页。
QXT标准的优势QXT标准有以下一些优势：•可读性: QXT标准减少了HTML文件中的嵌套和标签，使得它易于阅读和理解。
•良好的可访问性: QXT标准使得开发可访问的网页更加容易，也使得页面在不同终端上具有良好的可访问性。
•遵守国际标准: QXT标准是W3C的一个标准，是在全球范围内推行的，因此得到了全球Web开发者的广泛支持。
QXT标准特点QXT标准具有以下独特的特征：•可重复性: QXT标准具有可重复性，因此可以进行测试和测量来确保一致性。
•可扩展性: QXT标准是可扩展的，可以通过添加新模块来扩展页面和应用程序功能。
•容错性: QXT标准具有容错性，因为即使有一些标记存在错误或已被标记为无效，大多数浏览器仍然能够正确解释网页。
QXT标准使用方式使用QXT标准可以遵循以下步骤：1.遵循QXT标准语法。
2.使用CSS来格式化页面，遵循QXT规范中的CSS规范。
3.遵循QXT标准的命名约定。
4.使用良好的编码实践，如使用有意义的变量名和注释。
5.遵循web性能优化技术。
结论QXT标准是一种规范化的网页设计和开发方式，可以使Web开发者更好地创建可访问性更强、兼容性更好的网站。
通过遵循QXT标准的方法，可以使Web页面更加一致和可重用。
QXT标准的适用范围QXT标准适用于各种Web页面和Web应用程序，包括静态页面、动态页面、内容管理系统（CMS）、电子商务网站等。
QXT标准的未来随着移动Web的普及，QXT标准在移动Web开发中的应用也越来越广泛。
WEB前端开发规范
WEB前端开发规范WEB前端开发规范WEB前端开发规范目录1、规范目的2、基本准则3、文件规范4、文件规范5、html书写规范6、css书写规范7、JavaScript书写规范8、图片规范9、注释规范10、开发及测试工具约定11、其他规范12、CSSHack1规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。
本文档如有不对或者不合适的地方请提出来,基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范3.1、html,css,js,images文件均归档至约定的目录中;23 3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。
例如：我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如：微博改版版块名称_时间日期.cssnew_blog_1212.css4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4html书写规范4.1、文档类型声明及编码:统一用;编码统一为。
目的:统一性和网站提高开发合作效率。
4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。
4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。
WEB规范
WEB标准化页面制作规范目录1.引言 (3)1.1.制作规范编写目的及原则 (3)1.2.制作规范适用的工作人员 (3)1.3.制作规范制定的范围 (4)1.4.制作规范适用的产品范围 (4)2.站点目录结构 (4)2.1.目录名称的命名 (4)2.2.站点目录层次结构 (4)3.HTML代码编写部分 (5)3.1.页面文件的大小 (5)3.2.页面文件内容显示时长 (5)3.3.代码的编写格式 (6)3.4.文件名称的命名 (6)3.5.文件的标准名称 (6)3.6.DOCTYPE声名 (7)3.7.XMLNS命名空间声明 (7)3.8.META标签描述 (7)3.9.TITLE页面标题 (8)3.10.引入CSS样式文件 (8)3.11.引入SCRIPT脚本文件 (8)3.12.代码的结构 (9)3.13.表格代码定义 (9)3.14.标签属性值定义 (9)3.15.标签属性的缩写 (10)3.16.引入图片的定义 (10)3.17.页面内容的长度定义 (10)3.18.代码的测试 (10)3.19.代码的校验 (11)4.CSS代码编写部分 (12)4.1.文件的大小定义 (12)4.2.代码的编写格式 (12)4.3.文件名称的命名 (12)4.4.基本文件 (12)4.5.文件的编码 (13)4.6.ID和CLASS命名的规范 (13)4.7.注释的写法 (14)4.8.代码书写样式 (14)4.9.通用样式定义标准 (15)5.内容制作部分 (15)5.1.图片大小 (15)5.2.图片的名称 (16)5.3.关于1像素透明图片 (16)5.4.图片的应用格式 (16)5.5.内容宽度的适应 (17)5.5.1.可拉伸的内容定义 (17)5.5.2.适当拉伸的内容定义 (17)5.5.3.不可拉伸的内容定义 (18)1. 引言W3C是“World Wide Web Consortium”的缩写，中文名称为“万维网组织”。
网页开发规范
网页开发规范在当今数字化时代，网页已经成为一种不可或缺的媒介，被广泛应用于各种领域。
然而，由于网页开发过程涉及众多技术，代码的质量和规范性对于网页的可用性和用户体验至关重要。
为了确保网页开发的质量和一致性，以下是一些网页开发规范的建议和指导。
1. 文件结构和命名规范一个良好的文件结构能够提高网页开发的效率和可维护性。
建议采用以下文件结构：- index.html：网页的首页文件- css/：存放所有的CSS文件- js/：存放所有的JavaScript文件- images/：存放所有的图片文件- fonts/：存放所有的字体文件- 其他相关文件夹和资源文件和文件夹的命名应该简洁明了，并且使用小写字母和短横线进行连接，例如：index.html、main.css、logo.png。
2. HTML规范HTML是网页的骨架，应该遵循以下规范：- 使用语义化标签：使用适当的HTML标签来描述网页的结构，例如<header>、<nav>、<main>和<footer>。
- 合理嵌套标签：确保标签的嵌套关系正确，避免出现不必要的嵌套和重复。
- 遵循W3C标准：始终检查HTML代码的语法错误，确保符合W3C的标准。
3. CSS规范CSS用于控制网页的样式和布局，应该遵循以下规范：- 使用外部样式表：将样式定义放在外部CSS文件中，提高代码的可维护性和重用性。
- 使用语义化类名：为HTML元素添加有意义的类名，方便理解和重用样式。
- 避免使用行内样式：尽量避免在HTML标签中直接添加样式，而是通过CSS来控制样式。
- 选择器规范：选择器名称使用小写字母和短横线进行连接，避免使用过于复杂的选择器。
4. JavaScript规范JavaScript用于实现网页的交互和动态效果，应该遵循以下规范：- 使用严格模式：在JavaScript代码中添加"use strict"，强制执行严格模式，减少错误和不规范的写法。
css命名规范
css命名规范CSS（CascadingStyleSheet）是一种用于定义网页表现形式的语言，它可以用来定义用户界面的外观。
在CSS中，我们需要使用有意义的命名来表示不同的元素，以便随后的维护和管理。
只有恰当的CSS命名规范，才能更好地将不同的元素区分开来，有效地保持管理CSS。
为了使得CSS命名能够更有意义，很多专业开发者都建议采用一定的CSS命名规范。
事实上，没有规范的CSS命名可能会导致混乱，从而影响网站的性能和可维护性。
首先，CSS命名规范要求有明确的命名空间，例如由“.class-name”和“#id-name组成的CSS类名和ID。
这样可以避免命名冲突，以及更有效地查找和追踪CSS的来源。
其次，为了使CSS代码更可读，CSS命名规范也应该遵守一定的结构，使其表示出类名的含义。
例如，为了表示导航菜单的宽度，可以使用“nav-menu-width”这样的命名。
同样，结构也可以帮助更有效地检索样式表中的CSS styles。
此外，CSS命名规范也应当更加关注性能和可扩展性。
CSS命名规范应该尽量保证CSS文件的简洁性，避免不必要的冗余或“拼写错误”。
同时，CSS命名规范也应当考虑到不同设备和浏览器对CSS命名的支持情况。
最后，现代CSS命名规范还强调模块化设计，即将网站的样式表分解为几个独立的CSS模块，每个模块都有自己的CSS文件。
这样可以有效地分离管理不同的CSS样式，并使模块之间的分享更加方便。
以上就是关于CSS命名规范的一些基本介绍，现在许多开发者都在尝试使用CSS命名规范，以提高网站的可维护性和性能。
此外，有许多不同的CSS命名规范，如 BEM，OOCSS SMACSS等，可以根据项目的需要来挑选和使用。
页面设计规范
页面设计规范页面设计规范指的是为了提高网页设计的质量、用户体验和可用性而制定的一系列设计指导原则和规则。
页面设计规范可以包括布局规范、颜色规范、字体规范、导航规范、响应式设计规范等方面的内容。
下面是一份关于页面设计规范的1000字的详细描述：一、布局规范：1. 网页布局应该具有明确的层次结构，例如使用明确的标题和子标题来组织内容。
2. 对于长篇内容的页面，应该考虑使用导航条或目录来帮助用户快速导航到感兴趣的内容。
3. 确保页面的重要内容位于用户视线的焦点区域，避免将重要信息放置在不显眼的地方。
4. 确保页面布局在不同屏幕分辨率下的兼容性，可以通过使用响应式设计实现。
5. 页面布局应该简洁明了，避免过多的元素和装饰。
6. 各个页面之间的布局风格应保持一致，以提供一致的用户体验。
二、颜色规范：1. 使用色彩搭配时应遵循色彩的规范和原则，如使用相近色、对比色等。
2. 使用符合品牌形象或页面主题的颜色，以提高用户对页面的辨识度。
3. 避免使用过于刺眼或引起不适感的颜色组合。
4. 不同颜色之间的对比度应足够高，以保证文本和图像的可读性。
5. 使用颜色的过渡和渐变时应注意色调的协调性，避免视觉冲击。
三、字体规范：1. 使用易读的字体，如Arial、Helvetica等，避免使用难以辨认的字体。
2. 使用一致的字体和字号，以保持页面的统一性。
3. 文本的行间距和字间距应适宜，避免过于拥挤或过于稀疏。
4. 文本的对齐方式应该明确，避免出现段落错位或不对齐的情况。
5. 对于不同屏幕分辨率的设备，应考虑使用相对单位来设置字体大小，以保证页面的可读性。
四、导航规范：1. 导航栏应该具有明确的标题和子标题，以帮助用户快速找到需要的内容。
2. 导航栏的位置应该固定在页面的顶部或底部，以便用户随时访问。
3. 导航栏的样式应该与页面的整体风格一致，以提供一致的用户体验。
4. 导航栏的链接应该具有明确的命名，避免使用过于复杂或难以理解的词汇。
css命名规范
css命名规范随着现代网站的设计及开发的不断发展，CSS名规范也越来越重要。
CSS名规范是定义一种统一的编写 CSS 代码的标准，它为 CSS 发者提供了指导，让他们可以创建出更为可维护和可读的代码。
本文将探讨 CSS名规范的历史、目的、有用性以及它的作用。
历史CSS名规范是最早出现在 2001的 O’Reilly CSS码指南中的，这是一本关于 CSS码技术的参考书，其中提供了有关如何使用 CSS 建网页的基础技术指南。
它还提出了一下关于 CSS名规范的概念：1. 使用小写字母2.免使用数字和字母组合3. 使用有意义的名称4. 使用简洁的缩写随着时间的推移，有关 CSS名规范的讨论也变得越来越多，最近几年，CSS名规范更是风靡一时。
目的CSS名规范的目的是为了帮助开发者更容易掌握自己的 CSS 代码，从而提高开发效率和降低维护成本。
使用统一的命名有助于开发者快速定位 CSS 代码，也有助于合作者之间统一的编码标准，这样的话，即使在多人合作的情况下也能够保持代码的一致性和可读性。
有用性使用 CSS名规范有几种有用的优势：1.名统一：有助于维护者从代码中快速定位 CSS素，使用一致的名称可以极大地提高开发效率。
2.容易被多人理解：它提供了一种统一的语言，多人之间更容易协作，他们使用这种语言来表示他们的代码，使得代码可读性增强，也让多个开发者之间的交流变得更容易。
3.块化设计：使用统一的命名规范能够更好的体现HTML CSS 之间的关系，这样一来开发者可以更容易地构建出可维护的模块。
作用CSS名规范的作用有很多，它提供了一个统一的规范，从而使代码变得更加可读和可维护，使得开发者可以更快速地定位代码，同时也能够让代码有更好的可读性。
此外，使用正确的命名能够提高开发者之间的协作效率，并且也有助于代码的一致性，最后也能够让网页有更好的模块化设计。
结论CSS名规范的历史、目的、有用性以及它的作用已经清楚的探讨了。
CSS中的CSS命名规范有哪些
CSS中的CSS命名规范有哪些在网页设计和开发中，CSS（层叠样式表）是塑造页面样式和布局的关键工具。
而一个良好的 CSS 命名规范对于提高代码的可读性、可维护性和团队协作效率来说至关重要。
接下来，让我们详细探讨一下CSS 中的命名规范。
首先，我们来谈谈为什么需要命名规范。
想象一下，在一个大型的项目中，如果 CSS 类名和 ID 命名混乱、毫无规律，那么当需要修改样式或者查找特定元素的样式时，就会像在一团乱麻中寻找一根特定的线一样困难。
相反，遵循统一且有意义的命名规范，可以让开发者快速理解每个元素的用途和样式的作用范围，大大提高开发效率。
常见的命名方式有很多种，比如使用描述性的词汇。
这意味着类名和ID 应该能够清晰地传达元素的用途或特征。
比如，对于一个导航栏，我们可以命名为“navbar”；对于一个主要内容区域，可以命名为“maincontent”。
这样，当其他人看到这些名称时，就能立刻明白它们所代表的元素。
另外，采用驼峰命名法（CamelCase）或连字符分隔命名法（kebabcase）也是常见的选择。
驼峰命名法例如“headerTitle”，连字符分隔命名法如“headertitle”。
这两种方式各有优缺点，驼峰命名法在一些编程语言中比较常见，看起来相对简洁；而连字符分隔命名法更符合 CSS 的习惯，并且在一些情况下更易于阅读和区分单词。
在命名时，还需要注意避免过于通用的名称。
比如说“box”“container”这样的词汇，它们太过宽泛，不能准确地描述元素的具体用途。
应该尽量具体和明确，像“productdetailsbox”“articlecontainer”这样。
对于模块和组件的命名，要有一定的层次结构。
比如，如果有一个博客页面，其中包含文章列表和文章详情两个部分，可以将文章列表的样式命名为“blogarticlelist”，文章详情的样式命名为“blogarticledetail”。
Web网页设计命名规范
Web UI 设计(网页设计)命名规范Web UI 设计命名规范一.网站设计及基本框架结构:1. Container“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.2. Header“header” 是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。
这部分还可以命名为:“page-header” (或pageHeader).3. Navbar“navbar“等同于横向的导航栏，是最典型的网页元素。
这部分还可以命名为:“nav”, “navigation”, “nav-wrapper”.4. Menu“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “,“links“，“sidebar-main”.5. Main“Main”是网站的主要区域，如果是博客的话它将包含的日志。
这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secon dary-content“.7. Footer“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.二.需要注意的几点:1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
不要使用表面形式的命名.如:red/left/big等。
2.组合命名规则:[元素类型]-[元素作用/内容]如:搜索按钮: btn-search登录表单:form-login新闻列表:list-news3.涉及到交互行为的元素命名:凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:鼠标悬停：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited三.Photoshop图层结构规范:Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。
DIV+CSS命名规范
DIV+CSS规范命名大全集合页头：header 如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id 区别及用法登录条：loginBar 标志：logo 侧栏：sideBar广告：banner 导航：nav 子导航：subNav菜单：menu 子菜单：subMenu 搜索：search滚动：scroll 页面主体：main 内容：content标签页：tab 文章列表：list 提示信息：msg小技巧：tips 栏目标题：title 加入：joinus指南：guild 服务：service 热点：hot新闻：news 下载：download 注册：regsiter状态：status 按钮：btn 投票：vote合作伙伴：partner 友情链接：friendLink页脚：footer版权：copyRight常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u1.CSS的 ID 的命名也许你需要了解class与Id区别外套：wrap 主导航：mainNav 子导航：subnav页脚：footer 整个页面：content 页眉：header版权：copyRight 商标：label 标题：title主导航：mainNav(globalNav) 顶导航：topnav边导航：sidebar 左导航：leftsideBar 右导航：rightsideBar旗志：logo 标语：banner 菜单内容1： menu1Content菜单容量：menuContainer 子菜单：submenu边导航图标：sidebarIcon 注释：note面包屑：breadCrumb(即页面所处位置导航提示)容器：container 内容：content 搜索：search登陆：login 功能区：shop(如购物车，收银台)当前：currentDIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML 中重复使用调用。
hj 620-2011
hj 620-2011
万维网技术标准《GB/T Īūhj 620-2011》是由国家标准局拟定的国家标准，旨
在改善互联网用户信息质量，提高网页设计、建设和信息管理的水平。
该标准规定了网页内容以及网页视觉和功能要求等内容，为了确保网页能够正常显示和运行，国家标准局制定了了相关数据格式及格式命名法、控制文本颜色和文字大小的规范等内容，从而向互联网用户提供更优质的内容。
GB/T Īūhj 620-2011标准采用结构化化的设计方法，主要面向以下三个方面：
结构设计，包括网页结构、信息内容以及多媒体和可访问性；交互设计，包括体验、系统和UI设计；数据设计，包括搜索引擎优化以及私人信息和用户行为追踪等。
此外，该标准还规定了了互联网用户上网纪律、不可抗力影响等，以保证用户的网络安全和平等权利。
GB/T Īūhj 620-2011标准的实施，对于改善互联网信息质量、提供更好的网页
设计服务、促进互联网用户安全以及改善用户体验具有重要意义。
它不仅能提升互联网用户的安全感和实用性，而且还能激发更多的网站创新和开发，促进中国互联网的发展和普及。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Web UI 设计(网页设计)命名规范
这套规范并非单纯的CSS、html或JavaScript命名规范，它涉及了很多使用PhotoShop这类设计工具进行网页设计过程中的命名规范。
(好久没写文章了，
有点罗嗦，吼吼~)。
首先我是出于公司几位美工的设计效果图源文件没有对图层命名而开始考虑总结一套的，还有一个原因就是网上大多命名规范都是关于编码的，也就是那些css、html、js和一些服务器端语言的，至于设计方面的命名规范实在是很少。
但是毕竟设计师也是技术团队的成员，而且前端开发工程师是要使用设计师的效果图源文件的，所以统一命名规范和设计规范对于团队的协作和工作效率肯定是有好处的。
这套WebUI设计命名规范总结自我的一些Web设计经验和国外设计师的命名方式推荐。
Web UI 设计命名规范
一.网站设计及基本框架结构:
1. Container
“container“ 就是将页面中的所有元素包在一起的部分，这部分还可以命名为: “wrapper“, “wrap“, “page“.
2. Header
“header”是网站页面的头部区域，一般来讲，它包含网站的logo和一些其他元素。
这部分还可以命名为:“page-header” (或 pageHeader).
3. Navbar
“navbar“等同于横向的导航栏，是最典型的网页元素。
这部分还可以命名
为:“nav”, “navigation”, “nav-wrapper”.
4. Menu
“Menu”区域包含一般的链接和菜单，这部分还可以命名为: “subNav “, “links“，“sidebar-main”.
5. Main
“Main”是网站的主要区域，如果是博客的话它将包含的日志。
这部分还可以命名为: “content“, “main-content” (或“mainContent”)。
6. Sidebar
“Sidebar” 部分可以包含网站的次要内容，比如最近更新内容列表、关于网站的介绍或广告元素等…这部分还可以命名为: “subNav “, “side-panel“, “secondary-content“.
7. Footer
“Footer”包含网站的一些附加信息，这部分还可以命名为: “copyright“.
二.需要注意的几点:
1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。
不要使用表面形式的命名.
如:red/left/big等。
2.组合命名规则:
[元素类型]-[元素作用/内容]
如:搜索按钮: btn-search
登录表单:form-login
新闻列表:list-news
3.涉及到交互行为的元素命名:
凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:
鼠标悬停:：hover 点击：click 已浏览：visited
如:搜索按钮: btn-search、btn-search-hover、btn-search-visited
三.Photoshop图层结构规范:
Photoshop图层命名遵循树形结构，凡某元素组成的图层大于3层，即可形成组，所有图层尽量避免使用默认命名(图层+编号)。
第一级图层结构如下图:
第二级结构图例(医院网站):
第三级结构图例及效果图对比(医院新闻栏目)：
效果图
图层命名结构四．常用命名汇总:
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告条:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
下拉菜单:dropMenu 工具条: toolbar
表单:form
栏目:column
箭头:arrow
搜索:search
搜索按钮:btn-search 滚动条:scroll
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
链接:links
页脚:footer
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyright
网站地图: sitemap。