仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 487|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:让XHTML元素的定名划定规矩加倍公道

[复制链接]
若相依 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:12:47 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
你可以轻松地控制页面的布局。
关于CSS中的定名划定规矩(实在我以为是XHTML元素的定名划定规矩加倍公道些)这个成绩,已有良多人在说了,个中也不乏一些一孔之见。不外这类器材也是仁者见仁,智者见智,只需一个团队有一致的定名划定规矩请求,在一样平常开辟和保护中不至于呈现凌乱就应当说是好的定名划定规矩。好比上面这条基础的定名划定规矩:CSS开辟定名划定规矩外 套wrap主导航mainnav子导航subnav页 脚footer全部页面content页 眉header商 标label标 题title顶导航topnav边导航sidebar左导航leftsidebar右导航rightsidebar旗 志logo标 语banner子菜单submenu容器container内容content以后的current成绩是,下面的诸如leftsidebar,rightsidebar等具有很强指向性的定名在今后的结构变更中会怎样呢?假如left呈现的地位不是左边,是两头大概是右边怎样办呢?假如rightsidebar呈现在左边怎样办呢?这时候的定名仿佛有点分歧逻辑了。有人常和我说,你如许的思索成心义吗?过剩的!真正有几个网站会用一样的布局往做两次纷歧样的结构,顶多就是改版了,改版的时分保持构都变了,如许的思索完整过剩。切实其实,常常会有如许的成绩,有些网站纷歧次成形到下次改版前作风基础上不会改动,可是有些网站,好比我的博客,你再往看看PJBlog的官方博客,一样的布局却有一模一样的体现。
看上面的代码:

  • <div>
  • <div>content</div>
  • <div>bar1</div>
  • <div>bar2</div>
  • </div>
怎样往定名他们呢?bar1和bar2能够呈现在两侧,也大概呈现在一侧,不管利用right、left、middle都不太符合。那末怎样往定名会对照符合一点呢?
这里供应一个来自Adobe.com的创意,它利用的是父元素-栏目组-栏目,个中栏目(column)利用无实践意义的字符暗示,如A、B、C等。比方wrap-AB-A,意义已ID为wrap的元素下包括着两个div——A和B,如今要举行操纵的是A。如许的定名完整和元素没有干系,并且意义还对照明晰。比方下面的定名就能够写成:

  • <divid="container">
  • <divid="container_ABC_A">content</div>
  • <divid="container_ABC_B">bar1</div>
  • <divid="container_ABC_C">bar2</div>
  • </div>
"container_ABC_A",申明是对container下有三个并列的元素(它们的ID分离是A、B、C),今朝指向的是第一个,即A。如许做的优点就是不受结构的影响,称号和页面终极体现想分别,不外一个弱点就是,下由于A、B、C的意义使得再次嵌套的时分定名有点“乱”,如id="container_ABC_A_abc_a",条理深了就不太明晰了。
团体感到如许的定名对照新奇,十分值得自创。不外正如一入手下手所说的,“只需一个团队有一致的定名划定规矩请求,在一样平常开辟和保护中不至于呈现凌乱就应当说是好的定名划定规矩”。
原文毗连:http://www.dudo.org/article.asp?id=246

Table中布局中,垃圾代码会很多,一些修饰的样式及布局的代码混合一起,很不利于直观。而Div更能体现样式和结构相分离,结构的重构性强。
海妖 该用户已被删除
沙发
发表于 2015-1-18 05:31:53 | 只看该作者
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时,就要多花时间对其产生初步的印象。此外,多操作也是非常重要的。
再见西城 该用户已被删除
板凳
发表于 2015-2-2 16:51:45 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
飘灵儿 该用户已被删除
地板
发表于 2015-2-8 03:45:57 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
精灵巫婆 该用户已被删除
5#
发表于 2015-2-24 14:09:09 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
透明 该用户已被删除
6#
发表于 2015-3-7 12:59:43 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
若相依 该用户已被删除
7#
 楼主| 发表于 2015-3-15 07:28:17 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
变相怪杰 该用户已被删除
8#
发表于 2015-3-21 23:32:14 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-20 22:59

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表