HTML5 および CSS3 フラット スタイル ブログ チュートリアルのリソース共有

このコースは、CSS3フラットスタイルのブログの例を通じて詳細に説明し、誰でも簡単に通常のWebページのコンポーネントを理解し、Webコンポーネントのさまざまな部分を柔軟に使用し、その構成アイデアを理解し、Webページの柔軟なレイアウトとデザインを理解します。 。マクロからミクロまで全体のレイアウトも把握できます。

コース再生アドレス: http://www.php.cn/course/307.html

先生の教え方:

先生の講義はシンプルで奥深く、わかりやすいです論理的思考力を使用して生徒の注意を引き、理性を使用して教室での指導プロセスを制御することで、層ごとに連動し、厳密な議論と厳密な構造を組織化して分析します。先生の講義を聞くことで、学生は知識を学ぶだけでなく思考力のトレーニングも受け、先生の厳格な学問的姿勢に影響を受け、影響を受けます

このビデオの中でより難しい部分は、HTML5 と CSS3 のフラット スタイルのブログです。

モジュール分析:
フラットスタイルレイアウト: ヘッダーと本文
ページコンポーネント分析:
1、ヘッダー(ページヘッダー):
①h1>a、ホームページのリンクを配置します。通常、ページにh1 は 1 つだけ、その他は h2、h3 などを使用できます。Jiangzi はページの最適化に役立ちます
②nav>ul>li>a>span、ネストされたメニューをレイヤーごとに、主に構造化された方法を使用します。方法がわからないためです。ナビゲーションバーには多くのボタンやリンクが必要です。
2、バナー部分: 内部セクション + 下スクロールボタン
①div>h2+ul、
h2>p ​​
ul>li>a
②a
3、テキストセクション1
①セクション> div>header+ul
header>h2>p
headerはタイトルを書きます サブタイトル
ul>li>兄弟のタイトル
innerはページ全体の幅を制限するために使用されます
3、テキストセクション2
セクション>セクション>div1+ div2
div1>img
div2>h2+p
強いリスト属性がない場合 あればdivを使って記述できます。
4、section3、4は省略
5、footerフッター部分
footer>ul+ul、div、spanが適当です。

1. スタイルとファイル構造をリセットします:
スタイルをリセットする目的:
異なるブラウザーでスタイルを統一する、
Web サイト: cssreset.com スタイル リセット公式 Web サイト、
よく使用される Web サイト: necolas.github.io/normalize.cssブラウザを正規化して直接導入可能

2. ページの大きなフレームの分析:
ヘッダー+コンテンツ+フッター
ヘッダー>ナビゲーション>テーマバナー

3. ページヘッダーの構造分析とレイアウト
※lorem+tabを入力Sublime Editor では、無意味なテキスト塗りつぶしが生成される可能性があります。

以上がHTML5 および CSS3 フラット スタイル ブログ チュートリアルのリソース共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。