Menu
CoddyTech

导航栏样式

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

我们来设置导航栏的样式吧!

challenge icon

挑战

简单

目标类“navigation”:

  1. 设置位置:

    a. 将 position 设置为 absolute。

    b. 将 bottom 设置为 32px。

    c. 将 border-radius 设置为 24px。

    d. 将 left 位置设置为 50%。

  2. 添加以下过渡样式:

    transform: translate(-50%, 0);
  3. 将 background-color 设置为你喜欢的任意颜色!(建议使用:purple)

亲手试试

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

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

自己练习: Web 在线编辑器