19/4/30学習記録④ フォーム
ジーコ
未経験からのWeb独学戦記
19/4/30学習記録『パンくずリスト作成とCSSボックスモデル』
ジーコ
記事内に商品プロモーションを含む場合があります
パンくずリストの記述
Home ≫ Product List ≫ Camera Lense ≫ Wide
HTMLはこちら。
<div class="breadercrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/">Product List</a></li>
<li><a href="/">Camera Lense</a></li>
<li><a href="/">Wide</a></li>
</ol>
</div>
CSSはこちら。
.breadercrumb ol {
list-style-type: none;
margin: 0;
padding: 0;
}
.breadercrumb li {
display: inline;
}
.breadercrumb li::after {
content: "≫";
}
.breadercrumb li:last-child::after {
content: none;
}
.breadercrumb a {
text-decoration: none;
color: #333;
}背景画像に関係する設定
背景画像を設定する”background”セレクタは超有能。
背景画像に関係する4つの設定に加えて、背景色の設定も可能である。
この5つの設定可能項目をまとめておく。
1.背景画像のパス
2.背景画像の繰り返し
3.背景画像の表示される位置
4.背景画像の固定
5.背景色
ABOUT ME
