Jorux Notebook

12年，刚好一个干支轮回。 虽已不再从事web design相关工作，但是最近开始开发一款医疗相关APP，再次与web design发生交集。 本网站由于长期未能更新，主题仍然停留在wordpress2.0阶段，虽靠残存的记忆重写了部分css，仍然不能完美的继承原设计，甚是遗憾。 记录开发过程遇到的问题和解决思路。也算是一种纪念吧。 1.MySQL数据库迁移造成的乱码处理方法。 由于不良空间服务商擅自更新后台版本，造成MySQL数据文件被latin1编码改写，诸如此类方法,是无效的。 颇费周折之后找到以下方法，希望能帮到需要的人。 由于原始数据并没有变化，需要通过Mysql命令行将已经乱码的数据转写为Blob(二进制数据): ALTER TABLE `tableNAME` CHANGE `columnNAME` `columnNAME` blob 然后再转写为utf8格式: ALTER TABLE `tableNAME` CHANGE `columnNAME` `columnNAME` VARCHAR(2000) CHARACTER SET utf8 转换完成后可以在phpMyAdmin中将默认的排序规则“latin1_swedish_ci”更改为“utf8_general_ci” 或者参考先前的链接在命令行中执行。 2.Nginx反向代理wordpress时遇到的问题 服务器迁至AWS后，涉及到单一主机ip部署多个应用问题。 方法参考了这篇(单IP多站点反向代理配置)的部署方法。 部署nodejs应用和thinkphp应用都没有问题。但是在代理第三个wordpress网站时出现了主页无法显示的BUG。 参考了以下两篇文章： https://blog.csdn.net/wshk918/article/details/108047551 https://www.taijicoder.com/2018/04/21/deploy-wordpress-behind-reverse-proxy/ 问题出在wordpress没有原生支持反向代理. 需要在wp-config.php中加入 if ( ! empty( $_SERVER[‘HTTP_X_FORWARDED_HOST’] ) ) { $_SERVER[‘HTTP_HOST’] = $_SERVER[‘HTTP_X_FORWARDED_HOST’]; } Nginx Reverse Proxy 配置加入，并重启服务 […]

Semantics可翻译为语义的(学)，它是Html/Xhtml是否真正符合标准的重要一环。Jorux在这和大家讨论一些自己的观点，如有不妥之处，还请各位网友指正。在西方，为什么这么多人如此重视网页的Semantics，也许你会说，西方比较守规矩，重视标准，但我想说的是，在这些表象的背后有着“一只无形的手”控制着。
在此，举个导航条的例子来说明我的观点。

引号(quote mark)顾名思义是用于引起人注意, 区别于一般内容之用的标点符号。分为上引号和下引号，并且是成对出现的，这种概念我们可能在小学就知道了，所以引号应该是成对出现的。
但是在现在网页设计中，由于某些原因，我们经常忽略这种基本概念，一些权威网站在使用引号时往往只使用上引号图标，导致大家觉得在技术上很难实现引号图标的成对。

上篇讲的布局(切割)方法相信大家己经掌握，其特点是用固定宽度(fixed-width)来实现页面内各个元素的显示效果，简单实用，易于掌握。本篇将讲述其他相对高级的布局方法。
布局的分类,根据对元素宽度的定义不同，布局可分为以下几种：

从本篇开始讲述如何用css实现网页的布局，即如何用css控制网页内各个元素的显示位置。
如果你是一个初学者，很可能觉得做一个网页的第一步就是布局。其实不然，css网页的设计过程可以参考分为以下几步：

本文作为属性篇的最后一篇文章, 将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.

注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念.

本篇主要介绍css对边框(border)的属性控制和链接(link)的伪类选择器.
边框(border): css控制的边框属性包括border-width, border-color, border-style.
Border之所以让人很困惑主要源于IE5错综复杂的BUG, 由于IE5是一个”will soon be dead“ 的浏览器, 这里只例举一个最为知名的关于border-width的BUG, 让大家更好的理解border的含义, 先看下图:

上次主要说明了css对于颜色和文本属性的控制, 这次介绍css对于字体, 背景等属性的控制.
字体(Font):css控制的字体属性包括font-family, font-style, font-variant, font-weight, font-size.
1.font-family: 由字体名(family-names)和字组名(generic families)两个部分组成.首先来看个实例,例:查看Jorux.com首页的css文件,可以看到以下代码:

本教程主要介绍css的基础知识,将逐个讲解css的各个属性,过程可能比较枯燥,但会尽力多举例说明.
css语法:例:用Web Developer的css查看功能查看Jorux.com首页的css文件,可以看到以下代码:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
是不是有点复杂,现在我们没有必要细究以上代码,先简化以上代码为:
body {text-align:left;}
这便是基本css语法结构:

我想把本篇作为css基础教程的序曲，从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分，单独发表，其间可能会插入几篇与教程无关的文章。没有具体的教程发表进度,推荐关注本教程的朋友订阅本站Feed。教程内容的 30%-50%为Jorux原创，其余翻译部分均为意译,可能来源于多个国外站点，并在教程结束时公布参考原文地址。
曾翻译过一篇css教程:十步学会用css建站，文章声称能在十步学会建站，虽说夸张点，但确实能学到一些东西，就像现代社会流行速成一样，它只是一个css快餐，要达到自由运用css，没个百八十步恐怕有点悬。