玩转CSS3(一)CSS3实现页面布局_html/css_WEB-ITnose

摘要：

CSS3相对CSS2增加了一些新的布局方式：多栏布局和盒子布局。在这篇文章中，将对CSS2的布局进行简单的回忆，并总结CSS3的布局方式。

DIV+CSS其实是错误的叫法

关于当前的页面布局，很多人都习惯于叫做DIV+CSS,其实这是一种错误的叫法，标准叫法应该叫做XHTML+CSS.
这是为什么呢？传统的页面布局采用的是Table布局，即Table+CSS，后来出现了使用DIV的布局方式，所以人们就把它叫做DIV+CSS,而且有些人认为用DIV+CSS制作的页面才是标准页面，其实这句话是比较狭隘的。
那什么是标准页面呢？WEB标准由结构，表现和行为三部分组成。其中结构话标准语言是XHTML和XML,表现化标准语言是CSS。因为XML比较复杂，大多数浏览器都没有完全支持，故不使用XML来实现页面布局，所以标准的页面布局应该是符合WEB标准的页面布局，即XHTML+CSS。
而XHTML中不仅仅只有DIV标签，还有a,p,ul,li,dl,dt等等标签，所以即使不使用DIV标签，制作的页面也是标准页面，XHTML的各个标签都有其功能，并不是说只能用DIV去实现页面布局（在一本书上有怎么一句话：如果满屏都是DIV，那也算不上标准页面了）
所以说，以后我们要尽可能的说XHTML+CSS，而不是DIV+CSS.

CSS2时代的布局方式

简单点说，CSS2时代是使用float的浮动属性来实现布局的。

layout.css

/* CSS Document *//*基本信息*/body{margin:0px;  /*外边距*/text-align:center; /*文字居中对齐*/background:#E1D0BB;  /*背景色*/}/*页面层容器*/#container{     width:80%;height:100%;margin-left:10%;margin-right:10%;background:#ABE0F1;}/*头部*/#header{width:100%;height:15%;margin:0px;background:#FF0000;}#logo{float:left;    /*浮动属性，居左对齐，使其可以在同一行显示*/width:60%;height:80%;margin:0px;background:#E18CDD;clear:left;     /*取消左侧浮动*/}#banner{float:right;   /*浮动属性，居右对齐，使其可以在同一行显示*/width:38%;height:80%;margin:0px;background:#8376D8;clear:right;    /*取消右侧浮动*/}#menu{width:100%;height:5%;margin:0px;background:#00FF00;}#pageBody{width:100%;height:70%;margin:0px;background:#00FFFF;}#footer{width:100%;height:10%;margin:0px;background:#FFFF00;}

layout.html

布局

logo

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did105156

更新时间：2022-11-17 阅读：39次