html的求助（菜单的设计）

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

  对前端的新手学习，打算模仿锤子商城（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，过了好久才好

账号		自动登录	找回密码
密码			立即注册

html的求助（菜单的设计）

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块