PHP実践19日目_PHPチュートリアル
- WBOYオリジナル
- 2016-07-14 10:11:29737ブラウズ
今天涉猎了 ps,以及做了一个顶部导航条固定,下面给一个效果图布局.利用得是 position:fixed
[html]
a
b
c
d
e
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
a
b
c
d
e
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
123456789
css代コード
[css] @charset "utf-8";
/* CSS ドキュメント */
*{
マージン:0px;
パディング:0px;
フォントサイズ:14px;
}
体{
背景色:#ECECEC;
}
#頭{
位置:固定;
上:0px;
背景:#FAFAFA;
幅:100%;
高さ:54ピクセル;
ボーダーボトム: 1px ソリッド #E8E8E8;
ボックスシャドウ: 0 1px 5px rgba(34, 25, 25, 0.2);
z インデックス:100;
}
#ヘッダー{
マージン:0 自動;
幅:960ピクセル;
高さ:54ピクセル;
}
.nav{
フロート: 左;
高さ: 54ピクセル;
幅: 自動;
}
.nav ul 、.nav li{
フロート: 左;
list-style: 外側にはなし。
}
リア{
パディング: 0 15px;
色: #585858;
表示ブロック;
行の高さ: 54px;
ボーダー右: 1px ソリッド #E8E8E8;
}
#メイン{
位置:相対;
上:66ピクセル;
マージン:0 自動;
パディング:10ピクセル;
幅:960ピクセル;
背景: なし スクロールを繰り返す 0 0 #FFFFFF;
境界線: 1 ピクセルの実線 #C7C7C7;
}
@charset "utf-8";
/* CSS ドキュメント */
*{
マージン:0px;
パディング:0px;
フォントサイズ:14px;
}
体{
背景色:#ECECEC;
}
#頭{
位置:固定;
トップ:0px;
背景:#FAFAFA;
幅:100%;
高さ:54px;
border-bottom: 1px ソリッド #E8E8E8;
ボックスシャドウ: 0 1px 5px rgba(34, 25, 25, 0.2);
z-インデックス:100;
}
#ヘッダー{
マージン:0 自動;
幅:960ピクセル;
高さ:54px;
}
.nav{
フロート: 左;
高さ: 54px;
幅: 自動;
}
.nav ul 、.nav li{
フロート: 左;
list-style: 外側にはなし;
}
りあ{
パディング: 0 15px;
色: #585858;
表示: ブロック;
行の高さ: 54px;
ボーダー右: 1 ピクセルの実線 #E8E8E8;
}
#メイン{
位置:相対;
トップ:66ピクセル;
マージン:0 自動;
パディング:10px;
幅:960px;
背景: なし スクロールを繰り返す 0 0 #FFFFFF;
境界線: 1 ピクセルの実線 #C7C7C7;
}
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。