来看看：经由过程宜家的家具计划办法进修CSS模块化
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。网页制造WEB文章简介：往过宜家的同砚应当都有注重到，宜家的家具基础都是组合的，可拆装。模块化的特性也是如许，能够组合，绝对自力，在必要的时分能够很便利的加上。那怎样写能够基础完成这类体例呢？
好久之前就晓得宜家，之前在广州的时分也往过一次，给我的印象就是：年夜、贵、巧。中央很年夜，器材很贵，计划很巧。如今住的中央离宜家不远，这个月找工夫往逛了下，中央仍是那末年夜，器材仍是那末贵，计划仍是那末的巧。固然没有买甚么器材，不外也仍是有所劳绩的，经由过程宜家的家具计划办法，我们能够聊聊模块化。
往过宜家的同砚应当都有注重到，宜家的家具基础都是组合的，可拆装。模块化的特性也是如许，能够组合，绝对自力，在必要的时分能够很便利的加上。那怎样写能够基础完成这类体例呢？给个复杂的例子：
<divclass="mode-a">
<h3>模块化Demo</h3>
<p>模块化布局的例子。</p>
</div>
对应的CSS能够这么写：
.mode-a{...}
.mode-ah3{...}
.mode-ap{...}
个中“mode-a”就是这个模块的称号，暗示这是名为“a”的模块，如今这个模块能够被放到你所必要的中央。既然是做模块，就不会只要一个，我们再加一个“mode-b”：
<divclass="mode-b">
<h3>模块化Demo</h3>
<div>
<h4>模块化的特性：</h4>
<ul>
<li>绝对自力</li>
<li>可移植性高</li>
</ul>
</div>
</div>
对应的CSS能够这么写：
.mode-b{...}
.mode-bh3{...}
.mode-bdiv{...}
.mode-bh4{...}
.mode-bulli{...}
实践使用中年夜多必要加一些classname来削减类界说的庞大度，这个例子对照复杂，但足以申明模块化的特性。下面两个模块可同时被利用到一个或多个页面中。
在宜家的卖场中，大概你也注重到了，基础是以计划师来分别商品区的，出格是那些小件的商品。模块化后的代码也能够被分派给分歧的人举行编写，进步效力。固然要完成这类体例，我们也必要做些事情，如模块的定名标准、模块中哪些中央是必要留接口的等等。如下面的例子中能够商定的就有：定名以“mode”开首，模块题目利用h3标签。如许不论是哪一个人写出来的模块都可兼容项目中的页面。
看到这你大概会发明，既然下面已商定了模块流动的布局，每一个模块的款式界说中所写的这一部分不就是冗余的吗？是的。假如已构成相干的商定，这部分的款式界说能够被提出来放到项目标大众界说中，削减代码的冗余。如下面的例子能够酿成：
/*=Sglobal*/
h3{
/*第一种写法*/
...
}
.mode-ah3,
.mode-bh3{
/*第二种写法*/
...
}
/*=Eglobal*/
/*=Smode-a*/
.mode-a{...}
.mode-ap{...}
/*=Emode-a*/
/*=Smode-b*/
.mode-b{...}
.mode-bdiv{...}
.mode-bh4{...}
.mode-bulli{...}
/*==Emode-b*/
不知你有没注重到宜家那些小件的商品，常常能够组合到分歧的别的商品下面。这也带出了模块化的另外一个话题：模块中的模块。即在模块中能够存在别的的模块，也很好了解，就像我们做网站的时分，全部页面的布局就像是一个年夜的模块，而下面所讲的例子就是模块中的模块了，只不外我们把这个界说减少一层。下面例子中对h3的界说，就能够当作是一个模块，它在“mode-a”、“mode-b”两个模块中都呈现，而且布局体现绝对流动。
OK，这只是对一个标签的界说，假如不但一个标签呢？我们从头改下例子：
<divclass="mode-b">
<divclass="mode-a">
<h3>模块化Demo</h3>
<p>模块化布局的例子。</p>
</div>
<divclass="cont">
<h4>模块化的特性：</h4>
<ul>
<li>绝对自力</li>
<li>可移植性高</li>
</ul>
</div>
</div>
<divclass="mode-c">
<divclass="mode-a">
<h3>模块化Demo</h3>
<p>这个是“模块中的模块”的例子。</p>
</div>
<divclass="cont">
<h4>模块中的模块：</h4>
<p>模块“mode-a”就是一个模块中的模块。</p>
</div>
</div>
/*=Smode-a*/
.mode-a{...}
.mode-ah3{...}
.mode-ap{...}
/*=Emode-a*/
/*=Smode-b*/
.mode-b{...}
.mode-bh4{...}
.mode-b.cont{...}
.mode-b.contulli{...}
/*=Emode-b*/
/*=Smode-c*/
.mode-c{...}
.mode-ch4{...}
.mode-c.cont{...}
.mode-c.contp{...}
/*=Emode-c*/
从下面能够看到，“mode-a”是一个自力的模块，当它作为“mode-b”和“mode-c”的一部分时，就成了模块中的模块了。抛下砖，但愿能引出更多相干的会商。
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 可以使用 CSS 检查工具进行设计。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
页:
[1]