网页制作中规范使用DIV

时间:2024.2.8

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则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、u

1.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(如购物车,收银台)

当前:current

DIV+CSS命名小结:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)

、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。

DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。

2.CSS样式文件命名如下

主要的 master.css

布局,版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css


第二篇:实例详细讲解DIV+CSS网页制作布局技术


标题:实例详细讲解DIV+CSS网页制作布局技术 正文:CSS布局常用的方法:float:none|left|right 取值:none: 默认值。对象不飘浮left: 文本流向对象的右边right: 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class="clear"></div> /*这是违背web标准意图的,只是想说明在它下面的元素需要清除浮动*/</div> CSS:#wrap{width:100;height:auto;}#column1{float:left;width:40;}#column2{float:right;width:60;}.clear{clear:both;}position:static|absolute|fixed|relative取值:static: 默认值。无特殊定位,对象遵循HTML定位规则absolute: 将对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义fixed: 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范relative: 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 它来实现一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div></div> CSS:#wrap{position:relative;/*相对定位*/width:770px;}#column1{position:absolute;top:0;left:0;width:300px;}#column2{position:absolute;top:0;right:0;width:470px;} 他们的区别在哪? 显然,float是相对定位的,会随着浏览器的大小和分辨率的变化而改变,而position就不行了,所以一般情况下还是float布局!CSS常用布局实例单行一列body{margin:0px;padding:0px;text-align:center;}#content{margin-left:auto;margin-right:auto;width:400px;} 两行一列 body{margin:0px;padding:0px;text-align:center;}#content-top{margin-left:auto;margin-right:auto;width:400px;}#content-end{margin-left:auto;margin-right:auto;width:400px;} 三行一列 body{margin:0px;padding:0px;text-align:center;}#content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;}#content-mid{margin-left:auto;margin-right:auto;width:400px;}#content-end{margin-left:auto;margin-right:auto;width:400px;}单行两列 #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:420px;} 两行两列#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;}#bodycenter#dv1{float:left;width:280px;}#bodycenter#dv2{float:right;width:420px;} 三行两列#header{width:700px;margin-right:auto;margin-left:auto;}#bodycenter{width:700px;margin-right:auto;margin-left:auto;}#bodycenter#dv1{float:left;width:28

0px;}#bodycenter#dv2{float:right;width:420px;}#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;clear:both;} 单行三列绝对定位 #left{position:absolute;top:0px;left:0px;width:120px;}#middle{margin:0px190px0px190px;}#right{position:absolute;top:0px;right:0px;width:120px;} float定位xhtml:<div id="wrap"><div id="column"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/</div><divid="column3">这里是第三列</div><divclass="clear"></div>/*用法web标准不建议,但是记住下面元素需要清除浮动*/</div> CSS:#wrap{width:100;height:auto;}#column{float:left;width:60;}#column1{float:left;width:30;}#column2{float:right;width:30;}#column3{float:right;width:40;}.clear{clear:both;} float定位二xhtml<div id="center"class="column"><h1>Thisisthemaincontent.</h1></div><div id="left"class="column"><h2>Thisistheleftsidebar.</h2></div><div id="right"class="column"><h2>Thisistherightsidebar.</h2></div>CSSbody{margin:0;padding-left:200px;/*LCfullwidth*/padding-right:190px;/*RCfullwidth CCpadding*/min-width:200px;/*LCfullwidth CCpadding*/}.column{position:relative;float:left;}#center{width:100;}#left{width:200px;/*LCwidth*/right:200px;/*LCfullwidth*/margin-left:-100;}#right{width:190px;/*RCwidth*/margin-right:-100;}/***IEFix***/*html#left{left:190px;/*RCfullwidth*/}两行三列 xhtml:<div id="header">这里是顶行</div><div id="warp"><div id="column"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class="clear"></div></div><div id="column3">这里是第三列</div><div class="clear"></div></div> CSS:#header{width:100;height:auto;}#wrap{width:100;height:auto;}#column{float:left;width:60;}#column1{float:left;width:30;}#column2{float:right;width:30;}#column3{float:right;width:40;}.clear{clear:both;} 三行三列 xhtml:<div id="header">这里是顶行</div><div id="wrap"><div id="column"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class="clear"></div></div><div id="column3">这里是第三列</div><div class="clear"></div></div><div id="footer">这里是底部一行</div>CSS:#header{width:100;height:auto;}#wrap{width:100;height:auto;}#column{float:left;width:60;}#column1{float:left;width:30;}#column2{float:right;width:30;}#column3{float:right;width:40;}.clear{clear:both;}#footer{width:100;height:auto;} PS:这里列出的是常用的例子,而非研究之用,对一每个盒子,我都没有设置margin,padding,boeder等属性,是因为我个人觉得,含有宽度定位的时候,最好不好用到他们,除非必不得已,因为如果不是这样的话,解决浏览器兼

