Zionsky 发表于 2023-6-27 09:44:06

html的求助（菜单的设计）

对前端的新手学习，打算模仿锤子商城（https://www.smartisan.com/）的静态网站，在弄完头部之后对这个导航部分（一级菜单和二级菜单）犯了难。
原本在头部部分下方的导航部分，当页面下移后，这个导航部分就会移到最上方，且右边搜索框变为个人中心和购物车

各位dalao给些思路，希望能有完整的.html和.css（二级菜单里的可以不用图标，用文字代替即可，页面下移时右边搜索框不变即可）

歌者文明清理员 发表于 2023-6-27 09:46:06

本帖最后由 歌者文明清理员 于 2023-6-27 09:47 编辑

理解您的需求，您希望在模仿锤子商城的静态网站中实现一个类似的导航部分，其中包含一级菜单和二级菜单，并且该导航部分在页面下移时固定在顶部，同时右侧的搜索框变成个人中心和购物车。以下是一个基本的HTML和CSS示例代码，供您参考：

HTML代码：

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

<head>
    <title>锤子商城</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <header>
      <!-- 头部内容 -->
    </header>

    <!-- 导航部分 -->
    <nav>
      <div class="container">
            <ul class="main-menu">
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a>
                  <ul class="sub-menu">
                        <li><a href="#">手机</a></li>
                        <li><a href="#">配件</a></li>
                        <!-- 其他子菜单项 -->
                  </ul>
                </li>
                <li><a href="#">活动</a></li>
                <li><a href="#">关于我们</a></li>
                <!-- 其他一级菜单项 -->
            </ul>
            <div class="user-menu">
                <a href="#">个人中心</a>
                <a href="#">购物车</a>
            </div>
      </div>
    </nav>

    <main>
      <!-- 主要内容 -->
    </main>

    <footer>
      <!-- 底部内容 -->
    </footer>
</body>

</html>
CSS代码（style.css）：

/* 重置默认样式 */
body, ul {
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

nav {
    background-color: #333;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 999;
}

.main-menu {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.main-menu li {
    margin-right: 20px;
}

.main-menu li a {
    color: #fff;
    text-decoration: none;
}

.sub-menu {
    display: none;
    position: absolute;
    background-color: #333;
    padding: 10px;
}

.main-menu li:hover .sub-menu {
    display: block;
}

.user-menu {
    margin-left: auto;
}

.user-menu a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
}
这段代码中，导航部分使用<nav>元素，顶部导航使用无序列表<ul>表示一级菜单，通过设置display: flex使菜单项水平排列。二级菜单使用嵌套的无序列表实现，通过设置position: absolute和显示隐藏的方式控制二级菜单的显隐。右侧个人中心和购物车使用<div>包裹，并通过设置margin-left: auto使其靠右对齐。通过设置position: sticky和top: 0实现导航部分在页面下移时固定在顶部。

请注意，这只是一个基本的示例，您可以根据需要进行进一步的样式调整和内容填充。希望对您有所帮助！如有其他问题，请随时提问。

sfqxx 发表于 2023-6-27 10:43:03

歌者文明清理员 发表于 2023-6-27 09:46
理解您的需求，您希望在模仿锤子商城的静态网站中实现一个类似的导航部分，其中包含一级菜单和二级菜单，并 ...

wc,这么牛？

歌者文明清理员 发表于 2023-6-27 10:43:55

sfqxx 发表于 2023-6-27 10:43
wc,这么牛？

http://FishC.Com.Cn

高山 发表于 2023-6-27 13:11:40

歌者文明清理员 发表于 2023-6-27 10:43
http://FishC.Com.Cn

这啥，0.0.0.1？？？我草，这网址都能占这IP！

歌者文明清理员 发表于 2023-6-27 13:25:27

高山 发表于 2023-6-27 13:11
这啥，0.0.0.1？？？我草，这网址都能占这IP！

http://1
↑反诈 app 提醒您：上方连接有害！

高山 发表于 2023-6-27 13:34:12

歌者文明清理员 发表于 2023-6-27 13:25
http://1
↑反诈 app 提醒您：上方连接有害！

敢骗我？但我发现这个bug了！！！只要点开发现不对，立刻关闭，服务器就不以为然啦~

langyawang 发表于 2023-6-27 13:36:31

歌者文明清理员 发表于 2023-6-27 13:25
http://1
↑反诈 app 提醒您：上方连接有害！

为什么？我是新来的，看不明白啊？

歌者文明清理员 发表于 2023-6-27 17:11:15

langyawang 发表于 2023-6-27 13:36
为什么？我是新来的，看不明白啊？

别点！！！

langyawang 发表于 2023-6-27 17:39:14

歌者文明清理员 发表于 2023-6-27 17:11
别点！！！

我点了，然后看别的帖子提示405，过了好久才好{:10_250:}
页: [1]
查看完整版本: html的求助（菜单的设计）