Websites tagging从0到0.1
前言：一直对网页制作感兴趣。每天都和各种各样的网页打交道，一些设计得好的网页既能传播内容，也给人美的体验。从我开始学习网页制作以后，我移除了所有block广告的插件，毕竟做网站真的不容易。一个性能优良又美观的网站承载了开发者太多的心血，现在看到广告都觉得是应该的。本文是我的学习笔记，懒得配图，请读者（如果有的话）自行脑补，才疏学浅，本文内容如标题所示就是简单的HTML+CSS。
2020/08/31
最近又开始学习做网页。第一个练习是“假装做个个人网站”。在bootstrap模板里看到一个还不错的页面，后来我明白这样的页面一般被称为仪表盘，（链接），晚上回到家就开始动手，对着flex布局教程把一个个box码齐，问题是好像没啥内容可放的，我只好把它做得像简历。
网页分为三大行。第一行包括左边的简介和右边的教育经历+技能。对教育和技能两个box一开始采用column排列，但最接近我想要的样式的主轴上space-between排列还是会造成中间一条大缝隙，然后改为了row排列，限制父容器的大小来强迫wrap，这样两个box在竖直方向上stretch，中间的空隙就是box的margin-bottom。给box加上边框后看起来更整齐了。
第二行包括经历和一个暂时留白的box。第三行左边放了几个课程项目文章链接，右边是我忽然想到的用gallery的形式放一些喜欢的东西，图片统一做成边长240px的方形，然后发现还是太大了，就将边长设为80px，加入hover放大的效果，这样gallery盒子最好设置最小宽高，宽（10+1）边长，高（1+1）边长。
关于flex布局，我想多扯两句。一开始在教程上学的都是float，好像是在inspect某个网站的时候注意到了flex就查了一下，然后发现了新大陆。个人感觉flex比float形象得多，由于对float的理解有限，我后来基本都用flex，准备抽空再学习grid。
后来的五一假期，我试了grid，感觉适合用来做网页整体的大列布局，相比之下flex更灵活，可以用来安排小盒子。
09/01
昨天设置好首页以后，今天练习文章页的排版，首先一个标题，下面就只有导航和文章两部分。我就是很喜欢固定的导航栏，所以它毫无疑问的position: fixed（后面改用sticky了）。文章主要包含文字，图片和代码。我有一篇现成的社交网络分析的课程项目文章，以它为例写html和css就很方便。
我用一个div包图片和图题，大部分图片如果宽100%就嫌大，一般图片我只给70%的宽度，开一个large-img的类给小部分图片,再用一个flex的div来包多个子图。
后来发现图片和图题可以用HTML5里的语义标签figure和figcaption实现。
到别的网页上看了看代码高亮的写法，我也整了个hljs。
09/05
昨天忽然寻思首页怎么能没中文版呢，回家就做了一个，那个留白的框就放一些相关链接、友情链接吧，第一个链接就是切换语言。
今天觉得首页简洁，但不够好看。先加个背景图看看，第一次随便用了在楼顶拍的傍晚图，图中包括了街道车流，把row改成80%透明，结果就是非常奇怪；第二张用了格子底纹好像；我还尝试了渐变背景色……反正最后还是没有的好。
对首页做了一些小改动，英文页面切换中文的链接文字改成了中文，这样才实用。
09/06
字体
今晚打算换字体，越来越觉得不同字体带来的体验差很远。chrome的渲染比firefox和edge明显更细更灰（所以出现了Font Rendering Enhancer插件）；此外宋体的渲染效果貌似也不好，容易发虚。
先查了查著名的思源黑体，然后搜出了思源宋体，这款衬线够黑够清晰我爱了。官网文件巨大，还只有otf格式，后来发现Google fonts里的Noto Serif是同款可以链接引用。代码字体就懒得另外找了，就Consolas吧。至于英文字体，我在Adobe字体网页上逛了一圈，然后感觉它网站用的字体是坠吼看的，果断inspect一番，叫Adobe Clean，无奈这是Adobe内部字体（说明） ，我还是继续在开源字体的海洋里遨游吧，Adobe牛逼！另附（微软字体使用说明） 。
又要开始废话了，“思源”真是个好名字，我要对字体设计者心存感激，重视字体版权，使用正版字体！
测试字体的时候我在sans字体后加",serif"，如果指定无衬线字体设置失败则显示的字体就是衬线字体，这样在f,c,e三个默认字体不同的浏览器上测试也不会傻傻分不清了，测试serif字体同理加上",sans-serif"。字体的系统适配我直接参考了（这篇）的写法。
在菜鸟教程上看字体写法的时候我瞅到旁边的响应式设计，于是顺便看了一下，对文章页做了改动，对nav, article两部分的宽度和左右margin都用百分比来写。
09/09
夜间模式
昨天打算给有文章的页面加夜间模式，于是这两天看了些js和jQuery的基础语法，写法我就直接参考 （这里） 。方法是给body加上或删去class="dark"，回家的路上我看着天空打算用太阳和月亮作切换按钮，固定在左上角，我好像对fixed情有独钟哈哈。发现个问题，在chrome上点击过按钮后就会留下边框，好吃藕啊，f和e上都没有，对chrome的坏感又增加了。
11/02
据上篇将近两个月的时间，这段时间里与搭建系官网的团队进行对接并参与设计，自己业余也在“假装做一个系官网”，此外断断续续的对“假个人网站”的页面进行了许多小修改。将想法用代码表达还是比较直接简单，用文字来表达就是千头万绪不知从何说起，所以我很久没写笔记。下面开始语无伦次：
毛玻璃
系官网顶部设置了固定导航栏，想做成毛玻璃效果，方法是设置一个比较前卫的css属性backdrop-filter，（参考文章）。
吸顶导航栏
导航栏上方还有放logo和友情链接的部分，想实现的效果是向下滚动到导航栏触顶的时候将导航栏设为固定，需要监测滚动距离，（参考文章）。由于导航栏变成fixed的时候会脱离文档流，为避免下方的内容嗖地向上移动，还需同时给body添加一个导航栏高度的padding-top。
后来发现用position: sticky就可以实现。
响应式设计
不同于一个自娱自乐的网站，一个正常的网站会在不同设备中被访问，我这看着可以，换个系统换个屏幕可能就一言难尽（比如这个禁默认css还懒得适配手机的博客）。正在施工。。。
关于页面内容宽度的思考
一直不喜欢最大化窗口，喜欢把应用尺寸调成更接近方形。后来发现应该是屏幕比例的原因，16:9的屏幕，再除去任务栏和应用标题栏，留给内容的区域就越发狭长。大概黄金比例真的不是心理作用。注意到这个问题后，我有意识地减少宽度增加高度，比如把任务栏移到左边。许多网页设置固定的顶部菜单，这为访客的浏览提供了便利，但也减少了网页剩余内容的高度，让访客不得不进行更多的滚动；另一方面，太宽的内容也会影响观感，最好是在水平方向上设置二或三部分的内容；基于这两个原因，我简单的觉得应该设置靠左的导航栏。
接上面内容宽度的讨论。首页计划了两个方案，一个是一排新闻（4个），一排公告+讲座，另一个是左边上下为新闻（3个）和公告，右边竖着为讲座。征求意见发现第二个方案备受青睐。个人认为原因在于方案一新闻部分过宽造成一定的视觉疲劳，将屏幕划分为左右部分后每部分的宽度都不会太长，阅读流畅度得到提升。
基于以上想法，一开始我给文章规定了960px的宽度，以1920屏幕为例，缩放比例125%的情况下上占屏幕的62.5%，在缩放比例150%的情况下占75%，个人觉得这样文章看起来还不错。但考虑到以后屏幕都朝2k甚至4k发展，文章宽度单位还是改成了vw，那就61.8vw吧。
我觉得之设计的作用
相对于一份质朴的HTML，样式表的加入不仅增加了美观，也增强了内容传达效果和交互体验。给链接增加一个简单的hover效果就能起到比改变cursor更强的提示作用。在颜色方面，背景颜色可以用来划分区域，在标题等处用高饱和高亮度的颜色更吸睛（前阵子支付宝和Tim的logo和界面都变得更蓝更亮了），渐变色的进度条比纯色更多了几分动感（也多了几分土味），选用一个主题色能体现整体性并突出特色，等等。
参考了几份规范对原来的代码进行修改，包括加入start和end注释，HTML中使用语义化标签，CSS中很多后代选择器改成了子元素选择器。
11/07
博客园装修
两天前申请了博客园的博客，这两天内一有空就在保存CSS和查看随笔的两个按钮间反复横跳。
正在施工。。。
附录
浙公网安备 33010602011771号