Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1119449
  • 博文数量: 284
  • 博客积分: 8223
  • 博客等级: 中将
  • 技术积分: 3188
  • 用 户 组: 普通用户
  • 注册时间: 2008-12-01 13:26
文章分类

全部博文(284)

文章存档

2012年(18)

2011年(33)

2010年(83)

2009年(147)

2008年(3)

分类: 系统运维

2011-10-30 22:22:50

各位,当你点击这个博文的时候相信你是对CSS+DIV有研究的人。应该有绝大部分的人还在使用DW软件,因为DW的提示功能是在是太强大了。当然,还是有人选择一些纯手写的软件,因为那样可以记得每一个样式的拼写。回到DW里吧,它才是本文的主角。

    以前我写CSS+DIV的时候从来不看设计页面里面的效果,因为以浏览器为标准可以减少很多不必要的兼容处理。但是,我工作了以后,我发现设计视图还是非常常用的,当然不是对于我们来说,是对于一些程序员来说,特别是用DW来开发PHP的程序员,我不知道这部分的人多不多,反正我们公司就有好几位。在设计视图里面找内容所在的HTML位置是非常方便的。虽然现在DW CS4以上版本的实时视图这个强大的功能,这个功能是将opera浏览器和DW合成在一起,这样既可以看到比较符合标准的浏览器下的效果,也可以轻松的找到内容对应的HTML。尽管,adobe做了这么大的努力,可惜有些程序员就是不领情,还是用micromedia时代的DW 8。这不能全怪他们奥特了,能够符合自己开发习惯的环境是很重要的。DW CS3以上版本确实在功能的展示和使用上面做了很多的改进,同时也让一些很忙碌的程序员不愿意去习惯一个新的开发环境。

    那么,既然是下线的开发人员要求在设计视图要70%保证布局不错乱的条件,我们也只能满足他们,毕竟小公司效率才是王道。

    说了这么多就是想让大家知道,尽管设计视图有多么的不符合标准,与标准浏览器的效果有多么的恶心,我们还是有必要要保证在设计视图里的效果能够妥妥的。

    下面进入主题,很抱歉这么晚才进入主题。首先让大家看看设计视图里错乱的效果,顺便也讲解一下吧,强调:如果有说错的地方,请各位吐吐槽,说说我,指点指点。谢谢。哈

DW设计视图布局错乱的研究成果(一)

    左边的商品展示应该是横向排列的,结果竖立了。这是为什么呢?其实是因为在ul里没有设置宽度有关。设计视图里没有定义大小的容器,他无法确定显示的大小,所以我们就要定义个宽度就可以了,不知道DW里有没有haslayout。道理是一样的。在浏览器里,因为有li,所以会把ul给撑开。所以可以不设置,不过我们最好还是设置下宽度好,因为像这种设计一般宽度都是固定的,如果宽度不固定怎么办?设置个高度看看,还是不行就只好放弃了。DW的设计视图能兼容就兼容不行就放弃吧。别太钻研做到和浏览器一样的效果。

DW设计视图布局错乱的研究成果(一)

看,这个嘛都挤在一起来,定义了float没有定义宽度和高度,同样定义宽度可以解决问题。要自适应效果的就放弃兼容DW吧。(其实我是没有找到跟好的方法,哈哈)

DW设计视图布局错乱的研究成果(一)
其实这个是一个选项卡的头部,因为多边形要用相对位置来实现,所以呢。就他们三个私奔了。其实很费解,相对定位并没有脱离文本流啊。为啥会单独飞出来呢?为啥要私奔呢?这个问题我还没研究什么成果来,毕竟相对定位用得不多,以后尽量避免用定位就可以了。顺便说说绝对定位,绝对定位可能连人影都找不到,所以,想兼容DW的朋友对待定位属性要三思而后行。


DW设计视图布局错乱的研究成果(一)

这个挺整齐的,为啥要发出来呢?其实啊,虽然布局没有乱。但是当鼠标选项中最新评价的内容就选了整块,里面的内容无法选中,这块内容少一点还好,但内容多了。程序员就要费半天找内容了。那是什么属性导致这样的呢?我当初非常费解,于是一个个主要影响显示效果的属性都测试了一下,比如float overflow width 等等。一开始认为是子元素浮动了,父元素没有浮动导致的,后来测试发现不是。把宽度和高度都测试下也不行。最后我发现那个不起眼还是很有个性的属性 overflow。没错!真相很简单,凶手就是他!(柯南出场)
因为里面有内容溢出了,所以我在父元素上定义了overflow:hidden属性隐藏掉了。这就导致选取整块的原因。好吧,既然不能一了百了,那就只好对里面的孩子们进行overflow了。问题就可以解决。

我不是高手,我自认为是个菜鸟,以上就是我在除夕夜无聊说研究出来的结果,刚开始想在网上找资料看看的,发现没有相关的内容,也不找不到DW 设计视图的解析原理,所以只好自己写来造福一些有需求的同胞们。我相信以后也会有更多的研究成果出来,所以先写个(一)吧。哈。如有错误的地方请你留步,骂骂我吧。谢谢。呵呵

在这里也祝大家新年快乐。在兔年在工作或者学习上能够 兔出猛进!
阅读(3324) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~