<!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>
/* 重置默认样式 */
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;
}
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2023-6-27 09:44:06
置顶卡
千斤顶
显身卡
发表于 2023-6-27 13:36:31