容问题,会让你头疼,而且产生一系列CSS代码,我觉得这样的效率和效果都不好! CSS布局高级技巧margin和padding总是有可能要用到,而产生的问题如何解决呢?由于浏览器解释容器宽度的方法不同:IE6.0FirefoxOpera等是真实宽度=width padding border marginIE5.X真实宽度=width-padding-border-margin 很明显,第一种下很完美的布局在第二种情况下后果是很凄惨的! 解决的方法是hack div.content{width:400px;//这个是错误的width,所有浏览器都读到了voice-family:"\"}\"";//IE5.X/win忽略了"\"}\""后的内容voice-family:inherit;width:300px;//包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的}html>body.content{//html>body是CSS2的写法width:300px;//支持CSS2该写法的浏览器(非IE5)有幸读到了这一句}div.content{width:300px!important;//这个是正确的width,大部分支持!important标记的浏览器使用这里的数值width(空格)/**/:400px;//IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用}html>body.content{//html>body是CSS2的写法width:300px;//支持CSS2该写法的浏览器有幸读到了这一句} 列等高技巧n行n列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,做法有:背景图填充、加JS脚本的方法和容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法。背景图填充法:xhtml:<div id="wrap"><div id="column1">这是第一列</div><div id="column1">这是第二列</div><div class="clear"></div></div>css:#wrap{width:776px;background:url(bg.gif)repeat-y300px;}#column1{float:left;width:300px;}#column2{float:right;width:476px;}.clear{clear:both;} 就是将一个npx宽的一张图片在外部容器纵向重复,定位到两列交错的位置纵向重复,在视觉上产生- 2007-7-7 20:43:45 Copyright?2006 Alixixi.Com All Rights Reserved 打印版本 | 阿里西西.Alixixi.COM

更多相关推荐:
网页制作个人总结模板

个人实训总结

网页设计教学工作总结

本学期本人担任学校11级计算机专业的网页设计的教学工作。下面就这一学期的教学工作进行总结:一、期初制定计划及落实情况在学期初,按照网页设计教学安排,制定周密详细的教学计划和教学进度表。在教学过程中,自始至终能按…

一个网站设计师的工作总结

我已经在公司工作将近1个月了。刚来的时候还担心无法把工作做好,不知道如何与同事共处。但经过这一个月以来,公司宽松融洽的工作氛围,上司悉心关怀,同事友好相处,让我觉得很温馨。在我工作经历中,让我感到幸运的就是公司…

网页制作HTML总结

美诚国际教育宿州二中网页制作课程小结田老师第一讲HTML的基本结构lthtmlgt根控制标记ltheadgt头控制标记lttitlegt标题lttitlegt标题标记ltheadgt头控制标记尾ltbodygt...

网页制作试用期工作总结

网页制作试用期工作总结认真学习岗位职能工作能力得到了一定的提高根据岗位职责的要求我的主要工作任务是1负责对外宣传具体包括工业园网站建设二期招商画册的设计制作及参加相关展会等2日常接待工作3相关活动的策划及筹备4...

网页制作教学总结

教师个人工作总结范文时间过得真快转眼间一学期的教学工作已接近尾声为了更好地做好今后的工作总结经验吸取教训本人特就这学期的工作小结如下一思想工作方面俗话说活到老学到老本人一直在各方面严格要求自己努力地提高自己以便...

网页设计师年终工作总结

年终工作总结来公司担任网页设计师一职快3个月了,时间虽不长,可我学到了很多东西。每个人都是在不断的总结中成长,在不断的审视中完善自己。在这几个月的时间里,我也是在总结、审视中脚踏实地地完成好本职工作,总结如下:…

网页制作周工作总结6

XXX周总结及计划报表

网页制作周工作总结3

XXX周总结及计划报表

网页制作周工作总结4

XXX周总结及计划报表

网页制作周工作总结5

XXX周总结及计划报表

网页制作周工作总结1

XXX周总结及计划报表

网页制作工作总结(27篇)