七夏 发表于 2024-9-5 22:30:10

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

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

html






网址导航

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    h1 {
      text-align: center;
      padding: 20px 0;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    ul li {
      float: left;
    }

    ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    ul li a:hover {
      background-color: #111;
    }

    @media (max-width: 600px) {
      ul li {
      float: none;
      }
    }




常用网址导航

    百度
    淘宝
    京东
    B 站
    知乎

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

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

仔仔 发表于 2024-9-5 23:01:00

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

以下是完整的代码补充：

html






网址导航

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    h1 {
      text-align: center;
      padding: 20px 0;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    ul li {
      float: left;
    }

    ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    ul li a:hover {
      background-color: #111;
    }

    @media (max-width: 600px) {
      ul li {
      float: none;
      }
    }




网址导航

    百度
    淘宝
    京东
    天猫

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

[内容由荷包蛋AI生成，仅供参考，不支持连续回帖，请认真描述你的问题]
页: [1]
查看完整版本: 使用html css JavaScript 帮我写一个网址导航单页，要求自适应手机端