仓酷云

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

[DIV+CSS] 来谈谈:页面重构中的模块化头脑:了解好款式的感化域

[复制链接]
萌萌妈妈 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:20:21 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
你的设计不仅仅用于web浏览器,也可以发布在其他设备上,比如PowerPoint。
破洛洛文章简介:要做好模块化,我以为了解好款式的感化域是很主要的,以是将这部分作为这个系列的第一篇。
好久没有更新blog了,这段工夫其实是产生了良多的事,累身累心。但仍是有良多想做的事,好比更新merceCSS、把一向以来所总结的有关模块化的内容收拾出来跟人人分享、列入交换会等等。
模块化计划我已提过良多了,像《从宜家的家具计划讲模块化》、《页面重构中的模块化头脑》、《页面重构中的组件制造要点》都是跟模块化相干的,不外之前一向没有讲到详细完成方面的内容,只是一些头脑。此次重点讲一下完成方面的内容,权当到今朝为止我对模块化的一些总结收拾。
要做好模块化,我以为了解好款式的感化域是很主要的,以是将这部分作为这个系列的第一篇。
写历程序的同砚应当都晓得,变量是有感化域的(不晓得的同砚本人往问谷歌,这里就不作注释了),款式的界说也一样存在着感化域的成绩,即界说的感化局限,很简单就可以了解,以下面的p的感化域:
/*感化域:全局*/p{text-indent:2em;}
/*感化域:.demo这个类中*/.demop{color:#000000;}
款式选择器的优先级是进修款式的基本常识,一同复杂回忆下:


  • 标签的权值为0,0,0,1
  • 类的权值为0,0,1,0
  • 属性选择的权值为0,0,1,1
  • ID的权值为0,1,0,0
  • important的权值为最高1,0,0,0
利用的划定规矩也很复杂,就是选择器的权值加到一同,年夜的优先;假如权值不异,后界说的优先。固然很复杂,但假如誊写的时分没有注重,很简单就会招致CSS的反复界说,代码冗余。
从下面我们能够得出两个关头的要素:

  • 权值的巨细跟选择器的范例和数目有关
  • 款式的优先级跟款式的界说按次有关
懂得款式的权值后有甚么感化呢?好比能够如许用:举一个最复杂的例子,
body{color:#555555;}.demo{color:#000000;}
<p>这里的笔墨色彩受全局界说的影响</p>
<divclass="demo"><p>这里的笔墨色彩受类demo界说的影响</p></div>
<pclass="demo">这里的笔墨色彩受类demo界说的影响</p>
晓得了款式的权值,你就晓得下面例子的体现是如何的了。进一步的使用,就是模块化了,好比《从宜家的家具计划讲模块化》中的例子,具体请移步。

破洛洛文章简介:要做好模块化,我以为了解好款式的感化域是很主要的,以是将这部分作为这个系列的第一篇。

再来讲说“感化域”,信任人人很简单就会想到“全局”、“大众”这些词,存眷过模块化的同砚应当都晓得,网上说得最多的一种“模块化”,就是像header、footer如许的以年夜地区分别。在客岁web尺度交换会(页面重构公道化会商)上,克军提出了“款式的三层架构”——大众划定规矩层、大众模块层、项目层。这些都有它们合用的局限,并且最年夜的长处是简单了解和使用。这里也不再做重诉了,感乐趣的同砚能够找找相干的文章。
我在这一块的分别上,有点相似克军的“款式的三层架构”,有一点小的不同,我是以“感化域”来分的:大众级(全局)、栏目级(部分大众)、页面级。怎样分别这个“感化域”呢?很复杂,全局的global就是大众级的;只在栏目顶用到的部分global是属于栏目级的;只影响单个页面的就是属于页面级的了。
最初几点要出格注重的:


  • 除标签选择器以外,哪些类是利用于大众级、栏目级中的,如
    1. .tx_hit{color:#FF0000!important;}
    复制代码
    的合用局限是大众级的,应当放于全局的界说中。但,假如它只影响于某个栏目,那末就应当把它放于栏目级的感化域中。
  • 标签选择器一样平常属于栏目界说,偶然会用于大众级感化域中,除最基本的reset以外,应尽量少利用在大众级界说中
  • 可承继的属性界说利用时须注重影响的局限,出格是在标签选择器中利用时
接上去的内容就是以这个为基本的,但愿人人能了解“款式的感化域”,关于后继内容的了解会很有匡助。
</p>
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
分手快乐 该用户已被删除
沙发
发表于 2015-1-17 21:56:32 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweavermxXX很难理解。
变相怪杰 该用户已被删除
板凳
发表于 2015-1-26 23:17:07 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
活着的死人 该用户已被删除
地板
发表于 2015-2-5 07:16:51 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
萌萌妈妈 该用户已被删除
5#
 楼主| 发表于 2015-2-11 08:20:33 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
莫相离 该用户已被删除
6#
发表于 2015-3-2 03:54:51 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
小女巫 该用户已被删除
7#
发表于 2015-3-11 04:50:48 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
柔情似水 该用户已被删除
8#
发表于 2015-3-17 22:23:07 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
不帅 该用户已被删除
9#
发表于 2015-3-25 10:20:19 | 只看该作者
可以使用 CSS 检查工具进行设计。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 13:39

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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