玩轉CSS3(一)----CSS3實現頁面佈局

時間 2019-11-11

標籤 css3 css 實現頁面佈局欄目 CSS 简体版

原文原文鏈接

https://blog.csdn.net/u012116457/article/details/28710173 css

請珍惜小編勞動成果，該文章爲小編原創，轉載請註明出處。

摘要：

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.html

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;
}

這裏僅給出了大體的佈局方式。關於不少其它的屬性，你們可以閱讀相關的書籍和資料。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。