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

PHP実戦20日目_PHPチュートリアル

WBOY

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

オリジナル

851 人が閲覧しました

厳密に言うと、最近の実践はdiv+cssとpsの実践です

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: 外側にはなし。
}

.nav lia{
    パディング: 0 15px;

    色: #585858;
    表示ブロック;
    行の高さ: 54px;

    ボーダー右: 1px ソリッド #E8E8E8;
}

#メイン{

    位置:相対;
    上:82ピクセル;

    マージン:0 自動;

    幅:960ピクセル;
    高さ: 自動;
    }

#左{
    フロート: 左;

    背景: なしスクロールを繰り返す 0 0 #FFFFFF;
    境界線: 1 ピクセルの実線 #C7C7C7;
    幅: 630ピクセル;


}

#そうですね{
    フロート:右;

    //背景: なし繰り返しスクロール 0 0 #FFFFFF;
   // 境界線: 1px 実線 #C7C7C7;
    幅: 314ピクセル;


}

#フッター{
    フロート: 左;

    マージントップ:90px;

    ボーダートップ: 実線 1px #ccc;

    幅: 100%;

}

#f_center{
    幅: 960ピクセル;
    高さ: 54ピクセル;
    マージン: 0 自動;

    テキスト整列: 中央;

}

#f_top{

    幅:700ピクセル;
    マージン: 0 自動;
    マージントップ: 10px;
}

#f_top ul{
    リストスタイル: なし;
}

#f_トップリ{
    フロート: 左;
    パディング: 10px;
    ボーダー右: 実線 1px #ccc;
}

#f_bottom{
    フロート: 左;
    テキスト整列: 中央;
    幅: 960ピクセル;

}

.left_kuai{
    パディング左: 10px;
    パディングボトム:10px;
}

.left_kuai_t{
    背景画像:url("../img/item_left.png");
    幅: 412ピクセル;
    高さ:65ピクセル;

    マージントップ:20px;
    マージン左: -19px;

    色: #FFFFFF;
    フォントの太さ: 700;
    高さ: 65ピクセル;
    行の高さ: 55px;

    テキストインデント: 2em;
}

.right_kuai{
    マージントップ:0px;
    マージン-ボトム: 20px;
    幅:100%;
    境界線: 実線 1px #ccc;
    背景色: #fff;

    パディング左: 10px;
    パディングボトム:10px;

}

.right_kuai_t{
    背景画像:url("../img/item_right.png");
    幅: 166ピクセル;
    高さ: 30ピクセル;

    マージントップ:-12px;
    マージン左:20px;

    色: #FFFFFF;
    フォントサイズ: 15px;
    フォントの太さ: 700;
    行の高さ: 30px;

    テキストインデント: 1em;

}