网页切图、css命名规则

2016-02-19 21:29 268 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享网页切图、css命名规则，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：Logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：Logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

来源:http://www.tulaoshi.com/n/20160219/1626295.html

看过《网页切图、css命名规则》的人还看了以下文章更多>>

CSS制作网页的类以及ids的命名

标签： Web开发

Web开发人员可以通过创建 CSS 类及id名称并使用这些名称来对divs以及其他的格式页面元素进行标识。对开发人员来说，在命名重新定义 XHTML 标记（tags）的CSS selectors时，必须保证其与预定义的标记准确匹配，但就类以及id选择器名称而言，则仁者见仁，智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。在阅读了由Andy C...

留意DELPHI的命名规则

标签：编程语言网络编程

初学DELPHI的人，对自己随手编的程序，函数，过程所起的名字不会太在意。但可要注意，你随意起的名字，有时会给你带来意想不到的麻烦。举例如下：新建一个FORM，加上一个EDIT1，清除其内容，再加上一个LABEL1和BUTTON1。 BUTTON1按钮代码为 procedure TForm1.Button1Click(Sender: TObject); begin label1.caption:=i...

SQL SERVER的命名规则

标签： SQLServer

在SQL SERVER中标识符共有两种类型：一种是规则标识符（Regular identifer)，一种是界定标识符(Delimited identifer)。其中，规则标识符严格遵守标识符的有关格式的规定，所以在Transact_SQL中凡是规则运算符都不必使用定界符。对于不符合标识符格式的标识符要使用界定符［］或‘ ’。标识符格式： 1、标识符必须是统一...

网页制作谈谈CSS样式表的命名规范

标签： Web开发

最近和一程序员合作项目。弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来。结果我打开他的页面，看了看,从头第一个开始就是contentCommon，下面全部是content****. 我说明了我的理由，过了半会，似乎是接受了，却突然来一句:“不要用H标签嘛!还有不要用UL来定义导航等“。对于很多合作过的程序员，大多都是这样，命名规范大多是自成一派。...

CSS样式命名规范

标签： Web开发

命名一直是个让我头痛的问题，特别是那些看上去差不多的模块，所以就得想办法啦，我总结了下面的方法，虽然还在试验中。希望对大家有帮助。欢迎大家提出改进的意见。具体如下：要注意的内容：一，命名所选用的单词应选择不过于具体表示某一状态（如颜色、字号大小等）的单词，以避免当状态改变时名称失去意义。二，样式类名由以字母开头...

查看更多精彩>>