排列项目

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 73 课，共 76 课。

挑战

简单

让我们练习使用 flexbox 创建一个简单的水平导航栏。使用 CSS 设置菜单样式，使其与下方图片中的设计一致。

按照以下步骤操作：

将导航栏设为 flex 容器。
在链接之间添加间距。
1. 使用 justify-content: space-around 均匀分布链接。
设置导航栏的样式。
1. 将背景颜色设为 dark blue。
2. 添加一些内边距，为链接周围留出空间。
设置导航链接的样式。
1. 选择 <a> 元素。
2. 将文本颜色设为 white。
3. 移除默认的下划线。
4. 将字体大小设为 18px。
5. 添加 8px 15px 内边距，让间距更合适。

亲手试试

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>

使用 CSS 添加样式中的所有课

2添加 CSS

内联 CSS 内部 CSS 外部 CSS 基础样式挑战

5颜色与背景

背景颜色 HEX 颜色 RGB 颜色使用 RGBA 设置透明度复习挑战 #1

8盒模型第二部分

盒模型尺寸边框圆角溢出盒子阴影复习挑战

11布局技巧

块级元素与行内元素定位基础相对定位绝对定位固定定位 z-index 基础复习挑战

14最终挑战

排列项目电影列表婚礼邀请卡浮动通知

自己练习： Web 在线编辑器