专注长沙网站建设(长沙企业网站建设)高端服务!

当前位置:首页 > 新闻资讯 > 网站建设知识

长沙网页制作前端开发攻略—CSS高级技巧之网页布局

2020/5/28 | 653

作为长沙网页制作的程序员,写代码同样需要大量的写作技巧。一份良好的代码能让人耳目一新,让人容易理解。长沙梦启网络公司小编整理下三年来长沙网页制作前端开发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网页布局就完成了。

现在开始您的长沙网站建设品牌之旅