网页设计：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{width:760px;margin:0 auto;}

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

将CSS改为:

body{text-align:center;}
.wrapper{width:760px;margin:0 auto;text-align:left;}

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

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

再来改改我们的CSS:

body{min-width:760px;text-align:center;}

.wrapper{width:760px;margin:0 auto;text-align:left;}

这样就基本上ok了.

标题名称：网页设计：CSS高级技巧之网页布局
新闻来源：https://www.cdcxhl.com/news/194805.html

成都网站建设公司_创新互联，为您提供静态网站、App设计、外贸建站、自适应网站、用户体验、Google

广告

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