您现在的位置:首页 > 新闻动态 > 设计理论

网站制作CSS高级技巧之网页布局
来源:  发布时间:2015/1/31 12:48:40  浏览:

布局

  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了.
 

上一篇:谈网站内容撰写技巧方法
下一篇:企业网站之网站优化浅谈
0
全国免费咨询热线:029-68981528 15353554030 18092501507
版权所有@2008-2016 西安独酌信息技术有限公司
地址(ADD):西安市未央区三桥街中建开元城5号楼2单元2302室
工作时间:AM 8:30 — PM 18:00 E-mail:admin@xadzwl.net 陕ICP备11010676号
手机版
提交工单/意见反馈 下载中心   

在线客服

网站建设
点击这里给我发消息
网站建设
点击这里给我发消息
网站建设
点击这里给我发消息
网站建设
点击这里给我发消息
企业400电话
点击这里给我发消息