PHP実践19日目_PHPチュートリアル-PHPチュートリアル-php.cn

PHP実践19日目_PHPチュートリアル

WBOY

リリース： 2016-07-14 10:11:29

オリジナル

792 人が閲覧しました

今天涉猎了 ps,以及做了一个顶部导航条固定,下面给一个效果图布局.利用得是 position:fixed

PHP実践19日目_PHPチュートリアル

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

}