基于DIV+CSS技术的网页设计优化方法

当今时代的网页设计主流方向大致趋向于“内容”与“形式”分离的静态设计，在网站重构的热潮中前进的DIV+CSS技术的网页设计优化为许多的网页设计者带来了更为方便的享受，DIV+CSS是以DIV来控制网站模块布局、CSS控制页面内容表现形式的的新型网页设计技术。但在实际操作中，DIV+CSS技术还存在着一些较为棘手的问题。因此，设计者在运用DIV+CSS技术进行网页设计时，要充分考虑到其可行性，对其进行最大程度的优化，使其在网页设计中能够发挥最大化功效。

1 DIV+CSS的不足

1.1 浏览器兼容问题

DIV+CSS技术的不成熟，导致设计者在网页设计中常常出现自己电脑显示的网页效果与其他机器上的网页效果有差异的情况，造成这种差异的原因往往是由于不同的电脑浏览器的兼容效果不一样，如IE6、Firefox、Mozilla等浏览器对、CSS（级联样式表）的解析程度不一致，很容易造成网页页面效果的差异。

1.2 操作难度大

DIV+CSS的技术复杂度相比table而言要更难操作，特别是对于网页设计代码的初学者来说，设计思维已经固定后很难接受CSS先定义后使用的操作样式，在这种情况下如果让其使用DIV+CSS操作技术反而只能取得相反效果。

2 基于DIV+CSS技术的网页设计优化方法

2.1 慎用DIV块

在进行布局时，无需在对象中重复使用同一个DIV模块。列表本身为完整对象的话就可以直接使用样式，如图1中的两段代码。显然其最终显示效果是完全一致的，但右边代码看起来要比左边更为简洁明了。

除了直接使用样式之外，还要尽可能减少DIV的嵌入与套用，多层嵌套的DIV布局会破坏DIV+CSS优越性，还容易造成浏览器不兼容问题。因此，设计者在进行DIV+CSS技术的网页设计时，要充分使用简单TABLE设计来让网页代码变得更为整洁。

2.2 尽量使用外部CSS样式

CSS样式表主要特点体现在页面的美化与风格的统一上，但设计者在对网页代码进行美化时要注意代码的结构性，不能采用一个DIV用一个样式或者采用独立的样式表来增加代码复杂度，应尽量使用外部CSS样式，将效果一样的样式定义为多次使用，并且在页面存在差异的地方进行适当的独立样式代码编写。

2.3 使用子选择器

在简化CSS选择器时，利用子选择器的样式定义能够有效简化代码，如：

以上这段代码的CSS定义为：

利用子选择器来设计和简化代码，则可以用下面的代码替代：

CSS样式定义为：

将“#nav{}”设为主选择器使用，后面的子选择器则会自动寻找相对应的样式，无需重复定义新样式。

2.4 id与class灵活搭配

很多设计者在提高CSS选择器的利用率通常会采用class来取代id。尽管class用途要比id灵活和广泛，但id由于具备强制唯一性特征，更能够让使用者快速简便的通过id检索到所需模块，其网页结构构建显然要高于class。因此在进行CSS选择器使用时，要做到id与class灵活搭配，将id运用在网页的布局和设计元素中方便使用者检索和翻阅，同时将class运用在文字排版中降低样式复杂度。

3 结语

随着网络信息技术的发展，现如今的网页设计所采用的“内容”与“样式”分离设计方法式网页代码的设计变得更为简洁，使用DIV在HTML中编写内容和结构，再采用CSS建立代码样式的设计方法既能够有效节省网页空间，对其进行重复利用，还能够减少代码的设计难度，给设计者带来更为便捷的操作体验。在技术的不断优化下，基于DIV+CSS技术之下的网页设计一定能够实现更好的发展。

[参考文献]

[1]吴建华.浅谈DIV+CSS技术[J].福建电脑，2011，27（11）：74-75.

[2]杨米娜.DIV+CSS技术在网页布局中的应用研究[J].电脑开发与应用，2012，25（4）：64-66，69.