网页切图、css命名规则

2016-02-19 21:29 245 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

（本文来源于图老师网站，更多请访问https://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

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

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

网页制作：从切图到生成网页

标签： Web开发

鉴于很多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始： step1:在PhotoShop中打开设计稿，如下图选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧：大面积的色块单独切成一块，尽可能的保持在水平线上的...

留意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开发

怎样做CSS布局呢？ CSS文件的链接方式 1、附加链接：外部CSS文件 2、导入CSS：常用应用多个CSS文件时，将多个CSS导入一个CSS文件中 CSS规则定义有三种 1、类比如.RedText、.BlueText和.BigText等等 2、标签针对原有HTML标签做的重新CSS定义 3、高级伪类、定义了ID的元素，以及综合性定义 CSS规则的应用 ...

查看更多精彩>>