004 - 一只特立独行的猪
本帖最后由 不二如是 于 2021-6-4 16:51 编辑上一集：003 - 从一段鬼畜的密文说起
在线视频：
https://www.bilibili.com/video/BV1QW411N762?p=5
课程思维导图
猛戳超清
1、致敬王小波
王小波年轻时在云南农场作过知青，插过队，做过工人、老师、程序员。
很丰富的人生经历，否则写不出振聋发聩的文章，经历是最好的素材～
在上面那些身份中，简单说一下“程序员”标签。
中国第一代程序员，win32SDK的GUI开发大师（据说自己编软件写《黄金时代》）
有网友整理了王小波和朋友的书信，将涉及到编程的信息汇集成了一个网站，有兴趣的鱼油自行看之：传送门
借助他《一只特立独行的猪》，开启我们本讲的学习～
这篇文章以幽默诙谐之笔描绘出一只特立独行的又黑又瘦的猪，热爱自由、放浪不羁，好不潇洒～
2、尬出天际的默认网页布局
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>零基础入门学习Web开发(HTML5 & CSS3)</title>
</head>
<body>
<h1>一只特立独行的猪</h1>
<h2>王小波</h2>
<p>插队的时候，我喂过猪、也放过牛。假如没有人来管，这两种动物也完全知道该怎样生活。它们会自由自在地闲逛，饥则食渴则饮，春天来临时还要谈谈爱情；这样一来，它们的生活层次很低，完全乏善可陈。人来了以后，给它们的生活做出了安排：每一头牛和每一口猪的生活都有了主题。就它们中的大多数而言，这种生活主题是很悲惨的：前者的主题是干活，后者的主题是长肉。我不认为这有什么可抱怨的，因为我当时的生活也不见得丰富了多少，除了八个样板戏，也没有什么消遣。有极少数的猪和牛，它们的生活另有安排。以猪为例，种猪和母猪除了吃，还有别的事可干。就我所见，它们对这些安排也不大喜欢。种猪的任务是交配，换言之，我们的政策准许它当个花花公子。但是疲惫的种猪往往摆出一种肉猪（肉猪是阉过的）才有的正人君子架势，死活不肯跳到母猪背上去。母猪的任务是生崽儿，但有些母猪却要把猪崽儿吃掉。总的来说，人的安排使猪痛苦不堪。但它们还是接受了：猪总是猪啊。
</p>
<p>对生活做种种设置是人特有的品性。不光是设置动物，也设置自己。我们知道，在古希腊有个斯巴达，那里的生活被设置得了无生趣，其目的就是要使男人成为亡命战士，使女人成为生育机器，前者像些斗鸡，后者像些母猪。这两类动物是很特别的，但我以为，它们肯定不喜欢自己的生活。但不喜欢又能怎么样？人也好，动物也罢，都很难改变自己的命运。
</p>
<p>以下谈到的一只猪有些与众不同。我喂猪时，它已经有四五岁了，从名分上说，它是肉猪，但长得又黑又瘦，两眼炯炯有光。这家伙像山羊一样敏捷，一米高的猪栏一跳就过；它还能跳上猪圈的房顶，这一点又像是猫——所以它总是到处游逛，根本就不在圈里呆着。所有喂过猪的知青都把它当宠儿来对待，它也是我的宠儿——因为它只对知青好，容许他们走到三米之内，要是别的人，它早就跑了。它是公的，原本该劁掉。不过你去试试看，哪怕你把劁猪刀藏在身后，它也能嗅出来，朝你瞪大眼睛，噢噢地吼起来。我总是用细米糠熬的粥喂它，等它吃够了以后，才把糠对到野草里喂别的猪。其他猪看了嫉妒，一起嚷起来。这时候整个猪场一片鬼哭狼嚎，但我和它都不在乎。吃饱了以后，它就跳上房顶去晒太阳，或者模仿各种声音。它会学汽车响、拖拉机响，学得都很像；有时整天不见踪影，我估计它到附近的村寨里找母猪去了。我们这里也有母猪，都关在圈里，被过度的生育搞得走了形，又脏又臭，它对它们不感兴趣；村寨里的母猪好看一些。它有很多精彩的事迹，但我喂猪的时间短，知道得有限，索性就不写了。总而言之，所有喂过猪的知青都喜欢它，喜欢它特立独行的派头儿，还说它活得潇洒。但老乡们就不这么浪漫，他们说，这猪不正经。领导则痛恨它，这一点以后还要谈到。我对它则不止是喜欢——我尊敬它，常常不顾自己虚长十几岁这一现实，把它叫做“猪兄”。如前所述，这位猪兄会模仿各种声音。我想它也学过人说话，但没有学会——假如学会了，我们就可以做倾心之谈。但这不能怪它。人和猪的音色差得太远了。
</p>
<p>后来，猪兄学会了汽笛叫，这个本领给它招来了麻烦。我们那里有座糖厂，中午要鸣一次汽笛，让工人换班。我们队下地干活时，听见这次汽笛响就收工回来。我的猪兄每天上午十点钟总要跳到房上学汽笛，地里的人听见它叫就回来——这可比糖厂鸣笛早了一个半小时。坦白地说，这不能全怪猪兄，它毕竟不是锅炉，叫起来和汽笛还有些区别，但老乡们却硬说听不出来。领导上因此开了一个会，把它定成了破坏春耕的坏分子，要对它采取专政手段——会议的精神我已经知道了，但我不为它担忧——因为假如专政是指绳索和杀猪刀的话，那是一点门都没有的。以前的领导也不是没试过，一百人也治不住它。狗也没用：猪兄跑起来像颗鱼雷，能把狗撞出一丈开外。谁知这回是动了真格的，指导员带了二十几个人，手拿五四式手枪；副指导员带了十几人，手持看青的火枪，分两路在猪场外的空地上兜捕它。这就使我陷入了内心的矛盾：按我和它的交情，我该舞起两把杀猪刀冲出去，和它并肩战斗，但我又觉得这样做太过惊世骇俗——它毕竟是只猪啊；还有一个理由，我不敢对抗领导，我怀疑这才是问题之所在。总之，我在一边看着。猪兄的镇定使我佩服之极：它很冷静地躲在手枪和火枪的连线之内，任凭人喊狗咬，不离那条线。这样，拿手枪的人开火就会把拿火枪的打死，反之亦然；两头同时开火，两头都会被打死。至于它，因为目标小，多半没事。就这样连兜了几个圈子，它找到了一个空子，一头撞出去了；跑得潇洒之极。以后我在甘蔗地里还见过它一次，它长出了獠牙，还认识我，但已不容我走近了。这种冷淡使我痛心，但我也赞成它对心怀叵测的人保持距离。
</p>
<p>我已经四十岁了，除了这只猪，还没见过谁敢于如此无视对生活的设置。相反，我倒见过很多想要设置别人生活的人，还有对被设置的生活安之若素的人。因为这个原故，我一直怀念这只特立独行的猪。
</p>
<img src="img/uniPig.png">
</body>
</html>
丑不丑，接下来是小甲鱼老师妙手回春的时刻{:10_297:}
3、style的婀娜多姿
课程图片素材：
<style>的速查宝典：传送门。
（要想web学好，必须收藏此宝典）
有言在先：
接下来课程中涉及到的CSS样式规则，全部拿来用，不用在意Why，紧紧抓住重点style的玩法。
3.1、初尝style
记住：
style就是用来设置页面元素样式（颜色、大小、布局），常常放在head标签中（任何地方都可以，综合各方面考虑，99%放在head中）。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（HTML5+CSS3）</title>
<style>
h1{
color: red;
}
p{
color: blue;
}
a{
color: yellow;
background: black;
}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A Paragraph</p>
<a href="http://bbs.fishc.com" target="_blank">快点开，里面有好东西!</a>
</body>
</html>
★3.2、使用style改变样式
怎样在一个网页中插入一张图片？
如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效
(无法浏览链接文件，或无法显示插入的图片等)。
static/image/hrline/2.gif
为了避免这些错误，正确地引用文件，我们需要学习一下HTML路径。
在HTML中分为：相对路径(Relative Path)和绝对路径(Absolute Path)两种调用方式。
同目录文件引用
"."——代表目前所在的目录。
我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。
假设index.html路径是：
c:\Inetpub\fishc\sites\blabla\index.html
html文件作为超链接：
<a href = "./index.html">index.html</a>
其实，可以省略"./"直接引用：
<a href = "index.html">index.html</a>
表示上级目录
表示源文件所在目录的上一级目录：
../
表示源文件所在目录的上上级目录：
../../
以此类推。
表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
static/image/hrline/2.gif
课程中，小甲鱼老师将图片放在：
网页文件放在了：
index.html放在test3的文件下，test3和img同级。
所有从index.html出发算起，上一级（../）便可以找到img文件夹。
所有调用时写：
../img/bc.png"
在最上面原始页面head中添加style：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>零基础入门学习Web开发(HTML5 & CSS3)</title>
<style>
body{
background-image: url("../img/bc.png");
}
</style>
</head>
<body>
...
</body>
</html>
继续在style中（下面同理）设置h1标题居中，并修改颜色：
h1{
text-align: center;
color: white;
}
设置h2标题，左外边距移动：
h2{
margin-left: 60%;
color: white;
}
设置p文本元素，字体大小，首行缩进，行高：
p{
font-size: 16px;
text-indent: 32px;
color: white;
}
再把img标签（小猪）居中：
img{
position: absolute;
left: 50%;
margin-left: -181px;
}
记住：
上面的代码只需要模仿，不需要知道why
最终代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>零基础入门学习Web开发(HTML5 & CSS3)</title>
<style>
body{
background-image: url("../img/bc.png");
}
h1{
text-align: center;
color: white;
}
h2{
margin-left: 60%;
color: white;
}
p{
font-size: 16px;
text-indent: 32px;
color: white;
}
img{
position: absolute;
left: 50%;
margin-left: -181px;
}
</style>
</head>
<body>
...
</body>
</html>
3.3 style的media属性
在style的宝典中，我们可以看到：
支持好多设备有木有，在这些设备中，最常用的就是“print”。
毕竟打印成本，直接关乎公司的运营成本～
玩法都一样，学会了其中一种，其他的留给鱼油自行尝试
（没有设备的看看就好了，知道如何使用标签的属性值更重要哦{:10_254:} ）
看一下浏览器的默认打印（Chrome）功能：
默认没有背景图打印（浪费啦），自己勾选即可，其他浏览器同理。
注意：
如果电脑没连接打印机，3.3小结了解即可～
默认的打印效果，字体很浅（节约），在head中添加打印独有样式的style(和上一个style平行)：
<style media="print">
h1{
color: black;
}
h2{
color: black;
}
p{
color: black;
}
</style>
打印效果：
一下就清楚了，有木有？
再来学习两个好玩的style属性：
通过使用运算符（与、或、非）可以将特性（最大，最小,...）组合使用。
例如我们希望：
让网页在浏览器在宽度为512px（最小宽度）到1024px（最大宽度）时，显示另一个样式。
就可以在head中再写一个style：
<style media="screen and (min-width:512px) and (max-width:1024px)">
</style>
筛选条件有了，现在添加要变化的样式，换个背景图，在style中添加：
body{
background-image: url("../img/bc2.png");
}
缩小浏览器宽度（大于512px且小于1024px）会看到：
通过上面media属性的适配，就可以动态设置网页在不同终端上的样式了～
最终代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>零基础入门学习Web开发(HTML5 & CSS3)</title>
<style>
body{
background-image: url("../img/bc.png");
}
h1{
text-align: center;
color: white;
}
h2{
margin-left: 60%;
color: white;
}
p{
font-size: 16px;
text-indent: 32px;
color: white;
}
img{
position: absolute;
left: 50%;
margin-left: -181px;
}
</style>
<style media="print">
h1{
color: black;
}
h2{
color: black;
}
p{
color: black;
}
</style>
<style media="screen and (min-width:512px) and (max-width:1024px)">
body{
background-image: url("../img/bc2.png");
}
</style>
</head>
<body>
<h1>一只特立独行的猪</h1>
<h2>王小波</h2>
<p>插队的时候，我喂过猪、也放过牛。假如没有人来管，这两种动物也完全知道该怎样生活。它们会自由自在地闲逛，饥则食渴则饮，春天来临时还要谈谈爱情；这样一来，它们的生活层次很低，完全乏善可陈。人来了以后，给它们的生活做出了安排：每一头牛和每一口猪的生活都有了主题。就它们中的大多数而言，这种生活主题是很悲惨的：前者的主题是干活，后者的主题是长肉。我不认为这有什么可抱怨的，因为我当时的生活也不见得丰富了多少，除了八个样板戏，也没有什么消遣。有极少数的猪和牛，它们的生活另有安排。以猪为例，种猪和母猪除了吃，还有别的事可干。就我所见，它们对这些安排也不大喜欢。种猪的任务是交配，换言之，我们的政策准许它当个花花公子。但是疲惫的种猪往往摆出一种肉猪（肉猪是阉过的）才有的正人君子架势，死活不肯跳到母猪背上去。母猪的任务是生崽儿，但有些母猪却要把猪崽儿吃掉。总的来说，人的安排使猪痛苦不堪。但它们还是接受了：猪总是猪啊。
</p>
<p>对生活做种种设置是人特有的品性。不光是设置动物，也设置自己。我们知道，在古希腊有个斯巴达，那里的生活被设置得了无生趣，其目的就是要使男人成为亡命战士，使女人成为生育机器，前者像些斗鸡，后者像些母猪。这两类动物是很特别的，但我以为，它们肯定不喜欢自己的生活。但不喜欢又能怎么样？人也好，动物也罢，都很难改变自己的命运。
</p>
<p>以下谈到的一只猪有些与众不同。我喂猪时，它已经有四五岁了，从名分上说，它是肉猪，但长得又黑又瘦，两眼炯炯有光。这家伙像山羊一样敏捷，一米高的猪栏一跳就过；它还能跳上猪圈的房顶，这一点又像是猫——所以它总是到处游逛，根本就不在圈里呆着。所有喂过猪的知青都把它当宠儿来对待，它也是我的宠儿——因为它只对知青好，容许他们走到三米之内，要是别的人，它早就跑了。它是公的，原本该劁掉。不过你去试试看，哪怕你把劁猪刀藏在身后，它也能嗅出来，朝你瞪大眼睛，噢噢地吼起来。我总是用细米糠熬的粥喂它，等它吃够了以后，才把糠对到野草里喂别的猪。其他猪看了嫉妒，一起嚷起来。这时候整个猪场一片鬼哭狼嚎，但我和它都不在乎。吃饱了以后，它就跳上房顶去晒太阳，或者模仿各种声音。它会学汽车响、拖拉机响，学得都很像；有时整天不见踪影，我估计它到附近的村寨里找母猪去了。我们这里也有母猪，都关在圈里，被过度的生育搞得走了形，又脏又臭，它对它们不感兴趣；村寨里的母猪好看一些。它有很多精彩的事迹，但我喂猪的时间短，知道得有限，索性就不写了。总而言之，所有喂过猪的知青都喜欢它，喜欢它特立独行的派头儿，还说它活得潇洒。但老乡们就不这么浪漫，他们说，这猪不正经。领导则痛恨它，这一点以后还要谈到。我对它则不止是喜欢——我尊敬它，常常不顾自己虚长十几岁这一现实，把它叫做“猪兄”。如前所述，这位猪兄会模仿各种声音。我想它也学过人说话，但没有学会——假如学会了，我们就可以做倾心之谈。但这不能怪它。人和猪的音色差得太远了。
</p>
<p>后来，猪兄学会了汽笛叫，这个本领给它招来了麻烦。我们那里有座糖厂，中午要鸣一次汽笛，让工人换班。我们队下地干活时，听见这次汽笛响就收工回来。我的猪兄每天上午十点钟总要跳到房上学汽笛，地里的人听见它叫就回来——这可比糖厂鸣笛早了一个半小时。坦白地说，这不能全怪猪兄，它毕竟不是锅炉，叫起来和汽笛还有些区别，但老乡们却硬说听不出来。领导上因此开了一个会，把它定成了破坏春耕的坏分子，要对它采取专政手段——会议的精神我已经知道了，但我不为它担忧——因为假如专政是指绳索和杀猪刀的话，那是一点门都没有的。以前的领导也不是没试过，一百人也治不住它。狗也没用：猪兄跑起来像颗鱼雷，能把狗撞出一丈开外。谁知这回是动了真格的，指导员带了二十几个人，手拿五四式手枪；副指导员带了十几人，手持看青的火枪，分两路在猪场外的空地上兜捕它。这就使我陷入了内心的矛盾：按我和它的交情，我该舞起两把杀猪刀冲出去，和它并肩战斗，但我又觉得这样做太过惊世骇俗——它毕竟是只猪啊；还有一个理由，我不敢对抗领导，我怀疑这才是问题之所在。总之，我在一边看着。猪兄的镇定使我佩服之极：它很冷静地躲在手枪和火枪的连线之内，任凭人喊狗咬，不离那条线。这样，拿手枪的人开火就会把拿火枪的打死，反之亦然；两头同时开火，两头都会被打死。至于它，因为目标小，多半没事。就这样连兜了几个圈子，它找到了一个空子，一头撞出去了；跑得潇洒之极。以后我在甘蔗地里还见过它一次，它长出了獠牙，还认识我，但已不容我走近了。这种冷淡使我痛心，但我也赞成它对心怀叵测的人保持距离。
</p>
<p>我已经四十岁了，除了这只猪，还没见过谁敢于如此无视对生活的设置。相反，我倒见过很多想要设置别人生活的人，还有对被设置的生活安之若素的人。因为这个原故，我一直怀念这只特立独行的猪。
</p>
<img src="img/uniPig.png">
</body>
</html>
彩蛋
发现哪里不对劲了吗？{:10_307:}
仔细想想其实：
**** Hidden Message *****
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：005 - 相濡以沫不如相见于江湖
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
我喜欢这只猪{:10_256:} 学WEB，得永生 看一下哦 这篇好长啊，视频不得爆炸 小粉猪挺好看的 到css了，是制作撩妹网页的时候了吧 求片尾bgm 楼主厉害 好 我想看看 所以说，课后作业的传送门在哪里？？{:10_277:} 看看 传送门失灵了= = 1
图像那里？
看看这是啥 支持一下 想学习web后端 感谢楼主