PHP実戦20日目_PHPチュートリアル
- WBOYオリジナル
- 2016-07-14 10:11:31782ブラウズ
厳密に言うと、最近の実践は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;
}
@charset "utf-8";
/* CSS ドキュメント 微凉 QQ:496928838 http://wl.125.la*/
*{
マージン: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;
}
#メイン{
位置:相対;
トップ:82px;
マージン:0 自動;
幅:960ピクセル;
高さ: 自動;
}
#左{
フロート: 左;
背景: なし繰り返しスクロール 0 0 #FFFFFF;
境界線: 1 ピクセルの実線 #C7C7C7;
幅: 630px;
}
#そうです{
フロート:右;
//背景: なし繰り返しスクロール 0 0 #FFFFFF;
// 境界線: 1px の実線 #C7C7C7;
幅: 314px;
}
#フッター{
フロート: 左;
margin-top:90px;
ボーダートップ: 実線 1px #ccc;
幅: 100%;
}
#f_center{
幅: 960px;
高さ: 54px;
マージン: 0 自動;
text-align: center;
}
#f_top{
幅:700ピクセル;
マージン: 0 自動;
マージントップ: 10px;
}
#f_top ul{
リストスタイル: なし;
}
#f_トップリ{
フロート: 左;
パディング: 10px;
ボーダー右: 実線 1px #ccc;
}
#f_bottom{
フロート: 左;
text-align: 中央;
幅: 960px;
}
.left_kuai{
パディング左: 10px;
パディングボトム:10px;
}
.left_kuai_t{
背景画像:url("../img/item_left.png");
幅: 412px;
高さ:65px;
margin-top:20px;
マージン左: -19px;
カラー: #FFFFFF;
フォントの太さ: 700;
高さ: 65px;
行の高さ: 55px;
テキストインデント: 2em;
}
.right_kuai{
margin-top:0px;
margin-bottom: 20px;
幅:100%;
境界線: 実線 1px #ccc;
背景色: #fff;
padding-left: 10px;
パディングボトム:10px;
}
.right_kuai_t{
背景画像:url("../img/item_right.png");
幅: 166px;
高さ: 30px;
margin-top:-12px;
margin-left:20px;
色: #FFFFFF;
フォントサイズ: 15px;
フォントの太さ: 700;
行の高さ: 30px;
テキストインデント: 1em;
}