CSS3で遊んでみる(1) CSS3でページlayout_html/css_WEB-ITnoseを実現-htmlチュートリアル-php.cn

CSS3で遊んでみる(1) CSS3でページlayout_html/css_WEB-ITnoseを実現

WBOY

リリース： 2016-06-24 12:03:29

オリジナル

959 人が閲覧しました

概要:

CSS3 では、CSS2 と比較して、複数列レイアウトとボックスレイアウトという新しいレイアウト方法がいくつか追加されています。この記事では、CSS2のレイアウトを簡単に思い出し、CSS3のレイアウト方法をまとめます。

DIV+CSS は実際には間違った名前です

現在のページレイアウトに関して、多くの人はそれを DIV+CSS と呼ぶことに慣れていますが、実際には、これは XHTML+ CSS という名前であるべきです。

これはなぜですか?従来のページレイアウトはテーブルレイアウト、つまり Table+CSS を使用していましたが、その後 DIV を使用したレイアウト方法が登場したため、DIV+CSS と呼ばれ、DIV+CSS で作成されたページが標準のページであると考える人もいます。この文は比較的狭いです。
それで、標準ページとは何ですか? WEB 標準は、構造、パフォーマンス、動作の 3 つの部分で構成されます。このうち、構造に関する標準言語はXHTMLとXMLであり、表現に関する標準言語はCSSです。 XML は比較的複雑であり、ほとんどのブラウザは XML を完全にサポートしていないため、ページレイアウトの実装には XML は使用されません。そのため、標準のページレイアウトは WEB 標準に準拠したページレイアウト、つまり XHTML+CSS である必要があります。
XHTML には DIV タグだけでなく、a、p、ul、li、dl、dt などのタグがあり、DIV タグが使用されていなくても、生成されるページは標準のページです。 XHTML の各タグは独自の機能を持っています。ページレイアウトを実装するには DIV のみを使用できるというわけではありません (ある本には、「画面全体が DIV で埋め尽くされている場合、それは標準のページとは見なされない」という格言があります)
したがって、将来的には、 xhtmlは、div +cssではなく +cssを話します。

layout.css

rree

layout.html

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

ログイン後にコピー

ただし、各 div が独立しているため、float を使用してレイアウトを実装することにはいくつかの欠点があります。この欠点を補うために、CSS3 は複数列レイアウトとボックスレイアウトを提供します。

複数列レイアウト

layout.css

<!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>

ログイン後にコピー

layout.html

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

ログイン後にコピー

レンダリング:

ボックスレイアウト

hezi.css

<!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>

ログイン後にコピー

hexi.html

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

ログイン後にコピー

レンダリング:

ボックスを垂直に分割したい場合は、コンテナを次のように変更できます。

<!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>

ログイン後にコピー

これは、より多くの属性について、大まかなレイアウトを提供するだけです。材料。