站点头像

Erythritol's World

我们曾生活在这世界上,但谁记得呢?

原创静态博客的一些设计思路

2021年5月9日 由 Erythritol

目前大多数用户使用的是较新的谷歌、火狐等浏览器,旧版IE用户已经非常少,所以最好使用HTML5/CSS3标准,以便支持一些新样式并提升渲染速度。首先需在代码第一行添加HTML5声明:

<!DOCTYPE html>

头部中,首先添加charset(页面编码)元信息,避免乱码:

<meta charset="utf-8">

本博客进行了移动端适配,移动端界面结构和PC端一致,只是进行了缩放,所以需要加viewport(视口)元信息,这样可以避免移动端出现横向滚动条:

<meta name="viewport" content="initial-scale=1">

description(网站描述)元信息有利于搜索引擎了解网站内容,长度大约70字:

<meta name="description" content="一个旨在研究前端开发、记录日常感受、分享技术经验、讲解网络知识的博客,在这里走进编程与互联网的殿堂,探访一名中学生的内心世界,分享生活中的点滴快乐。">

某些不需要搜索引擎收录的页面(如404页面)可添加robots(自动程序)元信息,拒绝爬虫索引和跟踪:

<meta name="robots" content="none">

本博客的CSS从外部引入,分全局CSS(所有页面均用到的CSS)和局部CSS(针对特定页面使用的CSS)两类:

<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/css/index.css">

头部的末尾处使用link标签从外部加载网站图标。本站不兼容IE浏览器,所以rel属性值填icon即可:

<link rel="icon" href="/img/favicon.png">

本博客使用单栏式布局,整体为居中对齐,页面从上到下分别为页头、导航栏、主体三部分,分别使用HTML5的header、nav、main标签,省去了分配CSS类的麻烦。

为PC端设置最大界面宽度,并通过外边距居中显示:

body {
	max-width: 900px;
	margin: 0 auto;
}

将body标签下属的第一级元素左右外边距都设置为50像素,使移动端页面两侧留有一定空白,更美观:

header {
	margin: 10px 50px;
}
main {
	margin: 15px 50px;
}

首页的时间线是一个article标签,其中存在多组time标签(时间标记)和div标签(事件标记):

<article>
	<time>2021年8月5日</time>
	<div>启用HTML和CSS源代码压缩,减小文件体积</div>
</article>

结合元素选择器、子元素选择器和后代选择器设置时间线样式,使用list-item在时间标记左侧添加圆点:

article>div {
	margin: 5px 0 10px;
}
article a {
	color: #a08;
}
time {
	display: list-item;
}

友情链接页中,每个网站使用一个section标签,其中包含网站名、链接三级标题和小字体网站介绍:

<section>
	<a href="https://www.puresys.net/" target="_blank" rel="noopener"><h3>Puresys</h3></a>
	<p>纯净系统 软件下载</p>
</section>

友情链接页的主体部分为弹性盒子布局,应居中显示弹性盒子并允许换行:

article {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

文章内容页的发布时间与作者标记在整个页面中是唯一的,应使用ID选择器而非效率较低的类选择器:

<div id="intro">2021年1月28日 由 Erythritol</div>

为此ID定义样式,使用相对大小值代替绝对大小值设置其字体大小:

#intro {
	font-size: small;
}

自定义文章里strong(粗体)标签的颜色,突出强调相应文本并使页面效果更加多彩:

strong {
	color: #d10;
}

文章中的链接通过a标签实现,需添加target属性以在新页面打开,外部链接均应使用noopener以保证安全:

<a href="//wpa.qq.com/msgrd?uin=2195794117" target="_blank" rel="noopener">

代码块通过pre标签实现,可以保留代码的制表符。需要设置制表符宽度、行高、强制换行等:

pre {
	line-height: 150%;
	white-space: pre-wrap;
	tab-size: 4;
}