仓酷云

标题: 带来一篇网站栅格化计划 [打印本页]

作者: 第二个灵魂 时间: 2015-1-15 23:56
标题: 带来一篇网站栅格化计划
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性
网页制造poluoluo文章简介：演变网将要举行一次年夜的改版，作为公司的前端开辟职员天然要外行动前做出些筹办，因而先是为网站做了栅格化计划，总宽950的24栏栅格。
来公司的工夫不算很长，比来公司现有的演变网将要举行一次年夜的改版，作为公司的前端开辟职员天然要外行动前做出些筹办，因而先是为网站做了栅格化计划，总宽950的24栏栅格。OK,空话未几说，上面赶忙入手下手。
先来看下淘宝网的一处3栏结构：

点击缩小

这里是对应的代码：

我们能够看到class=”grid-c3-s5e7″这个定名仿佛有些出格，
再看看其包括的class=”col-main”和class=”col-sub”和class=”col-extraskin-orange”
再多一些样本代码：
.grid-c,.grid-c2-s4,.grid-c2-s4f,.grid-c2,.grid-c2f,.grid-c2-s6,.grid-c2-s6f,.grid-c2-s7,.grid-c2-s7f,.grid-c2-s8,.grid-c2-s8f,.grid-c2-s9,.grid-c2-s9f,.grid-c2-s10,.grid-c2-s10f,.grid-c2-s11,.grid-c2-s11f,.grid-c2-s12,.grid-c2-s12f,.grid-c3,.grid-c3f,.grid-c3e,.grid-c3d,.grid-c3c,.grid-c3b,.grid-c3-s5e7,.grid-c3-s5e7f,.grid-c3-s5e7e,.grid-c3-s5e7d,.grid-c3-s5e7c,.grid-c3-s5e7b,.grid-c3-s9e6,.grid-c3-s9e6f,.grid-c3-s9e6e,.grid-c3-s9e6d,.grid-c3-s9e6c,.grid-c3-s9e6b,.grid-c3-s8e8,.main-wrap,.col-sub,.col-extra{
}
我们选择个中一个来细心看下能够实验着作出如许的注释：

上图中s5e7里的5和7代表的是在24栏中所占的栏数。
以下如许更便利我们举行模块化操纵：
.grid-c3{}
.grid-c3-s5e7{}
.grid-c3-s5e7col-main{}
.grid-c3-s5e7col-sub{}
.grid-c3-s5e7col-extra{}

.grid-c2{}
.grid-c2-s7f{}
.grid-c2-s7fcol-main{}
.grid-c2-s7fcol-sub{}
略微注重下你会发明上例中我只提到了s,e的注释，并没有对f,b,d做出注释，由于我以为道理我们已把握，fbd只是淘宝因内容地区分歧而接纳的定名办法(应当能够如许了解)。
底本-s5e7,-s7f,-s5e7d,-s5e7b,-s9e6c之类的就不克不及注释DIV+CSS定名划定规矩有益于SEO
只是为了让我们更便利的利用，我这团体喜好简便些的作风，因而在这里我对它举行了晋级。

网页制造poluoluo文章简介：演变网将要举行一次年夜的改版，作为公司的前端开辟职员天然要外行动前做出些筹办，因而先是为网站做了栅格化计划，总宽950的24栏栅格。

上面看下整合出属于本人的栅栏结构定名，我将用在公司演变网的新版上，来看下我的定名办法：

(三栏页面栅格结构-例：部排列表页)Grid-c3-c6e5

先作下复杂的申明，这里与淘宝网定名分歧的是我没有接纳s（sub）和e(extra)如许的习气，
而是用到了w(west),c(center),e(east)
—-我将网页上的方位分为上北下南左西右东
不利用l(left)等高低摆布暗示是由于在如宋体等字体下left里的l与数字1很简单形成凌乱。
上面是一系列方位栅栏模块化定名比方：

(两栏页面栅格结构-例：首页)Grid-c2-e5

(两栏页面栅格结构-例：商品具体页)Grid-c2-w6

(两栏页面栅格结构-例：注册流程页)Grid-c2-e7

[attach]292154[/attach]
计划一：(三栏页面栅格结构-例：部排列表页)Grid-c3-c6e5

网页制造poluoluo文章简介：演变网将要举行一次年夜的改版，作为公司的前端开辟职员天然要外行动前做出些筹办，因而先是为网站做了栅格化计划，总宽950的24栏栅格。

计划二：(三栏页面栅格结构-例：部排列表页)Grid-c3-c7e5

(三栏页面栅格结构-例：商城主页、团体空间预览页)Grid-c3-w6e5

(三栏页面栅格结构-例：团体空间办理页)Grid-c3-w5e6

以上定名都是由class=”grid-c3-w5c13e6″这类的完全版往失落main栏目(即最宽的一栏)
简化到class=”grid-c3-w5e6″这类简便版(很快能够猜出-w5e6所对应的宽栏位c13，即右边占24-5-6=13a的main)，
不想用下面的办法为main定width:100%;
那我们能够如许：
.grid-c3-c6e5.main{width:13a;}
.grid-c3-c6e5.sidebar{width:5a;}
.grid-c3-c6e5.service{width:6a;}
.grid-c3-c6e5的名字看起来蛮长的,思索已往失落.grid-c3-c6e5中的grid这个单词，但仿佛不太便利浏览，何况前面会呈现.mode-a,.mode-b之类的模块定名，一致下会更好；
这里的定名习气倡议利用的表意定名《超出CSS》有提到过。
能够看到简便版的只要3个字母呈现w(west),c(center),e(east)下面已做懂得释
不必记太多的字母寄义，grid-c3-c6e5如许的定名办法让我们更好的对栅格化结构举行操纵。

class=”grid-c3-w13c6e5″完全版
class=”grid-c3-c6e5″简便版
注重这里的数字和上图中的数字举行对照，你会发明我免却了w13即最宽的那一栏main（一般最宽的为main），
我将c和e如许除main以外的窄栏一般流动宽度，main的宽度则为width:100%;详细完成以下：
假定最外层的div为<divclass=”content”>
.content{
position:relative;
width:总宽减窄栏的宽度;
padding-left&right:窄栏的宽度;
}
窄栏浮动，main相对定位
.main{
position:absolute;
top:xx;
left&right:窄栏的宽度;
}

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。

作者: 因胸联盟 时间: 2015-1-17 23:50
由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

作者: 精灵巫婆 时间: 2015-1-24 15:11
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 只想知道 时间: 2015-2-1 19:14
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

作者: 仓酷云 时间: 2015-2-7 16:00
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 谁可相欹 时间: 2015-2-22 20:15
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 变相怪杰 时间: 2015-3-7 04:04
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 兰色精灵 时间: 2015-3-14 12:06
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: admin 时间: 2015-3-21 08:14
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

欢迎光临仓酷云 (http://ckuyun.com/)