リスト項目のスタイリング
Coddyの「ボトムナビゲーションバー - HTML/CSSプロジェクト」コースのレッスン 11/12。
リストアイテムのスタイリングを追加しましょう。これを使用することで、アイコンを適切に調整できるようになります。
チャレンジ
簡単navigationクラスと順序なしリストのリストアイテム.navigation ul liを対象にします:
- heightとwidthを
35pxに、marginを1remに設定します。 - paddingを
0 1remに設定します。 - colorを好きな色に設定してください!(推奨:
white) - border-radiusを
50%に設定します。 - displayを
flexに、align-itemsとjustify-contentをcenterに設定します。 以下のスタイリングを追加します:
cursor: pointer; transition: all 0.2s linear;
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>