页面导航栏和页面分布

前言

其实导航栏可简单了，因为超链接标签<a>就有页面移动的功能，不在意美化的话甚至不用用到 CSS。本质上就是页面中分出一块盒子，在这个盒子中放超链接，这些链接对应的不是网址而是标题标签 <h>。
下面分为4个部分来说：
1.导航栏制作
2.导航栏连接标题
3.CSS文件修饰
4.分页布局

导航栏制作

接下来来说说导航栏这个盒子的设计：
首先呢，需要设定盒子的宽度，我是使用220px。那有同学就要问了：兄弟兄弟，如何设置盒子宽度啊？使用width属性设置就可以了嗷。
然后就是他的位置了，也就是在网页上的显示位置。我这里设置，top为100px，right为0px，也就是距离顶端100px，距离右端0px。
哦对了对了，差点忘记最重要的了，这个盒子我们可以使用<nav>标签，而不使用<div> 标签，因为<nav>标签，网页会自动识别为导航栏之类的，总之就是更有普适性。
然后还有其他的一些属性，在这里一并说了，上面的三个：width, top, right 是基础的，要实现更舒服的感觉还要添加一些别的属性：
   position：这个是设置导航栏位置是否固定，我目前用过的值有两个，1. fixed；2.sticky。要问有啥区别的话，其实我也不大懂我目前知道的区别就是，值设置为fixed的话，不参与布局，所以为了实现左边屏幕是内容，右边屏幕是导航栏，二者互不干扰的话，就需要把position 的值设置为sticky。
   flex-shrink：这个是使用了flex布局之后，当空间不足时，这个元素收缩多少，比如我这里填0，那么就是不收缩。那有的同学就要问了：兄弟兄弟，什么是flex 布局呀？先留个悬念，等会就会讲到。
   background：这个属性是设置盒子的背景颜色，我这里用的值是：#f8f9fa
   border：这个是边框的线条，需要设置三个值：线条粗细度、线的样式以及边框线的颜色。我使用的值是：1px solid #dee2e6 。solid表示是实线。
   border-radius：边框四角的弧度，我使用的值是8px。
   padding：这个值是内边距，也就是最外端的线到内容区域的距离，我使用的值是16px。
   max-height：导航栏盒子的最长高度，我使用的值是 70vh 。
   overflow-y：这个是当内容超过设置最大高度时，是否出现滑动条，值设为 auto则为出现滑动条，我使用的也是这个。
   z-index：这是当元素重叠时，设置哪个显示优先级高，比如我使用的值是 1000，表示永远显示在最顶端。不过使用左右分开布局的话，感觉用不到这个。
了解了以上的属性和对应属性值，就可以制作出像我那样的导航栏盒子了，接下来讲讲如何实现连接。

导航栏连接标题

这里我们需要用到id属性。首先呢，我们需要给要导航的h标签设置id，比如说id="section-1"这样子。
然后我们在nav目录标签中的使用a超链接标签时，将超链接标签的href属性的值设置为 #id名这样子点击这个超链接时，就会自动跳转到id对应的地方了，很神奇叭
我们可以给超链接的显示文本修饰一下，就更美观了，下面是可以修改的属性：
   display：这个是类型转换的，设置成 block 就表示这个类的元素是块级元素，也就是说它会占据一整行。
   padding：就是外边框到内边框的距离，这里给两个值 6px 12px 前者是上下，后者是左右。
   color：就是颜色，我这里使用的值是 #333
   text-decoration：这个设置文字的修饰情况。填入 none 表示不修饰，因为超链接文本都会有一个下划线和变蓝色，用这个之后就不会有下划线和蓝色了。
   border-radius：和导航栏一样，就是外圆弧度。
   transition：这个是设置效果变化的过渡时间。填入两个值，一个是要改的对象，填入 all 表示所有元素都运用这个过渡效果；第二个值是过渡的时间，我这里使用的值是 0.2s

CSS文件修饰

其实 <style> 标签所做的事情就是 .css 文件所做的事情哦。CSS 涉及到了选择器的概念...换言之， .css 文件就是写一大堆关于选择器的参数设定。选择器我在网页前端粗浅笔记里面有说过哦。
举个例子吧：

.sidebar {
    width: 220px;
    top: 100px;
}

形如这样的东西可以写在 .css 文件里头。然后，就可以酱紫： <nav class="sidebar"> 这样这个 <nav> 标签的样式就会和你在 .sidebar 里面写的一样啦。用 .css 文件会更好维护就是了，后面再通过 <link rel="stylesheet" href="xxx.css"> 引入就可以了。这个 rel 属性和对应的属性值好像是固定搭配，我也不太懂为啥

导航栏的类名可以叫：sidebar
导航栏里面的每一个标签的类名可以叫：nav-link
其实也不固定啦，看自己喜好，但是这样比较直观一些。
.nav-link:hover 如果选择器是这样的形式的话，就表示是鼠标悬停在上面时发生的效果，一般可以修改一下背景颜色，依次来产生选中高亮的效果。

分页布局

分页布局呢，要牵扯到父容器和子容器了，我的理解也没有很深，所以我直接说结论：一个类型为 container 的 <div> 标签套住 <body> 的所有内容，再用一个类型为 content 的 <div> 标签套住文本内容，也就是不包括描述导航栏的部分。
下面是两个类型的属性设置：
container:
   display: flex 好像就是类型设置成了 flex 就产生了这个 flex 布局
   align-items: 这个是设置不同分区的元素对齐方式。我这里使用的值是 align-items, 这个值是让不同分区的元素的开头对齐。
   gap: 两个分区的间距，我这里使用的是 30px
content:
   flex: 这个是设置自动填充，使用的值是 1
   min-width: 这个是为了元素超出容器范围的时候自动换行，使用的值是 0

编辑时间：

初次编辑：2026.7.30 0:11