フッターのレイアウト

楽しい生活

ロゴとリストの配置

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

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

要素を左から横並びにするにはfloat: left

左右横並びにするには?

 

float: right

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

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

float: rightを用いると、指定した要素を右から順に横並びに

f:id:t0919k-1201y:20201105081919g:plain

 

要素を左右に配置する

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

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

float: right,leftを組み合わせることでロゴとリスト全体を左右に配置出来る

 

演習メモ

バックグラウンドカラーの変更

background-color: #〇〇;

高さ(height)の変更

height: 120px;

上下左右のpaddingを40pxに変更

padding: 40px;.

 

footer-logoのfont-sizeとfloatを指定

.footer-logo {

font-size: 32px;

float: left;

}

 

footer-listのfloatを指定

.footer-list {

float: right;

}

footer-listの中のli要素のpadding-bottomを指定

.footer-list li {
padding-bottom: 20px;
}

コメント

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