004 - 一只特立独行的猪

不二如是 · 发表于 2018-3-31 15:04:59

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-6-4 16:51 编辑

上一集：003 - 从一段鬼畜的密文说起

在线视频：

课程思维导图

猛戳

超清

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>

复制代码

丑不丑，接下来是小甲鱼老师妙手回春的时刻

3、style的婀娜多姿

课程图片素材：

img.zip (1.39 MB, 下载次数: 145, 售价: 5 鱼币)

<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改变样式

怎样在一个网页中插入一张图片？

如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效
(无法浏览链接文件，或无法显示插入的图片等)。

登录/注册后可看大图

为了避免这些错误，正确地引用文件，我们需要学习一下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>

复制代码

表示上级目录

表示源文件所在目录的上一级目录：

../

复制代码

../../

复制代码

以此类推。

表示下级目录

引用下级目录的文件，直接写下级目录文件的路径即可。

登录/注册后可看大图

课程中，小甲鱼老师将图片放在：

网页文件放在了：

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”。

毕竟打印成本，直接关乎公司的运营成本～

玩法都一样，学会了其中一种，其他的留给鱼油自行尝试
（没有设备的看看就好了，知道如何使用标签的属性值更重要哦

）

看一下浏览器的默认打印（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>

复制代码

彩蛋

发现哪里不对劲了吗？

仔细想想其实：

游客，如果您要查看本帖隐藏内容请回复

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：005 - 相濡以沫不如相见于江湖

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

alltolove · 发表于 2018-3-31 16:53:02

我喜欢这只猪

隨鈊乄鎍慾 · 发表于 2018-3-31 21:39:05

学WEB，得永生

chmmoon · 发表于 2018-4-1 09:29:04

看一下哦

py阿碗 · 发表于 2018-4-1 11:06:05

这篇好长啊，视频不得爆炸

luokaoge · 发表于 2018-4-2 21:21:20

小粉猪挺好看的

lz575757 · 发表于 2018-4-2 21:38:04

到css了，是制作撩妹网页的时候了吧

minicooer · 发表于 2018-4-2 22:40:17

求片尾bgm

非官方认证 · 发表于 2018-4-3 08:27:06

楼主厉害

cool_boy · 发表于 2018-4-5 16:12:04

不多太少 · 发表于 2018-4-12 18:52:02

我想看看

yibasoya · 发表于 2018-4-13 11:39:22

所以说，课后作业的传送门在哪里？？

xxkk14 · 发表于 2018-4-14 07:23:04

看看

那微笑阳光 · 发表于 2018-4-14 19:56:34

传送门失灵了= =

742277203 · 发表于 2018-4-14 20:39:54

洵梦 · 发表于 2018-4-29 17:39:10

图像那里？

zaaazaa · 发表于 2018-5-14 20:38:07

看看这是啥

在这世界的角落 · 发表于 2018-5-29 21:21:15

支持一下

donghonor · 发表于 2018-6-19 10:28:49

想学习web后端

野花菜子 · 发表于 2018-6-27 23:39:03

感谢楼主

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 004 - 一只特立独行的猪

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评

评分