网页设计Css+div排版overflow的妙用


  

对于老的网页设计师来说用Tab排版是件非常愉快的事,它不用去写代码也不用去考虑这块浮那边,那块要清除那边的浮动等等一系列问题,只需插入、拆分、删除、再插入、再拆分……。而随着社会的进步,技术的革新,tab的地位日趋下降,不得不在这激烈的竞争中退出。取而代之也就是div排版,而对老的网页设计师来说刚用div来排版总觉得没Tab好使,在书写样式的过程总有一股想拆分tab的冲动,但看看眼前的现实又不得不硬着头皮往下写了,这样折腾了两三个单子,慢慢地也对div排版熟悉了许多。但熟悉不等于精通,在实际的工作中会遇到很多问题,这样一来只能自己慢慢地针对自己遇到的问题来寻找解决问题的答案了。下面来列举个个人所遇到过的一个小问题。

  这个问题小烦了好久了,根据公司目前的网页版面风格,这个问题用Tab排版的话用个样式就搞定了(.unnamed),而用div的话由于本人先前对div不熟悉,所以请教div的前辈这个样子能不能用div排出来,答案是颜色可以而图片不行。这下可好了我所需要的刚好是图片作为背景,而且这个背景图片根据右边的内容多少可以自动跟着伸缩。现在没法了只能自己尝试着来排排,第一次排出来了在ie下是正常的而在火狐下就乱成一团遭了。说实话火狐是用div排版最人设计师头痛的浏览器。后经过在网上查了下了overflow这个的属性,然后尝试着把值改成hidden试了看,结果这次在ie和火狐下都正常了。还有点就是要给“background”这个绝对定位,根据自己的需要来设置。下面是css代码。

css部分:

#main { width:1000px; height:auto;
      } //定义最外面的盒子层
#biankuang{ width:1000px;
       height: auto;
     background:url(../images/shiy.jpg) repeat-y;
     overflow:hidden;
    } //定义边框层、背景随y轴平铺
#bgpic{ width:1000px;
             height: auto;
          background:url(../images/tu02.jpg) no-repeat;
          background-position: left bottom;
          overflow:hidden;
          } //定义背景图片层、给个绝对定位,靠左对齐且不重复,在这“no-repeat”这句一定要写,不写的话在火狐下背景图片重复出现。

 

www.jxgzseo.cn

 

赣州金宇网络营销策划有限公司为江西蜘蛛网络营销旗下品牌,主要为赣州企业提供提供:赣州网站建设,南康网站建设,赣州网站设计,赣州做网站,赣州网络公司,赣州虚拟主机,赣州域名注册。

赣州金宇网络营销策划有限公司为赣州十八县市提供营销型网站建设,赣州网站优化,赣州SEO,赣州网络推广,赣州网站推广等服务。www.jxgzseo.cn

关于我们 | 联系方式 | 付款方式 | 招聘信息 | 客户案例 | 新闻中心 | 营业执照