james-wangx / blog-front-end

Blog front end 博客前端

Blog front end 博客前端

一、全局设计

1.1 全局设置

比较简洁，没有使用前端框架，后端代码，只是 HTML + CSS + JS。

颜色：

• 页面背景颜色：aliceblue
• 显示内容的盒子背景色：white
• 盒子阴影色：gainsboro
• 页面强调色：dodgerblue
• 页面强调色（浅）：lightblue
• 页面强调色（深）：mediumblue

宽度

• 导航栏：最大宽度
• 导航栏内容：1190px
• 页面内容：1190px
• 页脚：最大宽度
• 内容左侧：页面内容的 70%
• 内容右侧：页面内容的 25%

页面

• 首页
• 文章详情页
• 登录/注册页

超链接无下划线

图标素材：https://www.iconfont.cn/

1.2 导航栏设计

每个页面都有导航栏

1.2.1 外层导航栏

（header 中的内容省略，这里只讲外壳，内容在后面讲）

将导航栏的所有内容都放到 header 标签内，通过 height 设置导航栏固定高度，设置上下 padding 使得内容可以夹在中间显示。

通过 box-shadow 设置导航栏盒子阴影向下偏移可以更好的凸显导航栏，产生一种导航栏在页面之上的感觉：

设置 position 为 sticky （粘贴）和 top 为 0 来固定导航栏的位置。效果是在导航栏距离顶部 0px 前相对定位，超过阈值后固定定位，即实现了导航栏一直固定在顶部的效果。如果设置 position 为 fixed 也可以实现固定定位，但整个导航栏会被移除正常文档流，并不为元素预留空间，使得下面的元素占据了原本是导航栏的位置：

如上图，下面的文章内容盒子直接占据了导航栏的位置，而且导航栏宽度也发生了变化。

关于 position 的详细解释：https://developer.mozilla.org/zh-CN/docs/web/CSS/position

文章有一个放大的过渡动画，当鼠标位于文章上时，整个文章内容会放大，这就会覆盖掉固定的导航栏：

可以使用 z-index 解决这个问题，当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。不妨将 z-index 设置为 10。

1.2.2 导航栏内容

关于导航内容的设置：

真正的内容都在 nav 标签内，header 标签只是一个壳子，用来设置背景色，调整位置等。设置 margin 为 auto 使得整个导航栏内容居中。导航栏的超链接都是放在 ul li 组成的列表里面的，所以还需要设置很多的样式覆盖默认样式，marigin: 0; padding: 0 等。

1.2.3 输入框

设置 autocomplete 为 off 可以不显示一些奇怪的搜索记录，placeholder 中的内容是当输入框没有输入时显示的内容。label 标签在这里没有实际的用处，放上去只是不想看到 IDE 的黄色警告。

输入框样式：

设置 focus 伪类选择器当聚焦于输入框时，输入框的宽度会缓缓变宽。设置 transition 使得宽度的过度时间为 0.5 秒，ease-in-out 表示过度时一开始和最后都比较慢，详细请看：https://developer.mozilla.org/zh-CN/docs/web/CSS/transition

1.2.4 登录按钮

这只是一个不怎么合适的名字，并不代表它一定是登录按钮。确切的说：当用户没有登录时它显示一个登录按钮，当用户登录后它显示一个下拉框，用户可以看到用户名，并且可以退出登录。HTML 代码就这么点：

它的内容是 JS 在判断是否登录后填充的。

1.3 页脚设计

每个页面都有页脚

页脚样式：

同样 footer 标签只是一个外壳，用来设置背景色，调整位置等。真正的内容在 id 为 footer 的 div 标签中。页脚内容就是简单的三行信息，设置 text-align 为 center 使它们居中显示。设置页脚的内容宽度为 1190px，与导航栏内容、页面内容的宽度保持一致。设置页脚的阴影和导航栏类似，不再赘述。

二、首页

2.1 简略框架

2.2 左右分割

通过 float 将 div 分割成左右两部分

2.3 左侧内容

2.3.1 文章列表

设置 transform: scale(1.05) 当鼠标位于某一文章块上时，该块会放大 1.05 倍，通过 transition: transform .5s ease-in-out 设置这一过程的过渡时间为 0.5s。border-radius 可以设置边框的圆角，值越大，圆角越大。设置box-shadow: 5px 5px 5px gainsboro 使得阴影水平向右，竖直向下偏移，在视觉上可以更好地分隔文章块。

2.3.2 分页

分页样式：

页脚的设计远比想象的要烦的多，首先需要一个 div 外框放置分页所在的行，里面再套一个 div 放置真实的内容。页码放在 ul > li > a 标签中，需要很多设置覆盖默认的样式。尤为重要的一点是：行标签（例如 a、span等）是存在间距的，只有设置其父元素的 font-size 为 0，再设置行标签的 font-size 才能消除间距。例如我的分页打算给 a 标签设置一个左边框，这样可以使每个页码明显的分开，但事实上 a 标签之间默认是存在间距的：

