导航条，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
  <ul class="menu">
    <li><a href="">🍓草莓冰冰</a></li>
    <li><a href="">🍫巧克力火山</a></li>
    <li><a href="">🥭芒果旋风</a></li>
    <li><a href="">🍇葡萄紫水晶</a></li>
  </ul>
</body>

</html>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

            
            .menu {
  width: 800px;
  list-style: none; /* 去掉列表小黑点 */
  background-color: #FFF0bb; /* 黄色背景色 */
  line-height: 50px; /* 黄色背景高度 */
  margin: 20px auto; /* 上边距、居中 */
}
.menu li {
  display: inline-block; /* 横向排列 */
  width: 150px;
  text-align: center;
  border: 3px dashed #FFB6C1;
  margin: 15px;
}
.menu a {
  text-decoration: none;
  color: #FF69B4;
  padding: 10px 20px;
}
.menu a:hover {
  background: #FFE4E1;
  transform: translateY(-3px);
  transition: all 0.3s;        
}

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

预览

控制台