作为长沙网页制作的程序员,写代码同样需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解。长沙梦启网络公司小编整理下三年来长沙网页制作前端开发CSS高级技巧之网页布局,希望能让你写出耳目一新、容易理解、舒服自然的代码。
1、
网站建设整体布局
CSS至关重要的作用, CSS的设计初衷.
CSS布局和几年前table横行时的布局又不太一样, 在结构化语义化的HTML文档后面, CSS在格式化文档的渲染效果, 把结构化文档用表现化语言来描述. 简而言之, 就是CSS不需要表现性标签!
CSS布局技术依赖于三个基本概念: 定位, 浮动, margin操纵. 布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做, 可能就有100种方法.
2、网站建设居中设计
在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候, 很多重构项目中居中问题变成了阻碍标准化进步的绊脚石.
自动外补丁水平居中
一般情况下水平居中比较容易实现, 只需要给要居中的容器设定宽度, 以及自动水平外补丁就可以了.
比如HTML如下:
<body>
<div class="wrapper">
</div>
</body>
CSS如下:
body{}
.wrapper{width:760px;margin:0 auto;}
很简单不是吗? 但是有点小问题..., IE5.x和IE 6不支持自动外补丁, 但是同样幸运的是, IE将 text-align:center 理解为所有东西居中, 而不只是文本。
将CSS改为:
body{text-align:center;}
.wrapper{width:760px;margin:0 auto;text-align:left;}
等等, 好像Netscape那边也出问题了, 用Netscape 6将窗口缩小到小于容器宽度时, 容器的左边就会跑到屏幕外边去了, 而且还不会有滚动条.
再来改改我们的CSS:
body{min-width:760px;text-align:center;}
.wrapper{width:760px;margin:0 auto;text-align:left;}
CSS网页布局就完成了。