上图中绿色及以内的才是 a 标签的大小，但是可以明显看到距离右边第三个标签的左边框存在一定的距离，这个距离就是默认的行标签的间距。为了消除间距，使每个页码都居中显示，可以设置 ul 或者 li 的 font-size 为 0，再指定 a 的 font-size，效果如下：

2.4 右侧固定栏

为了实现右侧的固定，还需要在里面套一个 div，因为 class 为 right 的 div 宽度已经固定了，而且位置就在内容的右侧，所以设置内 div 再设置固定时只需要指定 top 距离顶部的距离，无需设置左右侧的距离。如果仅固定外层 right 的 div 同时只设置 top，就会出现下面的奇怪布局：

虽然也实现了固定，但由于没有指定左右的距离，导致 left 和 right 都为默认的 auto，整个右边栏会跑到内容块的最左边。

2.4.1 热门文章

都是常规的 CSS 样式，没有什么特殊需要注意的地方

2.4.2 文章标签

标签样式：

随机背景色：

在 JS 中通过 CSS 选择器定位到标签，然后遍历标签数组，为这些标签赋值随机背景色。在 CSS 中使用 !important 可以加强当前样式的权重，覆盖其它样式。这里的样式意思是强制使超链接继承 span 的字体颜色，即黑色，当鼠标放在 span 标签上时，标签的背景色和超链接的字体颜色会一起改变。统一在 span 中设置过渡时间为 0.5s。

三、文章详情页

导航栏和页脚和首页的一样，需要做的是中间的内容部分。一般来说前端通过 Markdown 编辑器编写文章，然后将 Markdown 字符串存储在数据库中。在浏览文章时，后端代码再从数据库中读出 Markdown 字符串，将其转成 HTML 后再返回给前端。所以这里演示的内容也是先写成 Markdown 再转成 HTML 的。例如在 Typora（一个Markdown编辑器）中写好文章后，可以直接导出为 HTML。

3.1 简略框架

3.2 左右分割

由于每个文章的长度未知，所以左侧文章的高度无法确定。再加上子元素设置了 float，导致其脱离了标准文档流，父元素（class 为 detail 的 div）的高度也无法确定。出现的怪象如下：

上图可以看到本该在最下面的页脚到了上面，原因是整个内容部分的高度为0。

可以在 detail 的外层再套一个 div，通过设置其 overflow 属性为 auto 解决此问题，这时最外层的 div 就有了高度可以正好包住文章内容，把页脚挤下去。

此外，这个 “外壳” 还有一个作用，就是可以显示左右侧的阴影了，需要设置外壳的宽度稍微比内容大一点。

3.3 左侧内容

这是由 Markdown 字符串转成的 HTML 代码，除此之外还需要一些特别的样式：

默认的段落标签上下 margin 都为 16，导致文章看起来十分松散，这里直接让 margin-bottom 归零。

3.4 右侧固定文章目录

可以用锚点实现文章目录跳转的功能，即指定超链接为 ”# + 要跳转到的标签的 id“。但是默认的跳转会直接跳到指定标题位置，没有一个过渡的过程，就听突然的。而且跳转后发现导航栏遮挡了一部分内容，以下 CSS 就可以解决这些问题：

剩下的是文章目录的一些简单样式：

定位设置和上文首页中的设置差不多，.catalog 是被包裹在 .right 中的，后者有了确切的位置和宽度，故这里设置固定位置也只需要指定 top。

3.5 返回顶部

这是一个实用性很强的按钮，当浏览了很多内容后仍然一窍不通时，可以点击这个按钮返回文章顶部，再从头看起。

HTML代码就这么点：

这是它的样式：

重点是 visibility 和 opacity 这两个属性，通过下面 JS 代码的配合可以控制按钮的显示：

当载入页面时，visibility 为 hidden，opacity 为 0 表示按钮不显示。当页面垂直滚动的像素数大于 500 时，设置 visibility 为 visible，opacity 为 1 表示显示按钮。加上 CSS 中设置的过渡效果，opacity（透明度） 从 0 到 1 这个效果将会在 0.5s 过渡完成。当垂直滚动的像素数小于 500 时，再将其设置回去，同样带有过渡效果。

四、登录/注册页

4.1 简略框架

4.2 页面和样式

登录和注册页面都差不多

两个页面用的是一个 CSS 文件

需要注意的是因为中间的内容不够多，准确说是不够高，导致页脚并不是在页面的最下面：

因此还需要固定一下页脚：

在设置好宽度后，可以只指定底部的距离。

4.3 登录与退出登录

想要实现这个功能一般需要后端代码和数据库的支持，纯前端可以在 JS 中可以使用 Web Storage 技术模拟这一实现。基本思路就是用 JS 判断账号密码，正确无误后往 localStorage 中写入数据，直接跳转主页。加在页面时判断是否登录来显示不同的页面。退出登录时删除 localStorage 中的数据并刷新页面。

下图是点击登录按钮后发生的操作：

这是加在页面时发生的操作：

关于这部分由 JS 添加的 HTML 代码，CSS 中已经先有了它们的相关样式：

下面是一个可有可无的功能，只是在模仿后端的工作：

如果用户已经登录，再访问 login 页面时就会弹出警告框，返回首页。