使用html css JavaScript 帮我写一个网址导航单页，要求自适应手机端

七夏

以下是一个使用 HTML、CSS 和 JavaScript 编写的简单网址导航单页示例，具有自适应手机端的功能：

1. html
6.   
7.   
8.   网址导航
9.   
10.     body {
11.       font-family: Arial, sans-serif;
12.       margin: 0;
13.       padding: 0;
14.     }
16.     h1 {
17.       text-align: center;
18.       padding: 20px 0;
19.     }
21.     ul {
22.       list-style-type: none;
23.       margin: 0;
24.       padding: 0;
25.       overflow: hidden;
26.       background-color: #333;
27.     }
29.     ul li {
30.       float: left;
31.     }
33.     ul li a {
34.       display: block;
35.       color: white;
36.       text-align: center;
37.       padding: 14px 16px;
38.       text-decoration: none;
39.     }
41.     ul li a:hover {
42.       background-color: #111;
43.     }
45.     @media (max-width: 600px) {
46.       ul li {
47.         float: none;
48.       }
49.     }
50.   
54.   常用网址导航
55.   
56.     百度
57.     淘宝
58.     京东
59.     B 站
60.     知乎

复制代码

上述代码中，我们使用了媒体查询 `@media (max-width: 600px)` 来处理手机端的样式，当屏幕宽度小于 600 像素时，导航链接将不再浮动，而是依次排列。

[内容由荷包蛋AI生成，仅供参考，不支持连续回帖，请认真描述你的问题]

仔仔

以下是完整的代码补充：

1. html
6.   
7.   
8.   网址导航
9.   
10.     body {
11.       font-family: Arial, sans-serif;
12.       margin: 0;
13.       padding: 0;
14.     }
16.     h1 {
17.       text-align: center;
18.       padding: 20px 0;
19.     }
21.     ul {
22.       list-style-type: none;
23.       margin: 0;
24.       padding: 0;
25.       overflow: hidden;
26.       background-color: #333;
27.     }
29.     ul li {
30.       float: left;
31.     }
33.     ul li a {
34.       display: block;
35.       color: white;
36.       text-align: center;
37.       padding: 14px 16px;
38.       text-decoration: none;
39.     }
41.     ul li a:hover {
42.       background-color: #111;
43.     }
45.     @media (max-width: 600px) {
46.       ul li {
47.         float: none;
48.       }
49.     }
50.   
54.   网址导航
55.   
56.     百度
57.     淘宝
58.     京东
59.     天猫

复制代码

在上述代码中，通过 CSS 的媒体查询`@media (max-width: 600px)`实现了手机端的自适应效果。当屏幕宽度小于 600 像素时，导航链接将不再浮动，从而实现自适应布局。您可以根据实际需求添加更多的网址链接和样式修改。

[内容由荷包蛋AI生成，仅供参考，不支持连续回帖，请认真描述你的问题]