澄清DIV+CSS设计的误区
当DIV+CSS平地起惊雷突然出现在网页设计行业的时候,官方、民间无不推崇备至,仿佛Table设计的时代就
要终结,马上就要步入DIV+CSS的时代,不懂得DIV+CSS你都不好意思说你会网页设计,不知DIV+CSS你都不
好意思说你是站长,你要还是用TABLE来设计站点,无数鄙夷之光就投射而来。
然而DIV+CSS真的有这么神吗?该怎么真正的利用DIV+CSS优化站点,而不是挂羊头卖狗肉,插大葱装大
象呢?
DIV+CSS的设计中有几点误区,尤其应该澄清:
1、DIV+CSS的合理之处在于可以进行网页的统一设计管理,通过一个样式表,牵一发而动全身,只要修
改样式表,就可以统一全站的风格,如果为一个页面单独做一个样式表,或者一个div就做一个样式表,没
有全局设计观念,那么这个div+CSS的设计方式就完全没有必要,甚至成了累赘;
2、像Table一样用DIV+CSS,无穷尽的嵌套,其效果与Table设计没有两样,并不会带来搜索引擎的优化
效果,反而会增加页面的负担;
3、推崇Div+CSS,却不考虑兼容性,TABLE设计由来已久,得到浏览器的广泛支持,所以显示效果很好
,不会出现错位情况,但是DIV+CSS却在部分浏览器中会发生页面错位的情况,因此在进行设计的时候也要
考虑到不同浏览器的情况,进行更改和调试。
当然DIV+CSS有其固有的优点:1、标准化的页面结构;2、有利于统一设计管理;3、可以得到搜索引擎良
好的支持,但似乎利用DIV+CSS要注意以上误区,相信站长都有很多的体会,也有更多成熟的设计理念。
相关文档:
网页设计中CSS布局是很重要的部分,下面介绍几种检查调试CSS布局的有效方法。
1.检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2.检查CSS是否书写正确
检查一下有无拼写错误、是否忘记结尾的}等。可以利用 ......
1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。
2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。
3 ......
由于各浏览器的默认CSS样式不一样,我们必须写一个CSS Reset统一起来。
通常我的做法是在common.css里写全局控制,这里面也包括header和footer,其它CSS文件就通过@import url(”common.css”);引用。
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-family:Ari ......
像上面的一张图片我们该怎么用js 和css + div 很好的应用到我们的项目中呢?
<style>
.InpuRight{
height:20px;background:url(img/msg_bg.png) no-repeat;background-position:0px -250px;
}
.InputError{
width:20px;height:20px;background:url(img/msg_bg.png) no-repeat 0px 0px;
}
.inputLogin{
wid ......