Menu
CoddyTech

列表项样式

Coddy 底部导航栏:HTML/CSS 项目 课程的第 11 课,共 12 课。

我们来为列表项添加样式,这样你就能正确调整图标。

challenge icon

挑战

简单

选择导航类中的列表项以及无序列表 .navigation ul li:

  1. 将高度和宽度设为 35px,将外边距设为 1rem。
  2. 将内边距设为 0 1rem。
  3. 颜色可以设置为你喜欢的任意颜色!(推荐:white)
  4. 将边框圆角设为 50%。
  5. 将 display 设为 flex,并将 align-items 和 justify-content 设为 center。
  6. 添加以下样式:

    cursor: pointer;
    transition: all 0.2s linear;

亲手试试

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 在这里编写 HTML 代码 -->
        <script src="script.js"></script>
    </body>
</html>

底部导航栏:HTML/CSS 项目中的所有课

自己练习: Web 在线编辑器