CSS 如何固定导航目录
在博客页面中有一个很常用的布局是文章主题居中,目录居左或居右固定,那么这个布局要如何用CSS渲染出来呢
不多说,直接上代码
html
1
2
3
4
5
6
7
8
9
10<div class="wrapper">
<div class="main-page">
内容
</div>
<div class="nav-block">
<div class="nav-inner">
目录
</div>
</div>
</div>css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28body {
background-color: #EEEEEE;
}
.wrapper {
width: 400px;
margin: auto;
max-width: 100%;
}
.main-page {
display: inline-block;
height: 9999px;
width: 400px;
background: white;
}
.nav-block {
display: inline-block;
margin-left: 20px;
position: fixed;
top: 30px;
background-color: white;
}
.nav-inner {
width: 120px
}