网站制作中DIV+CSS的一个技巧

现在的网站设计是非常的重要的，如果能设计出一个成功的网页那是非常不容易的。今天创新互联就讲一个现在在网站排版中必备的技巧。

随着宽屏时代的到来，在现在的网页设计当中，人们对于网页排版有了更多的发挥空间。继而随之的是，往往我们现在所看到的许多网页，都被错落有致的划为了两列或者多列的布局，从而在视觉和操作上带来不一样的体验。

对于初学者而言，当我们去要实现这些效果的时候，才晃然发现，DIV的默认样式是只能独占一行，而在这个时候，CSS样式中float浮动属性则给我们提供了解决方案。同样随之而来的另一个问题就是，由于现在今市场上浏览器种类繁多，各类浏览器的标准并没有完全统一，也会出现当你使用了float浮动属性之后，往往在两种浏览器当中出现不一样的展示效果。

在做现在的网站之前，笔者也曾做过几个小站，就在这几个小网站建设中，印象最为深刻的是一个纯HTML的网页站，而就在调试那个站的时候，发现一个特别让人纠结的问题，那就是在以IE和Chrom为核心的两类浏览器中出现网页错位以及DIV元素不受控制。之前是四个同级的DIV层，二二分开，排列上下两行，之外在加上级DIV层包容，附加背景图片的属性。调试中发现，在Chrom浏览器中，四个同级层上面那一行居然没有无法继承上级DIV层的属性，显示背景图片。经过几番检查，代码完全OK，没有任何问题和错误，但不论如何修正，总会出现一方正常显示，一方错位的情况，固然有人解释说两都浏览器的核心和标准不一样，但个人在技术上的一些失误是完全不可能回避的。后来几经调试，终于发现，原来是清除浮动的时候出了点儿小遗漏。

大家都知道，在使用了float浮动属性之后，要想后面的元素在下一行正常排列，必须要清除浮动属性。撇开正常的流程来讲，这一点也是完全无可厚非的。但是在初次float浮动属性的朋友来说，会有一部分人直观的认为，只要是换行布局，那就必须得清除浮动属性。而这个结果也就往往导致一部份站长朋友像这前所发生的这种情况，chrom错位，或者无法继承上级DIV的属性，但在检查时，在逻辑上又找不出任何的问题。而在这里，清除浮动属性的代码添加的位置则直接影响到了DIV层的一些属性。因此，在这种情况下，站长朋友有三种解决办法：

1，给予该DIV层或者直属上层定义一些非常明确的属性，比如宽、高、边框大小、颜色等等。

2，给予每一个行内的DIV层都重新定义一个上级DIV，并对其定义明确的属性。

3，就是检查了删除多余的清除浮动属性代码，特别是像在同一行中，当：页面总宽度-原本排列层的总宽度≤单个层宽度的时候，那它后面所跟的清除浮动属性则完全没有意义，反而会带来很大的麻烦。现在网站制作已经都用DIV+CSS来了，所以以上内容是很有利用价值的。

分享题目：网站制作中DIV+CSS的一个技巧
路径分享：https://www.cdcxhl.com/news/118721.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有网站制作等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联