ホームページ > 記事 > ウェブフロントエンド > CSS3で遊んでみる(1) CSS3でページlayout_html/css_WEB-ITnoseを実現
CSS3で遊んでみる(1) CSS3でページlayout_html/css_WEB-ITnoseを実現
- WBOYオリジナル
- 2016-06-24 12:03:29946ブラウズ
概要:
CSS3 では、CSS2 と比較して、複数列レイアウトとボックス レイアウトという新しいレイアウト方法がいくつか追加されています。この記事では、CSS2のレイアウトを簡単に思い出し、CSS3のレイアウト方法をまとめます。
これはなぜですか?従来のページ レイアウトはテーブル レイアウト、つまり 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を話します。
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 は複数列レイアウトとボックス レイアウトを提供します。
複数列レイアウト
<!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>
これは、より多くの属性について、大まかなレイアウトを提供するだけです。材料。