- 浏览: 359596 次
- 性别:
- 来自: 保定
文章分类
- 全部博客 (266)
- ERP (69)
- ERP-SAP-MM (50)
- ERP-SAP-FICO (23)
- ERP-SAP-HR (2)
- ERP-SAP-HU (1)
- ERP-SAP-BASIS (4)
- ERP-SAP-EWM (2)
- div+css (34)
- flex (9)
- 网页设计理论 (17)
- 网页代码理论 (1)
- 网页代码技巧 (12)
- UI设计理论 (6)
- flash (3)
- 界面设计 (14)
- 数码照片处理 (7)
- 影像处理 (1)
- logo设计 (3)
- 测试 (6)
- 习惯性思维 (6)
- 心情日记 (14)
- 印刷 (3)
- seo优化 (5)
- 人力资源eHR管理 (3)
- 项目管理相关链接 (1)
- PPT演示沟通 (5)
- 项目管理 (4)
- TAMM40_Part2.rar (1)
- SAP VIM (1)
- SAP使用公司 (1)
- 会计 (1)
- erp-sap-qm (1)
- WEB前端 (0)
最新评论
-
liomao:
火狐浏览器不通用吧?
收藏本站代码及设为首页代码 -
上善如水:
我刚刚开始写网页,看了不少的写作规范写作规范,可是还是有浏览器 ...
UL-LI 标签结合CSS的运用基础 -
ksmjava:
关于技术人员的前途,目前在国内确实得用"惨淡&quo ...
WEB前端设计师需要的技能 -
AlexChen_China:
Web开放工具是如此的丰富啊...初来乍道很多工具都不知道;
前端开发大众手册(包括工具、网址、经验等) -
xiaoqing20:
不错长见识了
什么是UI
1.CSS ID 的命名
外 套: wrap
主导航: mainnav
子导航: subnav
页 脚: footet
整个页面: content
页 眉: header
页 脚: footer
商 标: label
标 题: title
主导航: mainbav(globalnav)
顶导航: topnav
边导航: sidebar
左导航: leftsidebar
右导航: rightsidebar
旗 志: logo
标 语: banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单: submenu
边导航图标:sidebarIcon
注释: note
面包屑: breadcrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: Login
功能区: shop(如购物车,收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写:
<-- Footer -->
内容区
<-- End Footer -->
3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
注:来源于“烟儿圈教程网”
css命名:
页头:header
登录条: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
3.样式文件命名
基本的 base.css
主要的 master.css
布局,版面 layout.css
局部 part.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
4.缩写命名
左浮 fl = float:left;
右浮 fr = float:right;
清楚浮动 clear = clear:both;
左对齐 tl = text-align:left;
右对齐 tri = text-align:right;
居中 tc = text-align:center;
宽度 w1(width) = 1px……..w1000 = 1000px
高度 h1(height) = 1px……..h1000 = 1000px
清楚边框 bd_n = border:none!important;
加粗 fw_b = font-weight:bold;
清楚加粗 fw_n = font-weight:normal;
隐藏块 dp_n = disipay:none;
显示块 dp_b = disipay:block;
清楚背景色 bg_n = background:none;
外边距(上右下左) m_05 = margin:5px;
外边距(上下左右) m_0510 = margin:5px 10px;
外边距(上左右下) m_051007 = margin:5px 10px 7px;
外边距(上) mt_10 = margin-top:10px;
外边距(右) mr_10 = margin-right:10px;
外边距(下) mb_10 = margin-bottom:10px;
外边距(左) ml_10 = margin-left:10px;
内边距(上右下左) p_05 = padding:5px;
内边距(上下左右) p_0510 = padding:5px 10px;
内边距(上左右下) p_051007 = padding:5px 10px 7px;
内边距(上) pt_10 = padding-top:10px;
内边距(右) pr_10 = padding-right:10px;
内边距(下) pb_10 = padding-bottom:10px;
内边距(左) pl_10 = padding-left:10px;
如:<div class="fl h100">www.hemin.cn</div>//适合做大型网站重复调用样式
5.颜色命名
黑色 black = #000
白色 white = #FFF
灰色 gray = #999 #666 #333
红色 gules = #F00
黄色 yellow= #FF0
蓝色 blue = #00F
绿色 green = #0F0
青色 cyan = #0FF
紫色 purple= #F0F
缩写 #F0F = #FF00FF
如:<div><a href="#">hm</a><a class="gules" href="#">hemin</a></div> 皆可
外 套: wrap
主导航: mainnav
子导航: subnav
页 脚: footet
整个页面: content
页 眉: header
页 脚: footer
商 标: label
标 题: title
主导航: mainbav(globalnav)
顶导航: topnav
边导航: sidebar
左导航: leftsidebar
右导航: rightsidebar
旗 志: logo
标 语: banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单: submenu
边导航图标:sidebarIcon
注释: note
面包屑: breadcrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: Login
功能区: shop(如购物车,收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写:
<-- Footer -->
内容区
<-- End Footer -->
3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
注:来源于“烟儿圈教程网”
css命名:
页头:header
登录条: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
3.样式文件命名
基本的 base.css
主要的 master.css
布局,版面 layout.css
局部 part.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
4.缩写命名
左浮 fl = float:left;
右浮 fr = float:right;
清楚浮动 clear = clear:both;
左对齐 tl = text-align:left;
右对齐 tri = text-align:right;
居中 tc = text-align:center;
宽度 w1(width) = 1px……..w1000 = 1000px
高度 h1(height) = 1px……..h1000 = 1000px
清楚边框 bd_n = border:none!important;
加粗 fw_b = font-weight:bold;
清楚加粗 fw_n = font-weight:normal;
隐藏块 dp_n = disipay:none;
显示块 dp_b = disipay:block;
清楚背景色 bg_n = background:none;
外边距(上右下左) m_05 = margin:5px;
外边距(上下左右) m_0510 = margin:5px 10px;
外边距(上左右下) m_051007 = margin:5px 10px 7px;
外边距(上) mt_10 = margin-top:10px;
外边距(右) mr_10 = margin-right:10px;
外边距(下) mb_10 = margin-bottom:10px;
外边距(左) ml_10 = margin-left:10px;
内边距(上右下左) p_05 = padding:5px;
内边距(上下左右) p_0510 = padding:5px 10px;
内边距(上左右下) p_051007 = padding:5px 10px 7px;
内边距(上) pt_10 = padding-top:10px;
内边距(右) pr_10 = padding-right:10px;
内边距(下) pb_10 = padding-bottom:10px;
内边距(左) pl_10 = padding-left:10px;
如:<div class="fl h100">www.hemin.cn</div>//适合做大型网站重复调用样式
5.颜色命名
黑色 black = #000
白色 white = #FFF
灰色 gray = #999 #666 #333
红色 gules = #F00
黄色 yellow= #FF0
蓝色 blue = #00F
绿色 green = #0F0
青色 cyan = #0FF
紫色 purple= #F0F
缩写 #F0F = #FF00FF
如:<div><a href="#">hm</a><a class="gules" href="#">hemin</a></div> 皆可
发表评论
-
精通 CSS 造型设计元素
2010-01-20 13:35 1302CSS 是现代网页设计的重要基石。Web 标准要求使用 CSS ... -
你必须知道的10个不常用的HTML标签
2009-09-10 21:31 987http://www.qianduan.net/you-hav ... -
wofoo表单模板下载
2009-09-10 21:01 880http://wufoo.com/gallery/ -
加个地址栏图标
2009-08-23 21:56 787<link rel="shortcut ico ... -
解决IE8兼容性问题的便捷方法
2009-08-20 09:19 1249微软告知我们:在目前兼容IE 7 的网站上只需添加一行代码(加 ... -
div垂直居中
2009-08-20 08:08 992position: absolute; width:880 ... -
标准化良构之路
2009-08-10 15:24 844专题:标准化良构之路 标准化走到今天,当CSS被我们充分的接 ... -
使用CSS为图片添加更多趣味的5种方法.
2009-07-17 23:38 11071, 阴影效果. 通过使用带有一些padding之的背景 ... -
Blueprint CSS 框架学习笔记概述
2009-07-17 23:34 1589这个 CSS 框架将 html 标签设定为如下情况: 统一 ... -
CSS框架思维雏形与CSS文件精简
2009-07-17 23:31 921假如在你切完所有图之后,假如你切的网站是娱乐性的网站.(重复性 ... -
CSS BUG顺口溜
2009-07-16 22:23 937CSS BUG顺口溜 一、IE边框若显若无,须注意,定是高度 ... -
用CSS替换传统方法
2009-07-16 18:16 876下面的列表将帮助你用CSS替换传统方法: HTML属性以及相对 ... -
UL-LI 标签结合CSS的运用基础
2009-07-16 13:46 1535LI代码的格式化: A).运用CSS格式化列表符: ul l ... -
css相关工具
2009-07-16 13:45 1044附加 工具 http://www.ziuo.cn/box/c ... -
Css单词英汉对照
2009-07-16 13:44 1027margin:页边的空白, (湖、池等的)边缘, 极限, 利润 ... -
Web标准概念--摘抄《CSS布局实录》
2009-07-16 13:43 1076前言 对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏 ... -
用CSS做一个最简单的导航栏
2009-07-16 13:41 1533导航栏是网页中常用的模块,有很多方法可以实现,下面是用css实 ... -
Iframe高度自适应
2009-07-16 13:41 887<iframe width="190" ... -
css背景渐变的技巧与方法
2009-07-16 13:40 2537用css实现网页背景渐变的代码如下: 一、从上往下渐变 ... -
网页布局中常用的列表元素ul ol li dl dt dd讲解
2009-07-16 13:39 2049DIV CSS网页布局中常用的列表元素ul ol li dl ...
相关推荐
### DIV+CSS命名规范 #### 一、概述 在网页设计与开发过程中,合理的命名规范对于提高代码可读性、可维护性和团队协作效率至关重要。本文档将详细阐述一套适用于初学者的`div+css`命名规则,帮助开发者建立起良好...
### DIV+CSS命名规范 #### 一、基本概念与原则 在前端开发中,合理而规范的命名方式对于项目的维护性和扩展性至关重要。一个清晰、一致的命名规则不仅能够提高团队成员之间的协作效率,还能降低后期维护成本。本文...
### DIV+CSS规范命名大全集合 #### CSS规范命名与实践指南 在网页设计与开发过程中,DIV+CSS的布局方式已经成为了业界的标准做法之一。合理的命名规则不仅能够提高代码的可读性和可维护性,还能有效提升团队协作...
### DIV+CSS命名规范的重要性及对SEO的影响 在前端开发领域,DIV+CSS是一种非常重要的网页布局技术。其中,合理的命名规范不仅能够提高代码的可读性和可维护性,还能间接促进网站的搜索引擎优化(SEO)。本文将详细...
以下是对标题和描述中涉及的`DIV+CSS`命名规范的详细说明: 1. **命名原则**: - `ID`通常用于唯一标识页面上的特定元素,比如`#header`代表页面头部,而`class`可以用于多个元素,如`.menu`可能应用于多个菜单项...
在使用`DIV+CSS`时,良好的命名规范至关重要,因为它能帮助开发者更好地理解代码结构,提高开发效率,同时也有利于团队协作和后期维护。 首先,`DIV`是HTML中的一个无语义的块级元素,常用于创建页面布局。在`CSS`...
**一、CSS命名规范** 1. **有意义的命名**:避免使用无意义的ID或类名,如“div1”,“box”等。应采用描述性的名称,如“header”、“content”、“footer”等,这能帮助搜索引擎理解页面结构。 2. **简洁性**:...
在提供的压缩包中,`div+css命名标准.txt` 文件很可能包含了关于这些命名规范的详细说明,值得仔细阅读和学习。而`div+css.pdf` 可能是一本关于`div+css`入门的电子书,涵盖了基础概念、布局技巧、命名规则等内容,...
5. **CSS命名规范**: - 使用全小写字母,如果需要多个单词,使用连字符(-)分隔,例如`user-list`。 - 常用的HTML元素如`div`用于布局,`ul`和`ol`用于无序和有序列表,`span`作为辅助排版元素,`h1`到`h6`表示...
以下是一些推荐的DIV+CSS命名规范: 1. 全部使用小写字母命名,以便于阅读和在服务器之间传输(小写字母在各种系统环境下都有更好的兼容性)。 2. 属性值必须使用双引号括起来,并确保每个类或ID有值,比如class=...
学习CSS命名规范至关重要,因为它能让你的代码更易于理解和维护。一般来说,类名应具有描述性,如`.header`、`.content`、`.footer`,避免使用无意义的数字或字母。同时,遵循BEM(Block Element Modifier)命名方法...
2. **CSS命名规则**:良好的CSS命名规则有助于代码的可读性和团队协作。通常遵循的原则包括: - 使用有意义的英文单词或缩写,如`logo`代表标志,`status`代表状态。 - 避免使用ID选择器,更多地使用类选择器,...
在IT领域,网页制作是至关重要的技能之一,而XHTML、DIV+CSS是构建静态网页的基础工具。XHTML(eXtensible Hypertext Markup Language)是HTML(HyperText Markup Language)与XML(Extensible Markup Language)的...
1. **文件命名规范**: - 全局样式:通常用`global.css`表示,包含通用的样式规则。 - 框架布局:`layout.css`用来定义页面的整体布局结构。 - 字体样式:`font.css`集中管理页面中的字体设置。 - 链接样式:`...
本文将详细介绍一系列常用的DIV+CSS命名规则及其应用场景,帮助开发者更好地理解和运用这些命名规范。 #### 页头(Header) - **含义**:页面顶部的区域,通常包含网站的logo、导航等元素。 - **示例代码**: ```...
命名规则是`DIV+CSS`中不可忽视的一部分,尤其在团队协作中,良好的命名规范可以提高工作效率,减少沟通成本。 首先,我们来看一下一些常见的`DIV`元素的命名: 1. **页头**:通常用`header`,例如`#header`或`....
而良好的`div+css`命名规则对于提高网站的SEO(搜索引擎优化)至关重要,因为清晰、规范的命名可以帮助搜索引擎更好地理解网页内容,从而提高网页的排名。 1. **命名原则**: - **有意义**:名称应直观地反映出...