菜单与页面链接（锚点练习）

最新推荐文章于 2024-04-28 17:47:43 发布

辛苦的码农20200609

最新推荐文章于 2024-04-28 17:47:43 发布

阅读量176

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h21bjab1bbaa.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>

body ul{
margin: 0;padding: 0;
}
.a{
width: 1200px;
height: 800px;
border: 1px red solid;
margin: 0 auto;
}
.float{
float: left;
}
.b{
width: 200px;
height: 800px;
background: green;
}
.c{
width: 1000px;
height: 800px;
background: pink;
overflow: hidden;
}
.a .c div{
width: 1000px;
height: 800px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}

</style>

</head>
<body>
<div class="a">
<div class="b float">
<ul>
<li><a href="#mini1">mini1</a></li>
<li><a href="#mini2">mini2</a></li>
<li><a href="#mini3">mini3</a></li>
</ul>
</div>
<div class="c float">
<div id="mini1">type1</div>
<div id="mini2">type2</div>
<div id="mini3">type3</div>
</div>
</div>
</body>
</html>