这个项目目前实现了静态页面和切换黑白模式的功能。此文章是我做的页面经项目组长 @HappyYYT 完善之后为总结归纳所写。本文所包含和解决的一些问题：如何构建header导航栏和侧边导航栏，如何处理同行不同内容的分布，如何切换黑白模式等。
Part1 修改建议
我认为让header和左侧导航栏取消固定也不错，由此对属性修改如下：
/* style.css */
header {
width: 100%;
height: 100px;
background: #55bb8e;
display: flex;
align-items: center;
/* position: fixed; */
}
.container {
min-height: calc(100vh - 100px);
padding-top: 28px; /* 128px改为28px */
display: flex;
}
.container nav.menu {
width: 220px;
/* position: fixed; */
}
.container main {
width: calc(100% - 122px);
padding-left: 20px; /* 200px改为20px */
}
此外，中间主体的布局也可以做如下优化：
删除以下部分：
/* index.html */
<section style="width:100%;height:1000px;margin-top: 20px;" >
</section>
改变css中中间主体的背景设置：
/* style.css */
.container main .mainContainer {
width: 100%;
height: 1000px; /* 增加高度 */
background: #efefef;
padding: 4px;
}
Part2 JavaScript实现黑白模式切换
代码实现：
// 黑夜模式主逻辑
document.querySelector(".darkMode").addEventListener("click", (e) => {
document.querySelectorAll(".darkModeTheme").forEach((item) => {
toggleClass(item, "dark");
});
toggleClass(e.target, "active");
});
// 从黑暗模式主逻辑里抽象出来的方法
const toggleClass = function (ele, className) {
if (ele.classList.contains(className)) {
ele.classList.remove(className);
} else {
ele.classList.add(className);
}
};
相关知识点：
Element.classList
document.querySelector()
结合相关知识点进行优化：
document.querySelector(".darkMode").addEventListener("click", (e) => {
document.querySelectorAll(".darkModeTheme").forEach((item) => {
item.classList.toggle("dark");
});
e.target.classList.toggle("active");
// 按钮背景图片切换
});
Part3 CSS属性学习
【flex属性】
参考：元素间的对齐和空间分配
align-items属性属性可以使元素在交叉轴方向对齐
.box {
display: flex;
align-items: flex-start;
}
//stretch:初始值
//flex-start:使flex元素按flex容器的顶部对齐
//flex-end:使它们按flex容器的下部对齐
//center:使它们居中对齐
justify-content属性用来使元素在主轴方向上对齐
.box {
display: flex;
justify-content: flex-start;
}
//stretch:
//flex-start:初始值，元素从容器的起始线排列
//flex-end:从终止线开始排列
//center:在中间排列
//space-around:使每个元素的左右空间相等
//space-between:把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等
calc() 此CSS函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length> 、<frequency>、 <angle>、<time>、<percentage>、<number> 或 <integer> 。
/* property: calc(expression) */
width: calc(100% - 80px);
cursor: pointer; 鼠标悬浮于元素上显示为“手”。一般 <a></a> 元素默认设置为 cursor: pointer; ，但也可以为按钮、li等元素添加此属性。
:not(:first-of-type) 设置列表元素中非第一个元素的属性，通常用于创造元素之间的间隔。
.container nav.menu ul li:not(:first-of-type) {
margin-top: 12px;
}
svg文件来源：阿里巴巴矢量图库
Part4 CSS属性备忘录
Tips：同一模块下css优先级要注意，严格嵌套防止出错。
line-height CSS属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。
/* Keyword value */
line-height: normal;
/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* <percentage> values */
line-height: 34%;
/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;
text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;
/* Block alignment values (Non-standard syntax) */
text-align: -moz-center;
text-align: -webkit-center;
/* Global values */
text-align: inherit;
text-align: initial;
text-align: unset;
border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。
border-radius: 30px;
CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用 content 属性插入的内容都是匿名的可替换元素。当插入图标时，可以通过 content 插入内容，也可以通过 content: " "; 占位，进一步设置 background-image。 所有页面元素(包括伪类)都必须具有 content 属性才能显示。
content: normal /* Keywords that cannot be combined with other values */
content: none
content: 'prefix' /* <string> value, non-latin characters must be encoded e.g. \00A0 for */
content: url(http://www.example.com/test.html) /* <uri> value */
content: chapter_counter /* <counter> values */
content: attr(value string) /* attr() value linked to the HTML attribute value */
content: open-quote /* Language- and position-dependant keywords */
content: close-quote
content: no-open-quote
content: no-close-quote
content: open-quote chapter_counter /* Except for normal and none, several values can be used simultaneously */
content: inherit
text-transform CSS属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。
/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;
/* Global values */
text-transform: inherit;
text-transform: initial;
text-transform: unset;
CSS 属性 min-height 能够设置元素的最小高度。这样能够防止 height 属性的应用值小于 min-height 的值。
/* <长度> 数值 */
min-height: 3.5em;
/* <百分比> 数值 */
min-height: 10%;
/* 关键词 */
min-height: max-content;
min-height: min-content;
min-height: fit-content(20em);
/* 全局数值 */
min-height: inherit;
min-height: initial;
min-height: unset;
