您当前的位置:株洲广告公司 > 观点集锦 > 株洲网站建设观点
推荐签约案例>>更多
最近更新
推荐信息
    关注最多的信息

    网站制作CSS高级技巧之网页布局


    布局 

      CSS至关重要的作用, CSS的设计初衷. 

      CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签! 

      CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做, 可能就有100种方法. 

      居中 

      在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候, 很多重构项目中居中问题变成了阻碍标准化进步的绊脚石. 

      1. 自动外补丁水平居中 

      一般情况下水平居中比较容易实现, 只需要给要居中的容器设定宽度, 以及自动水平外补丁就可以了. 

      比如HTML如下: 

      <body> 
       <div class="wrapper"> 
       </div> 
      </body> 

      CSS如下: 

      body{} 
      .wrapper 

      很简单不是吗? 但是有点小问题... 我们亲爱的IE家族里, IE5.x和IE 6不支持自动外补丁, 但是同样幸运的是, IE将 text-align:center 理解为所有东西居中, 而不只是文本. 哈哈, 可以利用这个Bug. 

      将CSS改为: 

      body 
      .wrapper 

      这里就用到了一种Hack,不过不会影响其他浏览器的Hack就是好Hack,呵呵, 就先这么用着吧~ 

      等等, 好像Netscape那边也出问题了, 用Netscape 6将窗口缩小到小于容器宽度时, 容器的左边就会跑到屏幕外边去了, 而且还不会有滚动条...万恶的浏览器大战啊... 

      再来改改我们的CSS: 

      body 

      .wrapper 

      这样就基本上ok了.

     

    作者:株洲广告公司 @ 株洲广告公司  修订1.3  2017-03-10
    http://www.sanyuan163.com/guandianjijin/webgd/2010/06/08/323.html
    转载时必须保留带链接的本声明。
    三圆品牌整合创始于2005年,10年来服务超过6000多位客户,
    提供从品牌定位、品牌设计、品牌推广、品牌执行的全价值链服务。
    服务热线:0731-22217673   您也可以点击此QQ进行在线咨询:781708175

    相关文章Tags:网站 制作 CSS 高级技巧 网页布局
    阅读本文的人还浏览了:
    • 始于2005年,三圆已确立株洲广告公司第一品牌。湖南三圆惟度品牌整合有限公司  版权所有
    • 湘ICP备14004426号 地址: 中国·动力谷A栋110(株洲市天元区)    
    关闭
    0731-22217673 138 7410 8579 工作日:周一至周六
    点击这里给我发消息
    返回顶部