1、管理者ページレイアウト、実際には、いくつかの追加のCSSコンテンツのため。
図2に示すように、最初のレイアウトは、PG-コンテンツメニューであり、幅の含有率を設定します、
最小幅：200pxの、最小の幅に設けページ、200pxの未満、最小幅のアプリケーション、200pxのより大きい、ページの幅は、セット内の20％表示
<ヘッド>
<メタ文字コード= " UTF-8 " >
<タイトル>タイトル</ TITLE>
<スタイル>
ボディ{
マージン：0 ; //设置体没有边框
}
.LEFT {
フロート：左;
}
.RIGHT {
フロート：右。
}
.pg - ヘッダ{
高さ：48px;
背景 - 色：青;
色：白
}
.pg - コンテンツ.menu {
幅：20％。
背景 -色：赤;
分 -width：200pxの; / * ページの幅は、最小幅を適用する、以下200pxのある200pxのより大きい、20％ページ表示の幅* /
高さ：500pxなど;
}
.pg - コンテンツ.content {
幅：80％;
背景 - 色：緑;
}
</スタイル>
</ head>
<body>
<DIV クラス = " PG-ヘッダ" > </ div>
<DIV クラス = " PG-コンテンツ" >
<DIV クラス = "メニューは左"> WW </ div>
<divのクラス = " コンテンツ左" > AA </ div>
</ div>
<divのクラス = " PG-フッター" > </ div>
</ BODY>
次のように実行結果は以下のとおりです。
メニューは500pxなどの高さを設定しているため、現在表示しているページは500pxなどはないので、右ページのスクロールバーがあるでしょう
管理者ページレイアウトのための3、2が最適化されています
;それは、現在のページにあった、永遠にウィンドウの特定の位置に固定された固定：この例では、位置を使用します。
オーバーフロー：自動車は、表示内容が大きすぎると、現在のページがいっぱい、スクロールバーで表示することができません
<ヘッド>
<メタ文字コード= " UTF-8 " >
<タイトル>タイトル</ TITLE>
<スタイル>
ボディ{
マージン：0 ;
}
.LEFT {
フロート：左;
}
.RIGHT {
フロート：右。
}
.pg - ヘッダ{
高さ：48px;
背景 - 色：青;
色：白
}
.pg - コンテンツ.menu {
位置：固定されました。
トップ：48px;
左：0 ;
底：0 ;
幅：200pxの、
バックグラウンド - カラー：#dddddd;
}
.pg - コンテンツ.content {
位置：固定;
トップ：48px;
右：0 ;
底：0 ;
左：200pxの、
バックグラウンド - カラー：パープル、
オーバーフロー：自動; // コンテンツ表示すぎて、完全にスクロールバー、現在のページに表示することができない
}
</スタイル>
</ HEAD>
<BODY>
<divのクラス = " PG-ヘッダ"> </ div>
<divのクラス = " PG-コンテンツ" >
<divのクラス = " メニューは左" > WW </ div>
<divのクラス = " コンテンツは左" >
<P> AA </ p> <p>このAA </ p> <p>このAA </ p> <p>このAA </ P>
</ div>
</ div>
<divのクラス = " PG-フッター" > </ div>
</ BODY>
次のように実行結果は以下のとおりです。
図4に示すように、位置を使用して絶対、ページレイアウト
位置と組み合わせること：絶対;オーバーフロー：自動;次の2つの効果を示す簡単なページを作ることができます
位置：絶対;最初の位置決めは一定の位置に配置することができる;しかしないときに指定した場所にバースクロールホイール、。
<ヘッド>
<メタ文字コード= " UTF-8 " >
<タイトル>タイトル</ TITLE>
<スタイル>
ボディ{
マージン：0 ;
}
.LEFT {
フロート：左;
}
.RIGHT {
フロート：右。
}
.pg - ヘッダ{
高さ：48px;
背景 - 色：青;
色：白
}
.pg - コンテンツ.menu {
位置：絶対。
トップ：48px;
左：0 ;
底に：0 ;
幅：200pxの。
背景 - 色：#dddddd。
}
.pg - コンテンツ.content {
位置：絶対。
トップ：48px;
左：200pxの。
下：0 ;
右：0 ;
背景 - 色：紫;
// オーバーフロー：自動;
}
</スタイル>
</ head>
<body>
<DIV クラス = " PG-ヘッダ" > </ div>
<DIV クラス = " PG-内容は" >
<divのクラス = " メニューは左" > WW </ div>
<divのクラス = " コンテンツは左" >
// <divのスタイル= " の位置：固定;下：0;右：0;幅： 50px;高さ：は50px " >返回顶部</ div>
<P> AA </ P> <P> AA </ P> <P> AA </ P> <P> AA </ P>
<P> AA < / P> <P> AA </ P> <P> AA </ P> <P> AA </ P>
<P> AA </ P> <P> AA </ P> <P> AA </ P > <P> AA </ P>
<P> AA </ P> <P> AA </ P> <P> AA </ P> <P> AA </ P>
<P> AA </ P> <P> AA </ P> <P > AA </ p> <p>このAA </ P>
</ div>
</ div>
<DIV クラス = " PG-フッター" > </ div>
</ BODY>
次のようにコード行、ページの最初の実行、どちらも同じ結果を示し、;自動：：オーバーフローはありません
スタイルの内容があふれ追加しない場合：現在のページをスクロールするスクロールバーが固定されていないときオート、結果は次の通り:(すべてスクロールするスクロールバーでトップとメニューバーの左側にあります）です
追加スタイルオーバーフローの内容場合：自動スクロールバーが固定された現在のページをスクロールしたときに次のように:(スクロールバー付きのないスクロールと上部のメニューバーの左側に見出され、その結果）である。この効果の実装は、3と同じですの
5、背景ページレイアウト：
次のようにアプリケーションのレイアウトは次のとおりです。
位置：絶対;
境界半径：50％、画像形状のサイズを変更する、それが50％、円形の画像です。
.pgヘッダ.user：ホバー.B {表示：ブロック;}ときはパターンBに結合された、上にホバーマウス
z屈折率：10、優先順位設定
<リンクのrel = "スタイルシート" のhref = "fontawesome-4.7.0 / fontawesome-4.7.0 / CSS /フォントawesome.min.css" /> fontawesomeギャラリーネットワーク検索に適用されるように、パッケージを直接ダウンロードしています基準位置にコードを貼り付けアイコン
<Iクラス= "FA FA-ベル-O" ARIA-隠さ= "真の"> </ I>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"/>
<style>
body{
margin:0;
}
.left{
float:left;
}
.right{
float:right;
}
.pg-header{
height:48px;
background-color:blue;
color:white;
line-height:48px;
}
.pg-header .logo{
width:200px;
background-color:cadetblue;
text-align:center;
}
.pg-header .icons{
padding:0 20px;
}
.pg-header .icons:hover{
background-color:#204982;
}
.pg-header .user{
background-color:wheat;
height:48px;
margin-right: 60px;
padding: 0 20px;
}
.pg-header .user:hover{
background-color:#204982;
}
.pg-header .user .a img{
width:40px;
height:40px;
margin-top:4px;
border-radius:50%; //border-radius:50%;图片变为圆形
}
.pg-header .user .b{
z-index:20;
position:absolute;
top:48px;
right:0;
background-color:white;
width:160px;
color:black;
display:none;
}
.pg-header .user:hover .b{
display:block; //当鼠标放到hover上的时候，给b加上样式
}
.pg-header .user .b a{
display:block;
}
.pg-header .icons span{
border-radius:50%;
display:inline-block;
padding:3px 7px;
line-height:1px;
background-color:red;
font-size:12px;
}
.pg-content .menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background-color:#dddddd;
}
.pg-content .content{
position:absolute;
top:48px;
left:200px;
bottom:0;
right:0;
background-color:purple;
overflow:auto;
z-index:9;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">易烊千玺</div>
<div class="user right" style="position:relative;">
<a class="a" href="#">
<img src="1.jpg">
</a>
<div class="b">
<a>我的资料</a>
<a>注销</a>
</div>
</div>
<div class=" icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span>5</span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
</div>
<div class="pg-content">
<div class="menu left">ww</div>
<div class="content left">
<!-- <div style="position:fixed;bottom:0;right:0;width:50px;height:50px">返回顶部</div>-->
<!-- <div style="position:absolute;bottom:0;right:0;width:50px;height:50px">返回顶部</div>-->
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
<p>aa</p><p>aa</p><p>aa</p><p>aa</p>
</div>
</div>
<div class="pg-footer"></div>
</body>
执行结果如下：
点击右上角图片时，显示样式，如下：
