玩转CSS3(一)----CSS3实现页面布局

摘要：

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

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<link href="style/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
   <div id="header">
       <div id="logo">
	     logo
	   </div>
	   <div id="banner">
	   banner
	   </div>
	   container
   </div>
   <div id="menu">
   menu
   </div>
   <div id="pageBody">

   </div>
   <div id="footer">
   footer
   </div>
</div>
</body>
</html>

但是，使用float实现布局会有一些缺点，由于各个div是相互独立的，所以在一个div中加入一些内容后会使得无法对齐，CSS3提供了多栏布局和盒子布局来弥补这种缺点。

多栏布局

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;
-moz-column-count:4;       /*多栏布局：火狐浏览器中需要的格式，表示列数*/
-moz-column-gap:10px;      /*列之间的间隔*/
-moz-column-rule:1px solid red;   /*在列之间加一条红色的线*/

-webkit-column-count:4;    /*多栏布局：safari和chrome需要的格式*/
-webkit-column-gap:10px;   /*列之间的间隔*/
-webkit-column-rule:1px solid red;   /*在列之间加一条红色的线*/
}
#footer{
width:100%;
height:10%;
margin:0px;
background:#FFFF00;
}

layout.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<link href="style/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
   <div id="header">
       <div id="logo">
	     logo
	   </div>
	   <div id="banner">
	   banner
	   </div>
	   container
   </div>
   <div id="menu">
   menu
   </div>
   <div id="pageBody">
    内容省略
   </div>
   <div id="footer">
   footer
   </div>
</div>
</body>
</html>

效果图：

盒子布局

hezi.css

/* CSS Document */

/*基本信息*/
body{
margin:0px;  /*外边距*/
text-align:center; /*文字居中对齐*/
background:#E1D0BB;  /*背景色*/
}
/*页面层容器*/
#container{
display:-moz-box;
display:-webkit-box;
}
#left_side{
width:200px;
height:200px;
margin:20px;
padding:50px;
background-color:#FF0000

}
#center_side{
width:200px;
height:200px;
margin:20px;
padding:50px;
background-color:#00FF00
}
#right_side{
width:200px;
height:200px;
margin:20px;
padding:50px;
background-color:#FFFF00;
}
#left_side,#center_side,#right_side{      /*实现盒子布局*/
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#down_left{
-moz-box-flex:1;        /*可根据内容自动调整大小，实现弹性盒子，此为火狐下的格式*/
-webkit-box-flex:1;
padding:20px;
margin:20px;
background-color:blue;
}
#down_left{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

hexi.html

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<link href="style/hezi.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="left_side">
  百度
  </div>
  <div id="center_side">
  谷歌
  </div>
  <div id="right_side">
  淘宝
  </div>
    <div id="down_left">
  亚马逊
  </div>
</div>
</body>
</html>

效果图：

如果想要让盒子垂直分部，可以在将container改为：

#container{
display:-moz-box;
display:-webkit-box;
-moz-box-orient:vertical;   /*垂直分布*/
-webkit-box-orient:vertical;
}

这里仅给出了大致的布局方式，关于更多的属性，大家可以阅读相关的书籍和资料。

玩转CSS3(一)----CSS3实现页面布局

时间： 2024-10-06 01:02:35

玩转CSS3(一)----CSS3实现页面布局的相关文章

CSS3（四）页面布局大全

目录 一.负边距与浮动布局 1.1.负边距 1.1.1.向上移动 1.1.2.去除列表右边框 1.1.3.负边距+定位,实现水平垂直居中 1.1.4.去除列表最后一个li元素的border-bottom 1.2.双飞翼布局 1.3.多栏布局 1.3.1.栅格系统 1.3.2.多列布局 二.弹性布局(Flexbox) 三.流式布局(Fluid) 三.瀑布流布局 3.1.常见瀑布流布局网站 3.2.特点 3.3.masonry实现瀑布流布局 3.3.1.下载并引用masonry 3.3.2.准备内容

.Net程序员玩转Android开发---(4)注册页面布局

上一篇我们介绍了登陆页面的布局,这一节我们看看注册页面的布局,实际上页面布局大同小异,来一起熟悉下基本控件的用法. 效果图: 1.添加注册页面 右键选中layout文件夹,添加注册页面.如下图 点击完成,页面添加完毕. 在页面中添加控件,XML代码如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com

.Net程序员玩转Android开发---(3)登陆页面布局

这一节我们来看看登陆页面怎样布局,对于刚接触到Android开发的童鞋来说,Android的布局感觉比较棘手,需要结合各种属性进行设置,接下来我们由点入面来 了解安卓中页面怎样布局,登陆页面很简单,两个文本框和一个按钮,页面效果如下:

CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

CSS3页面布局方案

Web页面中的布局,在css3之前,主要使用float属性或者position属性进行页面中的简单布局,但是使用它们也存在一些缺点,比如两栏或者多栏中如果元素的内容高度不一致,则有底部很难对齐的问题.因此在css3中追加了一些新的布局方式,使用这些新的布局方式,除了可以修改之前存在的问题之外,还可以进行更为便捷,更为复杂的页面布局. 我们可以先来看看传统使用float或者position属性布局页面:如下HTML代码: <div style="width:100%;overflow:hid

CSS3与页面布局学习笔记（四）——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结(一)--概要.选择器.特殊性与刻度单位 目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先级) 3.2.计算特殊性值 四.刻度 4.1.绝对长度单位 4.2.文本相对长度单位 4.3.Web App与Rem 五.示例与帮助下载 web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面

CSS3与页面布局学习总结（四）——页面布局的多种方法

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结（五）——Web Font与Sprite

CSS3与页面布局学习总结(五)--Web Font与Sprite 目录 一.web font 1.1.什么是font-face 1.2.font-face优点 1.3.字体格式 1.4.使用@font-face 1.4.1.下载字体 1.4.2.使用font-face将字体引入web中 1.4.3.应用字体 1.4.4.字体格式转换 1.4.5.查看字体编码 1.4.6.base64内嵌字体 二.CSS Sprite 2.1.将小图片合并 2.2.使用CSS分离图片 2.3.小结 三.示例下载