フッターの構造

おいしいお店ー東北

フッターの作成

左側にはロゴ、右側にはリスト

f:id:t0919k-1201y:20201104083315p:plain

f:id:t0919k-1201y:20201104083329p:plain

 

フッターのレイアウト

f:id:t0919k-1201y:20201104083445p:plain

ヘッダー作成時、<li>要素全体にfloatとpaddingを指定

フッターの<li>要素にも適用される↓

f:id:t0919k-1201y:20201104083503p:plain

※stylesheet.css(メモ)

.header-list li {
float: left;
padding: 33px 20px;
}

 

入れ子のセレクタ

f:id:t0919k-1201y:20201104083756p:plain

f:id:t0919k-1201y:20201104083824p:plain

「.header-list」の後にスペースを空けてliと続けると

「header-list」の中の<li>要素にのみCSSを適用することができる

f:id:t0919k-1201y:20201104083850p:plain

ヘッダーの<li>要素とフッターの<li>要素に別のCSSを適用することができる

コメント

タイトルとURLをコピーしました