该代码示例展示了如何利用HTML的`<a>`标签href属性创建锚点，结合CSS的Grid布局和Sticky定位来创建一个简单的电梯导航。页面主要内容分为三部分：服饰、家电和生鲜，侧边栏的导航链接可以固定在屏幕中，方便用户快速跳转至相应区块。
结构
<body>
<div class="container">
<div class="goods">
<div class="box1" id="box1">服饰</div>
<div class="box2" id="box2">家电</div>
<div class="box3" id="box3">生鲜</div>
</div>
<div class="slidebar">
<a href="#box1">服饰</a>
<a href="#box2">家电</a>
<a href="#box3">生鲜</a>
</div>
</div>
</body>css
<style>
.container {
width: 100%;
height: 3000px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 150px;
grid-row: 1 / span 6;
grid-column: 2 / span 3;
}
.container .goods {
display: grid;
grid-row-gap: 600px;
}
.container .goods div {
background-color: green;
}
.container .goods div:nth-child(2) {
background-color: red;
}
.container .slidebar {
position: sticky;
left: 0;
top: 500px;
margin: auto;
}
.container .slidebar a {
text-decoration: none;
display: block;
width: 100px;
height: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
}
.container .slidebar a:nth-child(2) {
background-color: yellowgreen;
}
</style>使用a链接的href锚点，使用grid栅格布局，使用sticky电梯导航的粘性布局
实现简单的电梯导航
扫一扫
651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
