网页切图div+css命名
(一)命名规则
内容:content/container 导航:nav 侧栏:sidebar
栏目:column 标志:logo 页面主体:main
广告:banner 热点:hot 新闻:news
下载:download 子导航:subnav 菜单:menu
搜索:search 页脚:footer 滚动:scroll
版权:copyright 友情链接:friendlink 子菜单:submenu
内容:content 标签页:tab 文章列表:list
注册:regsiter 提示信息:msg 小技巧:tips
加入:joinus 栏目标题:title 指南:guild
服务:service 状态:status 投票:vote
尾:footer 合作伙伴:partner 登录条:loginbar
页面外围控制整体布局宽度:wrapper 左右中:left right center
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container 页头:header 内容:content/container
页面主体:main 页尾:footer 导航:nav
侧栏:sidebar 栏目:column 左右中:left right center
页面外围控制整体布局宽度:wrapper
(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu 子菜单: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
主题 themes.css 专栏 columns.css 打印 print.css
文字 font.css 表单 forms.css 补丁 mend.css
布局,版面 layout.css
网页切图div+css命名相关推荐
- DIV+CSS 之 网页切图过程中div+css命名规则
网页切图过程中div+css命名规则 内容:content/container 导航:nav 侧栏:sidebar 栏目:column 标志:logo 页面主体:main 广告:banner 热点:h ...
- 网页制作中规范使用DIV+CSS命名规则(转)
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则内容如下: 页头:header 如:#header{属性:属性值;}或.h ...
- Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法
Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法 首先,制作图象切片(以一张图片为例子) 一.选择"切片"工具,在图像上拖动以分割图像(例如:一张图像切割2 ...
- div+css命名规范大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...
- [转]HTML DIV+CSS 命名规范大全
原文链接 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. ...
- css+隐藏+左侧菜单栏,放在网页左侧的DIV+CSS隐藏菜单代码
放在网页左侧的DIV+CSS隐藏菜单代码- www.webdm.cn body { background: #fff; font-family: "Lucida Grande", ...
- HTML5+CSS期末大作业:环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码
HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码 常见网页设计 ...
- 点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具 移动工具 移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具 快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具 放大镜工具可 ...
- 大熊猫学生网页设计模板 静态HTML动物保护学生网页作业成品 DIV CSS大熊猫野生动物主题静态网页
网页介绍 本学生网页主题为介绍大熊猫形态特征.栖息环境.生活习性等,采用DIV CSS布局,共4个页面. 样式方面整体网页内容区宽度为1200PX,使用CSS设置了网页背景图,导航部分制作了鼠标经过及 ...
- 屏幕适配以及ui切图规范和命名标准
android屏幕适配详解 屏幕级别 屏幕密度 比率(相对) 物理大小(英寸) 像素大小 通常的分辨率 ldpi 120 3 0.75 1 120 mdpi 160 4 1 1 160 320*4 ...
最新文章
- stripes framework(框架)入门教程(附案例分析)
- java中jtansforms,Java3D中的viewplatform的旋转
- CKO将成为企业发展的军师--转自世界名人网
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
- python join()函数
- 【转载】图论 500题——主要为hdu/poj/zoj
- MySQL入门篇(含数据库的备份)
- python中count的作用_python中内置的.count是什么?
- 设计散列表实现通讯录查找系统_[源码和文档分享]利用哈希表实现电话号码查询系统...
- eclipse python插件_pydev插件下载-eclipse中的python插件下载6.0.0 官网最新版-西西软件下载...
- 简评知乎的优点与不足
- 学习日报 day03 实体与标识符 变量与数据类型
- 从FTP入侵到SQL
- python sorted list 包含元组 字典 的多列排序
- java有没有友元函数_c++中友元函数理解与使用
- 判断数据类型的几种办法
- 【排版】LaTeX公式编辑器-Texlive入门
- [转]国外英语教学网页
- win7快速启动栏计算机,win7快速启动栏,教您Win7如何添加快速启动栏
- sencha touch 百度地图扩展(2014-6-24)(废弃 仅参考)
热门文章
- 互联网,我的二十年体验
- axure 抖音部件库_原型技巧:如何用Axure画出抖音APP页面色彩风格(干货技能)...
- java读取properties配置文件路径
- 上海交大计算机基础高万萍老师怎么样,上海交通大学网络教育学院.ppt
- STM32标准库(固件库)分析
- 《诗经》(全集) (1)
- JS实现动态生成二维码,并在中间插入logo
- win10 64位 Compaq Visual Fortran(CVF)安装教程
- linux安装moodle最新版,在linux下安装moodle
- 频率对电感值和电感尺寸的影响 // 《精通开关电源设计》P50:频率对电感值和电感尺寸的影响