├── README.md
├── SUMMARY.md
├── chapter1.md
├── chapter10.md
├── chapter11.md
├── chapter12.md
├── chapter13.md
├── chapter14.md
├── chapter15.md
├── chapter16.md
├── chapter17.md
├── chapter18.md
├── chapter19.md
├── chapter2.md
├── chapter20.md
├── chapter21.md
├── chapter22.md
├── chapter23.md
├── chapter24.md
├── chapter25.md
├── chapter26.md
├── chapter27.md
├── chapter28.md
├── chapter29.md
├── chapter3.md
├── chapter30.md
├── chapter31.md
├── chapter32.md
├── chapter33.md
├── chapter34.md
├── chapter35.md
├── chapter36.md
├── chapter37.md
├── chapter38.md
├── chapter39.md
├── chapter4.md
├── chapter40.md
├── chapter41.md
├── chapter42.md
├── chapter43.md
├── chapter44.md
├── chapter45.md
├── chapter46.md
├── chapter47.md
├── chapter48.md
├── chapter49.md
├── chapter5.md
├── chapter50.md
├── chapter51.md
├── chapter52.md
├── chapter53.md
├── chapter54.md
├── chapter55.md
├── chapter56.md
├── chapter57.md
├── chapter58.md
├── chapter59.md
├── chapter6.md
├── chapter60.md
├── chapter61.md
├── chapter7.md
├── chapter8.md
├── chapter9.md
├── config.json
├── cover.jpg
└── cover
├── background.jpg
└── logo.png
/README.md:
--------------------------------------------------------------------------------
1 | 前言
2 | ===
3 |
4 | **2018 重写版： [https://dmnydn.com/](https://dmnydn.com/)**
5 |
6 | 也没有什么高大上的想法，就是想把自己会的一点网页代码的知识拿出来跟大家聊聊。你没看错，就是聊聊，就像我们平时在夜幕降临之后，坐在路边的小摊里撸串的感觉，没有玄奥的理论，没有教条的讲解，咱们就是聊天。
7 |
8 | 本书适合于零基础的小白们，高手请飞过，因为在你看起来本书行文会显得比较的拖沓，当然你拿它当段子三百首看我也是十分开心的。然后就是那些太白的小白也爬过吧，虽然代码很简单，我讲得也很细致，但是我还是不能从切换中英文输入法讲起的，换言之，你总是要懂得日常的电脑操作方法我们才有交流的基础。希望这个要求你不会觉得太高。
9 |
10 | 然后说一个很伤感情的问题，**本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
11 |
12 | > **alay9999@163.com （刘源）**
13 |
14 | ---
15 |
16 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
17 |
18 | * 主站（2018 新版上线）：https://dmnydn.com/
19 |
20 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
1 | # Summary
2 |
3 | * [前言](README.md)
4 | * [第一章 开场小谈](chapter1.md)
5 | * [第二章 扯扯学习方法](chapter2.md)
6 | * [第三章 几个小故事](chapter3.md)
7 | * [第四章 做点准备工作](chapter4.md)
8 | * [第五章 一个模板](chapter5.md)
9 | * [第六章 开始写点东西](chapter6.md)
10 | * [第七章 认识链接](chapter7.md)
11 | * [第八章 半个标签](chapter8.md)
12 | * [第九章 来吧，表哥（表格）！](chapter9.md)
13 | * [第十章 表格布局原理](chapter10.md)
14 | * [第十一章 一起写个百度](chapter11.md)
15 | * [第十二章 相对地址](chapter12.md)
16 | * [第十三章 神一样的 CSS](chapter13.md)
17 | * [第十四章 从 div 扯开去](chapter14.md)
18 | * [第十五章 开始征途](chapter15.md)
19 | * [第十六章 导航条（一）](chapter16.md)
20 | * [第十七章 导航条（二）](chapter17.md)
21 | * [第十八章 导航条（三）](chapter18.md)
22 | * [第十九章 导航条（四）](chapter19.md)
23 | * [第二十章 导航条（五）](chapter20.md)
24 | * [第二十一章 导航条（六）](chapter21.md)
25 | * [第二十二章 导航条（七）](chapter22.md)
26 | * [第二十三章 导航条（八）](chapter23.md)
27 | * [第二十四章 导航条（九）](chapter24.md)
28 | * [第二十五章 导航条（十）](chapter25.md)
29 | * [第二十六章 CSS 书写规范](chapter26.md)
30 | * [第二十七章 首屏大海报（一）](chapter27.md)
31 | * [第二十八章 首屏大海报（二）](chapter28.md)
32 | * [第二十九章 首屏大海报（三）](chapter29.md)
33 | * [第三十章 首屏大海报（四）](chapter30.md)
34 | * [第三十一章 还是海报](chapter31.md)
35 | * [第三十二章 一些格子](chapter32.md)
36 | * [第三十三章 一个页尾](chapter33.md)
37 | * [第三十四章 一些补遗](chapter34.md)
38 | * [第三十五章 随便聊聊](chapter35.md)
39 | * [第三十六章 定位（一）](chapter36.md)
40 | * [第三十七章 定位（二）](chapter37.md)
41 | * [第三十八章 定位（三）](chapter38.md)
42 | * [第三十九章 坐标系](chapter39.md)
43 | * [第四十章 定位实例（一）](chapter40.md)
44 | * [第四十一章 定位实例（二）](chapter41.md)
45 | * [第四十二章 定位实例（三）](chapter42.md)
46 | * [第四十三章 定位实例（四）](chapter43.md)
47 | * [第四十四章 定位实例（五）](chapter44.md)
48 | * [第四十五章 无聊的写个小游戏吧](chapter45.md)
49 | * [第四十六章 响应式](chapter46.md)
50 | * [第四十七章 JavaScript Start](chapter47.md)
51 | * [第四十八章 变量](chapter48.md)
52 | * [第四十九章 运算符](chapter49.md)
53 | * [第五十章 最简单的逻辑判断](chapter50.md)
54 | * [第五十一章 朕宣你！](chapter51.md)
55 | * [第五十二章 爱妃，朕还宣你！](chapter52.md)
56 | * [第五十三章 一百遍啊一百遍！](chapter53.md)
57 | * [第五十四章 一万遍啊一万遍！](chapter54.md)
58 | * [第五十五章 苛刻至极！](chapter55.md)
59 | * [第五十六章 一套工具](chapter56.md)
60 | * [第五十七章 助理！麻烦过来一下~](chapter57.md)
61 | * [第五十八章 各就各位，预备~~](chapter58.md)
62 | * [第五十九章 见证奇迹](chapter59.md)
63 | * [第六十章 开始玩玩](chapter60.md)
--------------------------------------------------------------------------------
/chapter1.md:
--------------------------------------------------------------------------------
1 | 第一章 开场小谈
2 | ===
3 |
4 | 写教程的想法由来已久了，因为，当初我也是一只小白，其实谁也不是一开始就会的，只不过闻道有先后罢了。遥想我还很白很白的时候啊，那时候白的连博客和论坛都分不清楚，你也别指望我会去通过搜索解决问题，而且仿佛那会也没有那么多解决问题的资料。好吧，应该说是我不会找，因为问题总是应该出在自己身上的。
5 |
6 | 总而言之吧，想学点东西，想弄懂点问题真的挺难的。遇到一个高人，毕恭毕敬，诚惶诚恐，一肚子问题都不敢多问，怕给人家问烦了不理我。但是值得庆幸的是，我遇到的高手大多耐心非常，一遍两遍三遍四遍的给我讲，然后我还没搞明白，他们又手把手的给我演示……现在想起来依旧为他们的热情和耐心感动不已。
7 |
8 | 说知恩图报有点严重了，可是被人家这么感动过之后就总想着做点什么，但是那些高手我真的帮不上人家，那么便转过头来把我会的东西讲给后来的人吧，算是一种传承，一种接力，或者只为心安。我会努力的在后面的内容中把各种知识点给大家讲的明白，讲的容易记住，也希望如果大家在本书中学到了什么的话，那么在将来有小白向你发问的时候，你能耐心的为他解答一二。
9 |
10 | 当然啦，其实你们现在的学习环境比我们那会好多啦，毕竟教程网站层出不穷的，剩下只是想不想学的问题了。然后你恨恨的咬了一口烤串跟我说——想学啊！但是每次看到第三章就看不懂了。得，别提这糟心的事，咱们继续扯淡。
11 |
12 | > **本章学习卡片：[卡片 1](http://coffee.zji.me/card.html?name=chapter1)**
13 |
14 | ---
15 |
16 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
17 |
18 | > **alay9999@163.com （刘源）**
19 |
20 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
21 |
22 | * 主站（2018 新版上线）：https://dmnydn.com/
23 |
24 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter10.md:
--------------------------------------------------------------------------------
1 | 第十章 表格布局原理
2 | ===
3 |
4 | > 如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/
5 |
6 | 这个吧，其实真的没有很复杂的道理，就是每个单元里放上相应的内容，靠表格控制着他规规矩矩的呆着。当然了，没东西的地方就不填写了，于是就留出了空白。
7 |
8 | 现在很少有人用表格去布局了，除了淘宝之类的特殊情况，或者……这家伙不会 CSS。因为表格不灵活，修改起来也十分的麻烦啊～在这里简单讲讲做个了解。
9 |
10 | 比如我现在有两张图片，想让他们排在一行，然后相互距离 100 像素怎么办呢？我们就做一个一行三列的表格，第一个单元格和第三个单元格分别放一张图片，而第二个单元格留空，设置宽度为 100px。代码如下：
11 |
12 | ```html
13 |
14 |
15 |  |
16 | |
17 | |
18 |
19 |
20 | ```
21 |
22 | 来看看效果：
23 |
24 |
25 |
26 | |
27 | |
28 | |
29 |
30 |
31 |
32 | 那么我们只是想让一张图片距离左侧 300px 呢？
33 |
34 | ```html
35 |
36 |
37 | |
38 | |
39 |
40 |
41 | ```
42 | 效果如下：
43 |
44 |
45 |
46 | |
47 | |
48 |
49 |
50 |
51 | 所以这个东西其实很好理解，设置合适的单元格尺寸，来撑开布局而已，你用 Excel 也可以玩。然后到了布局复杂的不行了，大家又发明了表格的嵌套，就是把一个表格放到另一个表格的单元格里，乱的让人想吐……不多说，只做了解。下一章我们学习一个重点的内容哦——表单。
52 |
53 | > **本章学习卡片：[卡片 10](http://coffee.zji.me/card.html?name=chapter10)**
54 |
55 | ---
56 |
57 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
58 |
59 | > **alay9999@163.com （刘源）**
60 |
61 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
62 |
63 | * 主站（2018 新版上线）：https://dmnydn.com/
64 |
65 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter11.md:
--------------------------------------------------------------------------------
1 | 第十一章 一起写个百度
2 | ===
3 |
4 | > 如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/
5 |
6 | 今天我们来聊聊表单，这个名字可能有些朋友不太了解，啥是表单呢？就是在网页上需要你填上东西然后点个按钮把你填写的东西提交了的功能就是表单了。这么说好抽象（可怜我还没去抄定义，努力通俗的去说呢），但是我举个例子你就该明白了：搜索框啊，网站注册啊，网站登录啊，都是由表单来实现的。还不明白？那我们一起来写一个小小的示例哦～
7 |
8 | 首先写下：
9 |
10 | ```html
11 |
15 | ```
16 | 然后看一下效果：
17 |
18 |
22 |
23 | 曾经以为很高深复杂的东西原来也不过这么几行代码，现在我们来仔细分析一下这些代码哦。
24 |
25 | form 这个标签包含的部分叫做表单域，反正就是这块地盘是它的，它做主，它罩着，有事冲他说。
26 |
27 | 然后 action 这个属性是一个网址，是用来处理数据的网址，这个太高深，我们先不要理解它，反正就是我们把收集到的这些数据发给谁的意思。你在大街上做社会调查，别人给你把表填好了，你得把表拿回去给统计部门的人，让他们研究去，嗯，这里就是说这个表要交给谁。
28 |
29 | method 是提交的方式，分为两种，一种是 get，一种是 post。
30 |
31 | get 就是把数据放在网址里传递，下面我们会做演示。那么打个比方啊，你在外面做了调查，回来之后直接高喊一声：统计部的王二（这是是要让谁处理，就像 action 的网址）我把调查的情况跟你口头说一下（跟着前边招呼负责人的话就一起说了）。这种方法方便（张口就说啊），私密性差（边上的同事都听得到），可以传递的数据量小（三十万字的内容你口头报告一个试试）；
32 |
33 | post 就是用一些我现在跟你说不明白的办法传递数据。但是打个比方你就能理解了：post 是啥意思？初中英语老师告诉我说是邮寄的意思，那我们就这么理解，你做完了调查，直接把调查结果寄给负责人。会有什么特点呢？肯定要比口头汇报复杂一些，但是安全性高（相对的啊，快递会不会在中间在做手脚是个问题，但是目前我们先不考虑这个，起码同事没法伸个耳朵就偷听走了），可以传递的数据量大（调查的时候我看见一女孩，长得那叫一个正点，偷拍一张跟朋友分享，夹在数据报告里一起邮寄就可以了，你口头汇报描述一个试试看，跟图片完全不是一个感受了）；
34 |
35 | input 是表单项，他又很多类型（type），设置不同的类型（type）可以实现不同的功能。就好象都是象棋，车和炮就有不一样的功能。
36 |
37 | text 这个类型就是文本框，就是上面效果中那个可以输入文字的地方，那叫作文本框，多讲理，可不就是用来输入文本的方框嘛～
38 |
39 | submit 这个类型是提交，就是把收集到的信息交给处理人。换言之老板喊收工啦，把调查结果都交上来就可以下班啦，就这个意思。
40 |
41 | name 是这个表单项收集到的数据的名称。就是标记一下，这一栏写的是姓名，那一栏写的是年龄，嗯，就这个意思，但是要用英文。
42 |
43 | value 就是这个表单项的值，在这里我们用他设置了提交按钮上的文字，你可以修改它看看变化。
44 |
45 | 这些属性讲完了，我们来试用这个小小的搜索工具哦，在里面输入 AAA 很好识别的一个字符串（就是一串字符，叫做字符串）。然后提交，看看页面跳转到哪里了？
46 |
47 | > http://www.baidu.com/s?wd=AAA
48 |
49 | 然后我们仔细看看这个网址，是不是觉得似乎看明白了呢？`http://www.baidu.com/s` 是 action 的值，然后一个问号，然后是文本框的 name 值（wd）等于文本框的值（我们输入的 AAA）。
50 |
51 | 原来写个简单的搜索就这么几行代码的事情，是不是有点想要用它做些什么了呢？
52 |
53 | > **本章学习卡片：[卡片 11](http://coffee.zji.me/card.html?name=chapter11)**
54 |
55 | ---
56 |
57 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
58 |
59 | > **alay9999@163.com （刘源）**
60 |
61 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
62 |
63 | * 主站（2018 新版上线）：https://dmnydn.com/
64 |
65 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter12.md:
--------------------------------------------------------------------------------
1 | 第十二章 相对地址
2 | ===
3 |
4 | 好了，现在我们算是初步的认识了 Html 代码，好像是叨叨了好多章，其实就是一个中心——标记语言。记住了这一点 Html 还是十分容易理解的，也因为它很容易，我就不在这里过多的废话了（虽然已经被无数人指责废话成灾了）。从下一章开始我们要学习神一样的 CSS 了。
5 |
6 | 好了，先来学点基础知识准备后面充满高能的战斗，我们来研究一下文件地址。首先记住这章很有用，但是现在先看懂就好。
7 |
8 | 文件的地址分为两种：**绝对地址**和**相对地址**，现在我们来打个比方，我最喜欢这个时间了。
9 |
10 | 北京东城区五星级别墅区里面 A 座是你家，家里三个房间，房间一里面有一张桌子，桌子上有个花瓶。
11 |
12 | 你站在房间一里，我问你，花瓶在哪？你回答我：“北京东城区五星级别墅区 A 座房间一桌子上的那个花瓶”。这是绝对地址，这个地址你在哪里告诉对方，对方都可以凭这个地址找到这个花瓶，很完美，就是太罗嗦。
13 |
14 | 所以一般我们都会简单地说：“我身边桌子上的这个花瓶”。一样很明确，但是有个前提，我得知道你在哪里，才能找到这个花瓶。因为这是以你为参照物的，找不到你，那么花瓶的位置也无从谈起。然后你不能换位置，如果你跑到我家说这句话，那指的就是我家的花瓶了。所以要想让这个相对地址成立，你和花瓶的相对位置不能变化。
15 |
16 | 你说这么看来相对地址除了简单也没啥好处啊，不，当你整体移动一些相关联的文件的时候他的作用就显现出来了。比如还是刚才那个状态，我把你家别墅（包括桌子花瓶还有房间里的你）整体打个包交给顺丰寄到上海去了。到了上海打开一看，房间一里面一张桌子，桌子上是花瓶，你站在桌子旁边，一切都没变（也就是相对位置没变哦），那么你现在说：“我身边桌子上的这个花瓶”，就还是这只花瓶没错，但是你再说：“北京东城区五星级别墅区 A 座房间一桌子上的那个花瓶”，那就不好意思，在那个位置我找不到花瓶了，因为连房子我都给你搬到上海了。
17 |
18 | 现在理解了绝对地址和相对地址的一些特点，你就开始有些明白了，那么我们说：**“绝对地址是描述某个文件的位置，而相对地址是描述两个文件间的位置关系”。当我们移动一个文件夹的时候，里面的每个文件的地址都发生了变化，但是他们之间的相互位置关系却没有变。**
19 |
20 | 然后我们来做一个实例来讲解一下哦，假设有如下目录结构：
21 |
22 | `http://coffee.zji.me/`
23 | * |_ imgs
24 | * |_ shuaige.png
25 | * |_ files
26 | * |_ miao
27 | * |_ huamao.jpg
28 | * |_ index.html
29 | * |_ photo.jpg
30 |
31 | 那么简单解释一下：
32 |
33 | > `http://coffee.zji.me/`这个网站下有两个文件夹 `imgs` 和 `files`；
34 |
35 | > 其中 `imgs` 文件夹下只有一张 `shuaige.png` 的图片；
36 |
37 | > `files` 文件夹下有两个文件 `index.html` 和 `photo.jpg` ，还有一个叫做 `miao` 的文件夹；
38 |
39 | > `miao` 文件夹下有一张图片 `huamao.jpg`
40 |
41 | 好了，我们假设你读得很认真，你完全理解了我上边所说的这些乱七八糟的东西，那么下边便是很轻松的学习关键技巧的时刻了。如果你看到这里发现上面的都没看……那就记住下面的方法，用的多了自然也就明白了。
42 |
43 | 现在我们都以 `index.html` 为参照物（**其实就是在哪个文件里写就以哪个文件为参照物**），我们在 `index.html` 里面写 `photo.jpg` 的相对地址。看我怎么做：
44 |
45 | 先写下两个文件的绝对地址：
46 |
47 | > http://coffee.zji.me/files/index.html
48 |
49 | > http://coffee.zji.me/files/photo.jpg
50 |
51 | 然后去掉两者前边的相同部分，得到：
52 |
53 | > index.html
54 |
55 | > photo.jpg
56 |
57 | 现在**我们的参照物（`index.html`）只剩下文件名了，那么下面的就是我们要的相对地址了**—— `photo.jpg`
58 |
59 | 然后做个练习，写 `huamao,jpg` 在 `index.html` 中的相对网址，一样的办法，先写下他们的绝对网址：
60 |
61 | > http://coffee.zji.me/files/index.html
62 |
63 | > http://coffee.zji.me/files/miao/huamao.jpg
64 |
65 | 然后去掉相同部分：
66 |
67 | > index.html
68 |
69 | > miao/huamao.jpg
70 |
71 | `index.html` 的网址就剩下文件名了，那下面的就是我们要的相对地址了——`miao/huamao.jpg`
72 |
73 | 这个简单到混蛋的办法是不是很好理解？我们来看点复杂 `shuaige.png` 在 `index.html` 里面的相对地址怎么写？
74 |
75 | 按着上边的办法，列出绝对地址：
76 |
77 | > http://coffee.zji.me/files/index.html
78 |
79 | > http://coffee.zji.me/imgs/shuaige.png
80 |
81 | 去掉相同部分：
82 |
83 | > files/index.html
84 |
85 | > imgs/shuaige.png
86 |
87 | 嘿，`index.html` 现在剩的可不只是文件名，还带着一个文件夹呢，**去重之后，如果参照文件剩下的不只是文件名，则在参照文件（`index.html`）上去掉一个文件夹，同时给目标文件（`shuaige.png`）前面加上一个 `../` 。如此重复操作，直到参照文件（`index.html`）只剩下文件名为止**。
88 |
89 | 说起来很复杂，做起来就简单了，简直是无脑的上面删一个，下面加一个：
90 |
91 | > index.html
92 |
93 | > ../imgs/shuaige.png
94 |
95 | 这样就出来了。现在解释一下 `../` 代表向上一层文件夹，那么如果是 `../../` 就是向上两层喽～现在看看这两种方法，想想上面的比喻，好好消化一下，可以不理解，但是要知道我都说过些什么，等到后面用起来就理解了。
96 |
97 | **最后补充一句：你说网址的我看明白了，但是在本地的时候怎么写？一样的 `C:\windows\我是大帅哥.avi` 这么写文件绝对地址，其实你在文件上面右键属性就可以找他的绝对地址了。然后按着上边的方法做哦，唯一的问题是 `\` 要换成 `/`。**
98 |
99 | > **本章学习卡片：[卡片 12](http://coffee.zji.me/card.html?name=chapter12)**
100 |
101 | ---
102 |
103 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
104 |
105 | > **alay9999@163.com （刘源）**
106 |
107 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
108 |
109 | * 主站（2018 新版上线）：https://dmnydn.com/
110 |
111 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter13.md:
--------------------------------------------------------------------------------
1 | 第十三章 神一样的 CSS
2 | ===
3 |
4 | > 如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/
5 |
6 | 当然这只是一个比喻，我绝没有挑起代码界圣战的意思。从 Html 进入到 CSS 世界的感觉就好像从人间一步迈进了神国，一些曾经很难做到的事情，现在变得信手拈来了。宛如我们掌握了神的力量。当然这么说下去的话后面我们要学的 JavaScript 就应该称作众神之神了……
7 |
8 | 玩笑开完了，玩代码的时间到了，我们先来简单认识一下 CSS。
9 |
10 | 首先看一下我们前边写的代码：
11 |
12 | ```html
13 |
14 |
15 |
16 |
17 | Document
18 |
19 |
20 | Hello world！
21 | Code is so easy！
22 |
23 |
24 | ```
25 |
26 | 挺简单的代码，效果如下：
27 |
28 | Hello world！
29 | Code is so easy！
30 |
31 | 就是两段文字，现在我给他添加一点属性哦：
32 |
33 | ```html
34 |
35 |
36 |
37 |
38 | Document
39 |
40 |
41 | Hello world！
42 | Code is so easy！
43 |
44 |
45 | ```
46 |
47 | 大家看到，我就是给第一个段落加了一个属性。来看看效果：
48 |
49 | Hello world！
50 | Code is so easy！
51 |
52 | 我们来分析代码哦，`style` 是样式的意思，那么很容易明白，这个属性就是给当前的元素加上一些样式。那么我们加了什么样的样式呢？`color:red;` 颜色是红色，颜色（color）是一个 CSS 属性，而红色（red）是这个属性的值。哎，着就跟 Html 有区别了，Html 是`属性=属性值`，而 CSS 是`属性:属性值`。（**特别强调：都是英文标点哦**）。然后 CSS 的每个属性结束都要用英文的分号标记出来，所以 `font-size` 就是第二个属性了，意思是字体的尺寸，属性值是 `12px` ，于是我们就看到了上边的效果。
53 |
54 | 所以看到了，CSS 也不难，不过是换个格式去写属性，属性值。说来说去也就像代数里的赋值操作，然后就没有然后了。
55 |
56 | 那你说这个 CSS 有啥好的啊？方便！来看哦，现在代码里有两个段落，那么我们假设我们有一百个段落（我不写了，就拿这两个代表了）要是我想都设置成刚才那样，咋弄？把 style 属性整个复制，然后挨个 `` 标签里粘贴？好不容易粘完了，老板告诉你改回第一稿……
57 |
58 | 来看我怎么写：
59 |
60 | ```html
61 |
62 |
63 |
64 |
65 | Document
66 |
72 |
73 |
74 | Hello world！
75 | Code is so easy！
76 |
77 |
78 | ```
79 |
80 | 效果如下：
81 |
82 | Hello world！
83 | Code is so easy！
84 |
85 | 好了，再来分析代码哦～
86 |
87 | 我们说了 `` 标签是用来声明东西的，那么我在他里面声明一下这个页面的样式他应该不会有什么意见，就是本职工作啊。但是我们要把这些样式放在一起，不许他们乱跑，所以写上 `` 标记一下，这里面的都是样式，就是都是 CSS 代码啊，你要按着 CSS 那么处理。于是这个事情明白了。
88 |
89 | 再看里边，`p` 代表标签 `` 这个猜都能猜出来，是吧，后面是他的样式（color，font-size），我们前边也都认识过了。现在的问题是大括号，大括号就是说这部分代码都是前边 p 的啊，又是一前一后标记一下，这么简单的事情我们一想就明白了。
90 |
91 | 看到啦，我在 CSS 里说 `p {……}`，于是页面里所有的 `` 标签就都获得了这个样式，很方便是不是？
92 |
93 | ——“老板，那一百段的文字颜色我都改好了！”
94 |
95 | ——“这么快！没骗我吧，正好我这还有点活，你就能者多劳吧……”
96 |
97 | CSS 这么厉害的东西确实是能者多劳，现在我们一般只用 Html 写网页的框架和内容，而样式全部交给 CSS 处理，他清晰明了，便于管理和修改，而且也十分得强大。
98 |
99 | 但是能者多劳就该出问题了，你想啊，CSS 管理了整个页面的样式，有着很多内容，全放在页头，我们想看网页的 Html 结构的时候就要往下找很久。这就好像把档案管理员跟老板放在一个办公室，老板迟早要被堆积成山的档案埋没（为什么说到这里我很开心呢？）。
100 |
101 | 然后还有一个问题，你想我写一个网站，肯定很多样式是相似或者相同的，那么这部分咋整？每个页面复制一份？然后老板说了，吧所有页面的文字都换成蓝色，你又挨个页面复制粘贴……
102 |
103 | 所以我们要把 CSS 独立出来，这样他不会影响我方便的阅读 Html，还可以在多个页面里调用，谁用他就叫他，我们共用一个就好啦。是啊，公司就一个档案管理员，不是一个部门塞一个，那样机构臃肿，职能重叠，效率低下……
104 |
105 | 所以我们新建一个 css 为后缀的文件，比如叫做 `style.css`，文件名你随意啊，然后把这部分代码粘进去保存。
106 |
107 | ```css
108 | p {
109 | color:red;
110 | font-size:12px;
111 | }
112 | ```
113 |
114 | 这就是独立的 CSS 文件了。然后我们把我们的 Html 代码改成：
115 |
116 | ```html
117 |
118 |
119 |
120 |
121 | Document
122 |
123 |
124 |
125 | Hello world！
126 | Code is so easy！
127 |
128 |
129 | ```
130 |
131 | 我们发现这就是在普通的 Html 文档上加了一个 link 标签，我们来分析一下，link 是链接的意思，就是我们要把我们的 CSS 文件链接到这个文档来，要不然浏览器怎么知道你要用哪个 CSS 文件呀。所以这是一个声明，放在 head 势力范围内没错。
132 |
133 | 现在研究 link 的属性哦，href 是链接到的地址，就是我们要用的 CSS 文件地址，我这里写的是相对地址，所以你不要光是照着抄，要写你自己那个 CSS 文件的相对地址哦，否则找不到文件自然就出错了。
134 |
135 | rel 属性是说被链接文档和当前文档之间的关系，就是样式表（stylesheet）喽，顺便说一下 CSS （Cascading Style Sheets）的中文名称是“层叠样式表”，简称“样式表”。
136 |
137 | 然后 type 是类型，text/css 说的是这是一个文本文件（text），同时也是一个 css 格式的文件。
138 |
139 | 当然这种格式也不用记，跟我一样用的时候抄一下就好了。所以呢，今天我们学习了 CSS 在 Html 文件中的三种出场方式和一些 CSS 的优点。大家可以看学习卡片中的总结再复习一下主要知识点哦～
140 |
141 | > **本章学习卡片：[卡片 13](http://coffee.zji.me/card.html?name=chapter13)**
142 |
143 | ---
144 |
145 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
146 |
147 | > **alay9999@163.com （刘源）**
148 |
149 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
150 |
151 | * 主站（2018 新版上线）：https://dmnydn.com/
152 |
153 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter14.md:
--------------------------------------------------------------------------------
1 | 第十四章 从 div 扯开去
2 | ===
3 |
4 | > 如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/
5 |
6 | 我们前边说过 div+css 布局是招聘时一种懒到家的衡量标准（其实现在 css 已经是前端的基本技能了），就好像招聘文员写上要求会打字一样的多余。好吧，虽然这个说法被无数人吐槽着，也有些人较真说这个说法不科学等等。但是我们学习 css 总是绕不开要用到 div 的。
7 |
8 | 其实 div 就是一个普通的 Html 标签，普通到什么地步呢？他几乎没有任何自带的样式，好吧，他就是一个空白的标签（是样式是空白的）。一张白纸啊，做什么都好用。我们知道 CSS 的作用就是定义样式啊，如果我们使用的标签本身自带了样式，我们还要用 CSS 对他进行修改，使其达到我们想要的效果。但是有了 div 就方便了啊，我们只要把我们需要的样式给他就好了。毕竟新建总是要比修改来的清爽省心。就好像拿张白纸写字很舒心，但是拿张写过字的纸过来，你要先把文字擦掉再去写你想要的文字，就比较闹心了。
9 |
10 | 然后说说盒模型，这东西搞了个高大上的名字唬人而已，其实就是把 div 看成一个纸箱，那么一个页面很多 div 就是一堆纸箱在房子里排开而已。进而的，div 的嵌套就是大箱子套小箱子。就这么回事，比如下图就是本教程主站的盒模型 3D 视图：
11 |
12 | 
13 |
14 | 就是像摆积木一样摆出了一个页面，你说要是真的用积木去摆就好了，你就会了。不过其实换做代码操作也不过是你用电脑能听懂的语言把各个积木块的样子和位置描述一下罢了。
15 |
16 | 好像……有点乱哦，你想 div 这个空白标签看起来挺好用的，可是要是页面上全用他，那可咋区分啊？我在 CSS 里面写上 `div {……}` 结果所有 div 全都一起发生变化了，这就有点乱了。所以我们要给 div 取名字。
17 |
18 | 其实呢，所有的 Html 元素都可以有名字的，这个名字分为两种 `class` 和 `id` ，用法很简单，就是当做标签的一个属性去写：
19 |
20 | ```html
21 |
22 |
23 | ```
24 |
25 | 就是这样，当然他们的名字你随便取，不过别搞怪，写中文啊，特殊符号啊什么的肯定不行。那么你又问了，取名字就取名字吧，怎么还两种呢？这个也好理解， id 是学号，class 是班级，反正我们初中的英语老师（为什么不是小学？我们小学没有英语课呀）就是这么告诉我们的。
26 |
27 | 然后我们该说说 id 和 class 的区别了，他们都可以用来标识某个元素，但是他们是有区别的，否则我们也不用搞两个名头出来。你知道的，在学校里一个学号对应一个学生，你报出学号就能找出有且只有一个学生。所以老师提问的时候爱叫学号，肯定有人被叫到（他叫范围以外的我们就不鸟他了）而且被叫到的肯定是一个人，不会半个班都站起来跟他吼：“报告老师，我不会！”而班级呢？一个班级可以有很多学生，这些学生的特点就是，他们是一个班的（废话！），一个班的应该就是一个年级的，应该就是一样的年龄，一样的专业……反正是一群在某方面属性一致的家伙。
28 |
29 | 所以， 在同一页面内， id 是不可以重复的，不能有两个元素具有相同的 id。某学校的两个学生学号一样，麻烦了，520 号考上了哈佛，结果两个人，谁去谁不去？就打起来了。
30 |
31 | 但是，在同一页面内，可以有多个元素具有相同的 class，三年二班有三十个同学，这很正常，校长说，让三年二班的同学去表演合唱，那么这三十个同学就都在台上唱歌，整齐划一，很好看。
32 |
33 | 这就是两者的特点。然后说，我们到 CSS 里面怎么写呢？这就涉及到了选择器的问题。先说啥是选择器，我说页面中某个元素怎样怎样，那么究竟是哪个元素呢？选择器就是用来告诉我们到底是哪个元素的。比如：
34 |
35 | ```html
36 | p {
37 | color:red;
38 | font-size:12px;
39 | }
40 | ```
41 |
42 | 这是我们上节课的代码，大括号里是一些 CSS 属性，我们不去管他，前边的 p 是说这些属性对所有的 `` 标签起作用，那么这个 p 就是一个选择器。
43 |
44 | 然后要是想对链接起作用呢？就是 `a {……}`，于是你看出门道来了，原来选择器就是元素的标签啊，那么 `div {……}` 这么写的话，大括号里的 CSS 属性肯定就对所有的 `` 起作用啦？
45 |
46 | 没错，就是酱紫的！你真聪明～
47 |
48 | 但是你肯定不会就这么依了我的，刚才我们给 div 取了半天名字，然后到这根本没用到啊。放心，我们接着就来学习 id 和 class 在 CSS 里面怎么去用。
49 |
50 | 其实也很简单的，还是上边那段代码，我们给里面加一点点文字用来看效果哦：
51 |
52 | ```html
53 | 我是文字，用来看效果的
54 | 我也是
55 | ```
56 |
57 | 然后 css 写作：
58 |
59 | ```css
60 | #myid {
61 | color:blue;
62 | }
63 | .myclass {
64 | color:red;
65 | }
66 |
67 | ```
68 |
69 | 效果如下：
70 |
71 | 我是文字，用来看效果的
72 | 我也是
73 |
74 | 这你就明白了，在名字前面加个 `#` 号就代表 id，在名字前面加个 `.` 就代表 class。用 `#` 来开头作为编号什么的我们很常见，这就记住啦。class 是个很平常的东西，不像 id 那么独一无二，所以这么平凡大众的属性就没得炫耀了，点个点低调的路过就好。
75 |
76 | 今天我们认识了 div，还知道了班级（class），学号（id）的特点与写法。明天我们就开始试着去写一些东西喽～
77 |
78 | > **本章学习卡片：[卡片 14](http://coffee.zji.me/card.html?name=chapter14)**
79 |
80 | ---
81 |
82 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
83 |
84 | > **alay9999@163.com （刘源）**
85 |
86 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
87 |
88 | * 主站（2018 新版上线）：https://dmnydn.com/
89 |
90 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter15.md:
--------------------------------------------------------------------------------
1 | 第十五章 开始征途
2 | ===
3 |
4 | > 如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/
5 |
6 | 我说过学代码要勤动手，其实你们光拿我当相声看了，根本没动手。别以为我不知道哦。今天开始我们要一起写一个页面了，大家可一定一定要动手跟着操作才行啊，否则你会跟不上的！
7 |
8 | > **看懂和会做绝对是两码事！**
9 |
10 | 我们要开始写一个页面了，这是我们的处女作，大家要好好珍惜，认真享受过程～～（怎么总觉得好猥琐？）我们要写一个很简单很普通的页面，就写一个最朴素的 App 发布页面好了，这应该算是一个很实用的东西。我就不画效果图给大家看了，因为这又不是给老板干活，花毛线效果啊，做成什么样是什么样就好了嘛～
11 |
12 | 但是一些准备的工作还是要交代清楚的，首先建立一个空白的文件夹作为我们网站的根目录，然后在里面的文件结构如下（先规划出来，用哪个文件再建立哪个文件就行的）：
13 |
14 | /
15 | * |_ images
16 | * |_ styles
17 | * |_ main.css
18 | * |_ index.html
19 |
20 | 其中 images 文件夹用来放我们后面要用到的所有图片。styles 文件夹下的 main.css 里面用来写我们用到的所有 css 样式。最后 index.html 当然就是我们这次要写的页面了。
21 |
22 | 现在在 Notepad++ 里面新建一个文件，然后**菜单 —— 格式 —— 以 UTF-8 格式编码**，然后保存文件为 index.html。
23 |
24 | **网页乱码就是因为这里的编码没选对**，现在不要再问我为什么乱码了哦～～
25 |
26 | 文件里粘入如下代码
27 |
28 | ```html
29 |
30 |
31 |
32 |
33 | 我们的目标是抢前端的饭碗！
34 |
35 |
36 |
37 |
38 |
39 |
40 | ```
41 |
42 | CSS 代码的建立方法一样，在里面粘贴如下内容：
43 |
44 | ```css
45 | /* 这是我写的第一个 CSS 文件，内心十分的激动，在这心潮澎湃之余，我想到了一个真理 —— 稻米鼠真帅！ */
46 | ```
47 | 认真写，不许错字，否则后果很严重！
48 |
49 | 然后我们要说一个很实际的问题，马上就要写长长的代码了，我很忐忑，作为小白，看着这么长的代码（虽然它是我自己写出来的）我会不会看不懂啊！
50 |
51 | 会，当然会了，我现在都懒得回头瞅我自己写的代码呢……所以我们要一边写代码，一边给代码加上一些注释进行说明，好让自己再回头看的时候不至于迷惑，这是一件很有必要的事情。
52 |
53 | 那么如何注释呢？在 Html 代码里注释的格式如下：
54 |
55 | ```html
56 |
57 | ```
58 |
59 | 下面是 CSS 文件里的注释格式：
60 |
61 | ```css
62 | /* 这样写就是 css 代码中的注释 */
63 | ```
64 |
65 | 想想标记语言是怎么回事来着？现在我们就是用特定的符号来标记出来注释的内容。那么现在要记住：**注释是为了我们日后能够方便的理解代码用的，除此之外，他不会起任何其他作用。**他不会被显示，也不会对页面造成影响，你就当他是电影中的旁白好了。
66 |
67 | 虽然注释不起作用，但是你也不能给他乱放，否则至少也会让我们不方便阅读。一般我们新起一行书写注释或者把注释放在行尾。
68 |
69 | 好了，准备工作做完了，下节课开始写这个页面的导航部分～一个属于你的战役就此拉开了序幕……（我好像是讨人厌的旁白……）
70 |
71 | > **本章学习卡片：[卡片 15](http://coffee.zji.me/card.html?name=chapter15)**
72 |
73 | ---
74 |
75 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
76 |
77 | > **alay9999@163.com （刘源）**
78 |
79 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
80 |
81 | * 主站（2018 新版上线）：https://dmnydn.com/
82 |
83 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter16.md:
--------------------------------------------------------------------------------
1 | 第十六章 导航条（一）
2 | ===
3 |
4 | > 所有的读者都可以通过此链接（https://code.pubu.im/reg/b6mebkgg18lbtrr）注册，来和我们交流。
5 |
6 | > **已付费的读者请与我联系，告知我您的支付宝账号与常用邮箱，我会邀请您加入 VIP 交流频道，方便我们更深入的探讨代码。**
7 |
8 | 我就一直在想，我们应该把这个页面写成什么样的，是高大上还是……还好，后来我的懒惰打败了我——写个简单的！
9 |
10 | 但是不管怎么说，再懒也得动手了，先写个导航，嗯，虽然是个单页面网站，但是还是可以有导航的。反正也没老板指手画脚，所以随心所欲点挺好的。
11 |
12 | 其实说呢，写个导航很简单的，有啥啊？咱们合计合计啊，要个 Logo，几个导航项（什么首页啊，联系啊，关于啊这类的），一个搜索（前边我们学了主要功能代码），最多再加个登陆注册。这就是一般导航条（放这么多东西还叫导航条？）的所有内容。
13 |
14 | 我说啦，咱就一个单页面网站，一个 Logo 和一组导航项妥妥的了～。那我们就把他们写出来哦～
15 |
16 | ```html
17 |
18 |
19 | ```
20 |
21 | 这段代码写在哪里知道吧，上一章的代码里我已经标识出来了哦，
22 |
23 | 然后我们同步的去写 CSS，就是在我们前边的 CSS 文件里写下如下代码：
24 |
25 | ```css
26 | #nav {
27 | width:100%;
28 | height:50px;
29 | background:#F3F3F3;
30 | }
31 | ```
32 |
33 | 开始解释啊，因为这是第一次，我会努力说的很详细，以后会简单些。
34 |
35 | `#nav` 是说 `id="nav"` 的元素，就是先说名字，再说事情，那个张二狗啊，今天的戏里你去扮演旺财，穿黄色的戏服，再戴上长耳朵哦。叫了名字，就告诉他，大括号里就是你今天的行头，都穿上就对了。
36 |
37 | 然后我们看看 `#nav` 今天都有什么行头哦。`width:100%;` 这个是说宽度，宽度 100%，这里就又有问题了，这是谁的 100% ？百分比是有参照物的，那么在这里的百分比是说**父元素**的百分之多少，什么是父元素？顾名思义就是他上一层的元素，换言之是套在他外边紧挨着的那一层（不是套在外边就行，是紧挨着的！），所以 `#nav` 的父元素就是 ``。为什么不是 `` ？虽然也是套在外面，但他不是紧挨着的，中间还套了一层 ``。所以， `` 是父元素，而如果非要论起来 `` 就是爷爷元素了（事实上没人这么说，也没这个名词，在此只是为了解释）。
38 |
39 | 现在 `#nav` 的宽度就和 `body` 的宽度一样了，那高度呢？我们写了 `50px`，这个就没啥解释的了。最后 `background` 设置的是背景，背景色的值为 `#F3F3F3` （这个看不懂的朋友去研究一下 RGB 颜色的 HEX 格式），当然颜色也可以用 red，blue 之类颜色名称表示。
40 |
41 | 然后我们就可以看看效果了，如果你写对了的话基本应该是这个样子的：
42 |
43 | 
44 |
45 | 来注意看灰色那块就是我们刚才写出来的效果。
46 |
47 | 然后你说了，看起来你想做的这个导航应该是通栏的，但是好像左右没到头，上边也差一点啊！嗯，我来解释一下，这不是我的另类的设计，这是我们写代码遇到的第一个问题，作为一个通栏导航，我当然希望他的上左右三面都紧贴着边的，可是现在没成功，为什么呢？
48 |
49 | 是因为浏览器对每个元素（标签）都有一个默认的样式（所以前边我们说 div 的默认样式几乎为零，所以很好用），那么根据我刚给出的这个条件来判断，虽然我们还不是很了解情况，但是也基本可以判断出问题更可能出在 body 身上。
50 |
51 | 确实的，这里是因为 body 默认有一个外补（margin）造成的，关于外补（margin）我们晚些再讲，现在先来解决问题，方法当然很简单，就是把外补（margin）设置为零就可以了。但是一般的一些谨小慎微，希望不出任何意外的朋友会把内补（padding）顺便也设置为 0 ，而且既然 body 设置了，为什么不顺便给 html 也来一发呢？所以 CSS 里面添加如下内容：
52 |
53 | ```css
54 | html, body {
55 | margin:0;
56 | padding:0;
57 | }
58 | ```
59 |
60 | 大家注意了哦，上面代码中的 html 和 body 分别指的是两个标签，二者两个标签有相同的 CSS 属性，所以我们放在一起定义，我们用一个英文逗号来分隔两个选择器，然后后面大括号写上他们的共同属性，当然了更多个元素也是这样的格式去写，很方便是不是？就好像张三，李四你俩穿一样的行头！一个意思。
61 |
62 | 因为这个定义是最外层的，我们本着从整体到局部的原则，把他写在前边，而 `#nav` 的定义因为是内层，所以放在后面，这样符合逻辑顺序的 CSS 是为了方便我们日后的阅读，是一个习惯问题。
63 |
64 | 所以我们现在的 main.css 文件全文如下：
65 |
66 | ```css
67 | /* 这是我写的第一个 CSS 文件，内心十分的激动，在这心潮澎湃之余，我想到了一个真理 —— 稻米鼠真帅！ */
68 | html, body {
69 | margin:0;
70 | padding:0;
71 | }
72 | #nav {
73 | width:100%;
74 | height:50px;
75 | background:#F3F3F3;
76 | }
77 | ```
78 |
79 | index.html 文件全文：
80 |
81 | ```html
82 |
83 |
84 |
85 |
86 | 我们的目标是抢前端的饭碗！
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | ```
95 |
96 | 来看看现在的效果哦：
97 |
98 | 
99 |
100 | 终于三边都挨上了，欧耶～
101 |
102 | 那么大家都看到了，其实 CSS 文件就是这样一条一条的去定义元素的样式，我们只要知道这个元素有什么样式，和这个样式都可以有什么属性值就好。当然这些要靠我们的日常练习去积累，而不是死记硬背，一定要记住这一点。然后补充一些小知识哦～
103 |
104 | > 在 CSS 里数值如果有单位就必须带上单位，否则会出错。但是有一个特殊情况是 0，因为无论什么单位，0 是等价的（幸好不用考虑摄氏度和华氏度），不会因为没有单位产生歧义。
105 |
106 | > Html 里的属性值我们却常常省略单位，因为在 Html 里的属性值若不特别说明，则默认单位是 px（像素）
107 |
108 | ---
109 |
110 | > **本章学习卡片：[卡片 16](http://coffee.zji.me/card.html?name=chapter16)**
111 |
112 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/16.zip)**
113 |
114 | ---
115 |
116 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
117 |
118 | > **alay9999@163.com （刘源）**
119 |
120 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
121 |
122 | * 主站（2018 新版上线）：https://dmnydn.com/
123 |
124 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter17.md:
--------------------------------------------------------------------------------
1 | 第十七章 导航条（二）
2 | ===
3 |
4 | 现在我们来加 Logo 哦～，话说我这么懒就不用图片 Logo 了～。
5 |
6 | 代码如下，加在 #nav（就是 `id="nav"` 的元素） 里面：
7 |
8 | ```html
9 |
12 | ```
13 |
14 | 挺简单易懂的，一个 div 里面放了个链接而已，你要是用图片就把`代码能有多难？`换成 `
` 就行，这个大家应该是会的。
15 |
16 | 然后说说这个 `href="#"` 是个什么东东，他就是链接到当前页面本身，当然其实他是用了锚点，不过我们后面再说。然后这个链接要不要新窗口打开？当然不要，一个单页面网站点一次 Logo 复制一个标签页算什么神奇体验？所以关于是否新标签打开这个细节我们要多做思考，从实际体验和读者需求出发去做决定，而不是听老板的全部新标签打开的奇特理念。其实在日常我们用鼠标中键点击（滚轮也能按，别说你不知道）链接，就可以直接新标签打开，完全无视网页本身的设置，这才叫随心所欲的体验。可惜很多人不喜欢学习这些使用技巧……
17 |
18 | 然后我们来看看代码效果哦～
19 |
20 | 
21 |
22 | 你说，妈呀！丑爆了，不跟你学了！
23 |
24 | 是挺丑的，本来不加链接还勉强可以看，这加上链接连我都看不下去了呢，要不咱们一起逃学？不过在走之前我们先把 CSS 写一下，也算善始善终了。
25 |
26 | 虽然我们是小白，但是也大概猜得出来这蓝色带着下划线的效果是链接造成的，而且我们说 div 几乎不带样式，而我们也没做什么定义呢，那就是链接的问题了。我们来写 CSS：
27 |
28 | ```css
29 | #logo a {
30 | color:#333;
31 | text-decoration: none;
32 | font-size:24px;
33 | }
34 | ```
35 |
36 | 然后解释一下，先看选择器 `#logo a` 这是什么意思呢，是 `#logo` 元素里面的所有 `a` 元素，这里就是说 `id="logo"` 这个 div 里面的所有链接（a），所以明白啦，用空格分隔的的选择器就是什么里面的什么。就好像说财务部的会计们，下午给大家发年终奖！是指财务部里面的会计，其他的不要。这里是 `#logo` 里面的所有 `a` 们。你们的样式是这个样子的：
37 |
38 | color 是颜色，确切的说是文字颜色，#333 其实是 #333333 的简写，当颜色值的数字两两相同的时候可以简写，比如：#CDF 就代表 #CCDDFF 。
39 |
40 | text-decoration 是文字的下划线，这里写 none 意思就是没有啦，因为我们不想要下划线。
41 |
42 | font-size 是字体大小，前边讲过，我们这里选择 24px。
43 |
44 | 然后我们再看一眼效果哦～
45 |
46 | 
47 |
48 | 诶，好像不那么难看了耶，但是还有两个问题，要是能解决的话我们觉得还是可以继续学习下去的。第一个是你这在垂直方向上都不居中，往上飘着那么明显老板看到会骂死你的；第二个是能不能设置成粗体看看效果？
49 |
50 | 对于 CSS 来说，垂直居中是个比较麻烦的事情，他根据不同的情况有着多种的解决方案，在这里我们先来讲一种简单的哦。当你的内容是单行文本的时候，你给他设置一个行高，这个行高等于他外部元素的高度，那么文字在它的外部元素中垂直居中。
51 |
52 | 说简单点行高就是这一行文字的高度，你设置一个 30px 的行高，但是文字大小设置的是 12px，明显文字高度不够用，于是上下就要补充空白，而美好的事情是上下补的空白是一致的，那我们们就利用这个来做垂直居中了。
53 |
54 | 所以上边给加一个
55 |
56 | ```css
57 | line-height: 50px;
58 | ```
59 |
60 | 就搞定垂直居中的问题了，现在说加粗，这个属性很简单 `font-weight`，然后你说属性值写 `bold`，你看前面讲的单词我还记得哦～当然没问题，不过这个属性的属性值挺有意思的，所以我们在这里多说几句好了。
61 |
62 | 我们可以用 normal（普通），bold（粗体）这样的值对他进行定义，也可以用 100 —— 900 的整百的数字去定义字体的粗细，其中 400 相当于 normal，而 700 相当于 bold，明显的，我们用数字可以更细致的去设置，也更直观一些。那么用什么就看你个人的爱好了。
63 |
64 | 那么我们加入如下属性：
65 |
66 | ```css
67 | font-weight: 700;
68 | ```
69 |
70 | 然后看看效果：
71 |
72 | 
73 |
74 | 虽然不算好看，但是我们这节课也算是想做什么就做出了什么，很随心所欲的样子！
75 |
76 | > **本章学习卡片：[卡片 17](http://coffee.zji.me/card.html?name=chapter17)**
77 |
78 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/17.zip)**
79 |
80 | ---
81 |
82 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
83 |
84 | > **alay9999@163.com （刘源）**
85 |
86 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
87 |
88 | * 主站（2018 新版上线）：https://dmnydn.com/
89 |
90 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter18.md:
--------------------------------------------------------------------------------
1 | 第十八章 导航条（三）
2 | ===
3 |
4 | 我刚写下这个标题你就跑过来大喊着，终于又开课了，上节课我就有点觉得不对劲，你说那文字紧贴着左边能看吗？赶紧想想办法！
5 |
6 | 嗯，是的，紧贴着左边确实不好看啊，那我们这节课来想办法解决这个。这时候就要用到我们前边的盒模型了。那么我先开始打比方，打完比方再讲要用的一些属性，最后是解决今天的问题哦。
7 |
8 | 我们说 div 是一个盒子，就是个纸箱啊，方方正正的，四面有纸板挡着，可以装东西，也可以把内外的东西分隔开来，当然上面还可以摞上东西，或者底下垫上东西。就仿佛快递库房里的一只普通的不能再普通的纸箱，混迹于亿万同类之中，平凡，仿佛是他的唯一标签……（啊？！这不是在简书写散文？不好意思我跑题了）
9 |
10 | 当然了，其实这是我说的白话，但是我觉得很好的说明了他的特性，官方描述管这叫做容器，咱没那高的领悟能力，一说容器我就想起烧杯什么的……那就没法理解去了。你就知道这么个事就行，别回头一说起容器来不知道，然后再往下说就说是看稻米鼠那个扯淡的教程学的……
11 |
12 | 我就觉着快递箱这个比喻太方便，太形象了，所以我坚持这么叫了。咱们继续说快递箱，然后我们开始想象，页面是一个大屋子，我们从左上角开始往下一个挨一个的码纸箱，就码一层，那肯定就按着顺序排过来了，这连小孩子过家家都会玩。这个叫做文档流，别管他啥意思，记住这个比方和对应的名词就 OK ，以后我们就可以交流。我总得告诉你这是扳手，那是锤子，以后着急的时候就可以跟你吼：“小心锤子别砸了你的手！”，一下都明白，否则我跟你喊：“小心那个一头大一头小，丁字形的，用来砸东西的，铁的硬邦邦的玩意，别砸……”你已经砸完了，但至于他为什么叫锤子，你管呢！
13 |
14 | 前边我们做了一个 #nav 的快递箱，还做了一个 #logo 的快递箱。都设置了他们的尺寸，一个宽度，一个高度。这就是设置了两个快递箱的尺寸啊。一个长一个宽，别问我厚度，这里用不着。然后我们想啊，#nav 我们设置了一个背景，但是他里面装的东西（另一个箱子 #logo）我们却可以看到，这说明什么？我们设置的背景是箱子底的颜色，而箱子的顶是透明的，你想想是不是？顶不透明我们就看不到里边了啊，背景色又填满了整个箱子，却遮不住箱子里的东西，那它就是底面的颜色喽。
15 |
16 | 好了，我们再考虑啊，你说 #logo 我们没设置背景吧，可是为啥底下不是白色啥的？确是套在他外边的箱子的背景色（底面颜色）？这只能说明一个问题，div 默认的背景色是透明的，也就是这个快递箱啊默认顶面和底面都是透明的，然后我们看到另外四个面（上下左右）了么？，好了他们也是透明的！
17 |
18 | 然后我们再想大家都收过快递，易碎品什么的是只用一个纸箱装了就行么？不是吧，总是要做防护措施的，防护措施不外乎两种：1、 箱子里面加上填充物；2、箱子外面裹上汽泡纸。那么填充物使得我们的货物需要一个比他原本体积更大的箱子，将将好装下货物的箱子还怎么放填充物，必须换大箱子，结果你收到快递，呀！这东西这么大？结果是里边放了填充物。那么这个填充物就是**内补**，在箱子里边补充一下嘛～
19 |
20 | 然后我们再说外面裹的泡泡纸，裹上泡泡纸会影响箱子的大小么？不会，箱子还是那么大，但是裹上泡泡纸他们整体占得面积就大了，这个纸箱和那个纸箱之间就产生了距离，这个距离是多少？就是一个的泡泡纸厚度加上另一个泡泡纸的厚度。对吧？这就是**外补**。
21 |
22 | 再想，假如无论填充物还是泡泡纸，都是透明的，就是看不到啊，当然东西还是存在的。那么我们加了填充物（内补）之后我们看到的是什么？货物和箱子之间保持着一定的距离，对吧，因为有看不见的填充物在那里呢。加了泡泡纸（外补），我们看到什么？箱子之间产生了距离，因为看不见的泡泡纸在他们之间呢。
23 |
24 | 这样我们就理解了外补和内补。我们说箱子的底面可以定义颜色，那么周围的四面（上下左右）可不可以定义呢？可以啊，可以定义颜色还可以定义厚度呢，原本这个箱子的四壁是没有厚度的，存在，但是厚度是 0 ，能理解吧，就是文学中的薄若蝉翼的意思，有，但是看不到，因为太薄了，还是透明的。所以当我们设置了它的厚度和颜色我们就可以看到他了吧？这就是**边框**。
25 |
26 | 那么现在这个模型建立起来了，一个盒子从外往里依次是：
27 |
28 | > 泡泡纸 —— 外补
29 |
30 | > 纸箱壁 —— 边框
31 |
32 | > 填充物 —— 内补
33 |
34 | > 易碎品 —— 内容
35 |
36 | 到这里都很好理解吧，说不好理解的那个去首富家多买点东西就懂了。
37 |
38 | 这比方打完了，你可得记住，这是理解后面的关键哦！我从来不说代码是关健，你理解他才是关键，代码是可以查的，但是怎么理解他，然后能用他，这是你该掌握的。
39 |
40 | 然后说 CSS 属性：
41 |
42 | > 内补：padding
43 |
44 | > 外补：margin
45 |
46 | > 边框：border
47 |
48 | 这三个属性有些共同点，比如你给他们赋予一个数值，那就是四边都一样，都是这个数值，这很好理解。平均主义，你有我又大家有。
49 |
50 | 但是事实上他们都涉及了四个方向，其实四个方向可以分别设置的，那么我们给四个数值的话，比如： `margin
51 | ：1px 2px 3px 4px;` 看到啦，用空格分隔数值，这四个数值怎么对应方向的呢？记住啊，页面是从上开始写，所以我们从上面开始，顺时针旋转，于是就是：上、右、下、左。
52 |
53 | 这也很好理解，按着顺时针顺序挨个赋值而已，但是要是遇到变态呢，我就写了俩数值，那就是第一个指的是上边和下边都是这个数值，第二个值指的是左边和右边都是这个值。这个是平均分配外加面对面分果果……反正总而言之还是可以理解的。
54 |
55 | 但是我要是就给三个数值呢？？？
56 |
57 | 太变态了！挨个分，上边，右边，下边，都有了，左边问啊：“那我呢？那我呢？”你也不好意思说没他的份啊，所以就让他跟对面的共用一个数值算了。所以三个值代表：上、左右、下。
58 |
59 | 然后呢，其实这三个属性都是简写属性，就是把几个属性合在一起写的。要是分开写呢？比如：
60 |
61 | ```css
62 | margin-top:1px;
63 | margin-right:2px;
64 | margin-bottom:3px;
65 | margin-left:4px;
66 | ```
67 | 四个方向可以这样分别定义，上面的四个方向分别是上右下左。当然，border 的定义要略复杂一些，因为他不光需要一个宽度，还需要边框的样式和边框颜色的定义。这些我们留在以后再说。
68 |
69 | 现在在回到本章的开头，想想我们其实是要做什么呢？两边留上一些空白，对吧，但是这些空白还要有背景，其实就是在 #nav 元素的里边对不对？那就是给 #nav 加内补喽～
70 |
71 | 你说好像我给 #logo 加上外补也能达到相同的效果，但是你忽略了一个隐含条件：我们说左边需要空白，其实如果右边有内容的话你会说右边也需要留出空白的，而加在 #logo 上的属性显然不能满足这一要求。只有给 #nav 这个盒子左右两侧放上填充物才能比较针对性的解决上述问题。
72 |
73 | 好了，我们废话了将近三千字，只是为了得出一个结论，我们应该给 #nav 加上如下属性：
74 |
75 | ```css
76 | padding:0 30px;
77 | ```
78 |
79 | > **本章学习卡片：[卡片 18](http://coffee.zji.me/scard.html?name=chapter18)**
80 |
81 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/18.zip)**
82 |
83 | ---
84 |
85 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
86 |
87 | > **alay9999@163.com （刘源）**
88 |
89 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
90 |
91 | * 主站（2018 新版上线）：https://dmnydn.com/
92 |
93 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter19.md:
--------------------------------------------------------------------------------
1 | 第十九章 导航条（四）
2 | ===
3 |
4 | 你说，上节课的都听明白了，就是不懂。
5 |
6 | 这很正常，现在我们来说一个你以后在网页前端道路上不可或缺的助手——“审查元素”（这是 Chrome 浏览器里的名字，而 Firefox 里叫做“查看元素”）。
7 |
8 | 其实很简单，你对着你要研究的元素右键，然后选择审查元素就行了。
9 |
10 | 然后我们就看到一个如下图的界面（Firefox 中类似）：
11 |
12 | 
13 |
14 | 左下方是网页当前用来显示的代码，先记住我这个说法，到后面我们研究 JavaScript 的时候你就明白我为什么这么说了。
15 |
16 | 现在深灰色的那行就是我们刚才右键的元素所对应的代码。而右侧上边的内容就是这个元素所对应的 CSS 代码（只是与这个元素有关的部分哦）。
17 |
18 | 往下看，右下方那个黄色绿色蓝色一层套一层的方块，就是当前元素的盒模型了，结合上节课的内容，其实你稍微认真看下就能理解了。
19 |
20 | 然后如果你觉得 CSS 一套一套的看着眼晕，就点击那个 computed（计算后） 标签，意思就是把重复的合并，未生效的省略……之后，当前元素实际的有效的 CSS 属性和对应的值。非常方便。
21 |
22 | 我们再回到左边，用鼠标在代码上滑动（不是点击，也不是拖动），你会看到一个蓝色的条着重显示你鼠标指向的代码。同时上面网页上的某些元素会被用特殊的颜色标识出来。所以现在你指哪行代码，那行代码所对应的元素就会在页面上标记出来，而且你注意他的标识颜色，与右下方盒模型的颜色是对应的。这样哪里是外补哪里是内补就一目了然了。
23 |
24 | 然后说说那些小图标，左上那个小手机的标志是移动设备视图，现在我们还用不上，将来我们讲响应式网页的时候会用到。右边齿轮是设置，叉是关闭。那个一半黑一半白的图标是说现在这个面板所处的位置，你可以点击它调整位置看看效果，反正再找相应的图标点击还能回来，怎么方便怎么用就是了。
25 |
26 | 这个简单吧，你看我就这么几句话，你还都能听得懂，就把我们眼下用的到的都讲清楚了。来给你讲个案例让你了解他的强大。
27 |
28 | 我们知道背景图片是不可以右键另存为的，但是有的时候图片真的很美，怎么把他们搞下来呢？我们打开 500px 来做实验，在它的首页大图上右键，然后鼠标在代码上上下滑动找那行可以让蓝色正好覆盖整整个图片的代码，其实也就是说这个元素的内容部分正好和图片一致，点击这一行，然后看右侧的 css ，上下滚动寻找 background 后面的网址，鼠标放上去看看，会有图片缩略图，基本就是这张图片了。如果没找到，那么在上一层下一层元素查查也基本差不多了。
29 |
30 | 
31 |
32 | 
33 |
34 | 你说页面不允许右键？那你按一下 F12 键试试看。当然了，在这里还是要强调一下，技术无罪，但你得用来干正事，反正白茶同学说过：
35 |
36 | > 长期盗图，对投胎不好！
37 |
38 | 顺便说一句，如果你在我下方所列出的四个站点之外看到本教程，基本上他们是盗版的！！！
39 |
40 | 好了，回归主题，有一句话说能看到就能改！（来自某玄幻小说）用来形容这个工具还是十分恰当的，反正那些代码想改哪里双击就是了（你别很实在的双击里面链接就好）。然后尽情的修改和测试吧～～
41 |
42 | **这东西实在太过强大和有用，建议每天玩一会，玩懂他！**
43 |
44 | > **本章学习卡片：[卡片 19](http://coffee.zji.me/card.html?name=chapter19)**
45 |
46 | ---
47 |
48 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
49 |
50 | > **alay9999@163.com （刘源）**
51 |
52 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
53 |
54 | * 主站（2018 新版上线）：https://dmnydn.com/
55 |
56 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter2.md:
--------------------------------------------------------------------------------
1 | 第二章 扯扯学习方法
2 | ===
3 |
4 | 你说，呵呵，从小学三年级老师就一直念叨这个，现在你又扯这个，有意思么？
5 |
6 | 要是我跟他们说的一样肯定没意思啊，但是要是不一样呢？
7 |
8 | 1. 不求弄懂，但要坚持；
9 | 2. 不求记住，但要勤用；
10 | 3. 不求理论，但要效果；
11 | 4. 多去实践，然后搜索，最后才是提问。
12 |
13 | 嘿嘿，我这要求够低了吧？跟老师那个考试要考、考试不考的学习方法大不一样哦～现在我来说说都是啥意思：
14 |
15 | 一、不求弄懂，很多新手上来犯的第一个错误就是：总想把今天学的东西弄懂了。我跟你说啊，这事不大可能，就好像说你现在很饿，我给了你两粒旺仔小馒头，你吃了，没啥效果，你就因此断言，这东西不可能吃饱！这挺搞笑的吧，你吃五斤试试。现在的问题是，你刚学了一点点（吃了一两个小馒头），就问怎么搞不懂（为啥吃了没感觉）？这不是搞笑么，想学懂（吃饱）继续学（吃）就是了。当然了，因为这个原因而半途而废也是挺可惜的，所以说要坚持，这个跟毅力无关啊，只是你没吃饱呢就继续吃，别把那三千克装的小馒头往边上一扔，高喊着：这东西根本吃不饱！只要吃自然有吃饱的时候，这没什么难度，只是要意识到这个问题才行；
16 |
17 | 二、不求记住，一说代码就死记硬背，或者说自己英文不好，学这个肯定不容易……碍的着么？HTML 里常用的单词也就那么十几个吧，还有好几个就是一个字母的，CSS 里常用的兴许有三十个？就再算上 JQ，也就再加上十来个。这么看大概五十单词很难么？而且我们不是闭卷考试的考场，你记不住可以查啊，你要做的就是知道都有些什么功能，我们用手机，其实也是就大概知道有哪些功能，至于在哪里怎么操作其实很多记不清的，用的时候拿着手机找呗，用多了居然就能背下来了，比如当年拿着诺基亚在桌肚里盲打，谁也没觉得这有多难。用的熟了就是自然而然的事情了，那么记得多用用它们哦，至于背，快算了吧，我到现在还是边查边写的，一样写的很开心。
18 |
19 | 三、我不跟你谈理论，你也别跟我纠结这些理论。去做，先设法达到目的，用的多了就该总结出自己的一套经验来了，然后对照那些理论看看，或者英雄所见略同，或者恍然大悟茅塞顿开，这才是理论的正确用法。否则你开始看这些理论却有完全搞不懂他们，留着做什么？死记硬背应对应试教育么？
20 |
21 | 四、看懂了，不算会了，因为你未必做的出来；做出来了，不算会了，因为你未必可以解决问题。出问题了，要开心啊，这才是真正学习的机会，遇到问题解决问题才是真正的硬实力。会开车不算什么，堵车了、车坏了、车轮陷住了……你都能应付的了才是真的老司机。所以多动手做，多去经历问题，是极好的学习方法，遇到问题，你要去思考他的原因，进而猜想他的解决办法，然后验证，如果不行就再猜想，再验证。
22 |
23 | 自己实在无从下手了，那就搜索吧，你遇到的问题基本前人都遇到过，那么搜索一下，一般都是会有解决方案的。只有当你连搜索的关键词都想不出来的时候才是发问啊，而且问出了结果还要返回来验证和总结。
24 |
25 | 这里再说一句，遇到别人有问题，而你觉得很简单的时候你回答他对你是有好处的：我许多次以为一个很简单的问题，但是真到了自己去描述他的时候才发现原来还有很多自己意想不到的细节，然后启发自己很多东西，其实回答别人的问题也是一个自我学习的过程。
26 |
27 | > **本章学习卡片：[卡片 2](http://coffee.zji.me/card.html?name=chapter2)**
28 |
29 | ---
30 |
31 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
32 |
33 | > **alay9999@163.com （刘源）**
34 |
35 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
36 |
37 | * 主站（2018 新版上线）：https://dmnydn.com/
38 |
39 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter20.md:
--------------------------------------------------------------------------------
1 | 第二十章 导航条（五）
2 | ===
3 |
4 | > 如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/
5 |
6 | 现在来写导航项。其实导航是有专门的标签的 `` 但是这个特性比较新，IE9 才开始支持，所以很多人还是习惯用列表来写导航，这里我们也使用列表，为的是你以后看到各种代码都能看得懂，因为 nav 标签相对于列表还是比较简单的。
7 |
8 | 那么先来说说列表哦：
9 |
10 | ```html
11 |
12 | - 列表内容
13 | - 列表内容
14 | - 列表内容
15 |
16 | ```
17 |
18 | 效果如下：
19 |
20 |
21 | - 列表内容
22 | - 列表内容
23 | - 列表内容
24 |
25 |
26 | 如上叫做无序列表。
27 |
28 | ```html
29 |
30 | - 列表内容
31 | - 列表内容
32 | - 列表内容
33 |
34 | ```
35 |
36 | 效果如下：
37 |
38 |
39 | - 列表内容
40 | - 列表内容
41 | - 列表内容
42 |
43 |
44 | 如上叫做有序列表。
45 |
46 | 你说这跟导航项一点都不像啊，但是在逻辑上还是很像的，都是列出来一些内容。既然我们对于前边的编号圆点什么的完全不在乎，那么我们就选择无序列表好了，那么 html 代码很简单的，几乎跟上面一样
47 |
48 | ```html
49 |
50 | - 首页
51 | - 下载
52 | - 特点
53 | - 关于
54 |
55 | ```
56 |
57 | 这个样子没有问题，挺容易看懂的，我们把他加在 #loge 的 div 后面来看看效果。
58 |
59 | 
60 |
61 | 你说，哼，幸亏我已经不再相信你了，否则又得失望。本来想要跟 logo 在一排的效果（要不那背景留着干嘛用？？）结果又做出来一个奇葩的造型。
62 |
63 | 我跟你说啊：**想横排，加浮动！**你看我一步步把它搞上去哦！在 CSS 里加上
64 |
65 | ```css
66 | #nav-items .nav-item {
67 | float:left;
68 | }
69 | ```
70 |
71 | 就是给我们的每一个导航项加上了一个向左浮动的属性，我们只做了这一点，来看看什么变化哦
72 |
73 | 
74 |
75 | 这个……好像是到一行了，但是有点乱，看不好效果，主要是那个圆点的影响，那我们去掉圆点，把刚才那部分 CSS 再加上一个属性：
76 |
77 | ```css
78 | #nav-items .nav-item {
79 | float:left;
80 | list-style: none;
81 | }
82 | ```
83 |
84 | 就是列表的样式：无。再看效果。
85 |
86 | 
87 |
88 | 呀，果然是一排相邻的元素，一加上浮动就从竖着排列变到横着排了。那么眼下呢，到这里你只要记住把想要横排的东西都加上浮动就好。如果你想知道为什么，那我们需要继续一下我们快递箱的故事，有些绕，这个故事晚些时候我会发布在我们交流平台的“咖啡俱乐部”频道内（就是我们的 VIP 频道）。
89 |
90 | 现在我们就先记住这个结论，然后再实践中去慢慢体验他的用途。然后我们做个练习，你看 logo 和导航项这两部分还是纵向排列的呢，那我们来给他俩也加上浮动试试看。
91 |
92 | 为了防止你搞乱了，我在这贴一下完整的 CSS 代码：
93 |
94 | ```css
95 | /* 这是我写的第一个 CSS 文件，内心十分的激动，在这心潮澎湃之余，我想到了一个真理 —— 稻米鼠真帅！ */
96 | html, body {
97 | margin:0;
98 | padding:0;
99 | }
100 | #nav {
101 | width:100%;
102 | height:50px;
103 | background:#F3F3F3;
104 | padding:0 30px;
105 | }
106 | #logo {
107 | float: left;
108 | }
109 | #logo a {
110 | color:#333;
111 | text-decoration: none;
112 | font-size:24px;
113 | font-weight: 700;
114 | line-height: 50px;
115 | }
116 | #nav-items {
117 | float: left;
118 | }
119 | #nav-items .nav-item {
120 | float:left;
121 | list-style: none;
122 | }
123 | ```
124 |
125 | 再来看看效果：
126 |
127 | 
128 |
129 | 那么到了这里貌似虽然难看些，但是我们把位置都搞对了。下节课我们来试着给导航项加链接哦～～
130 |
131 | > **本章学习卡片：[卡片 20](http://coffee.zji.me/card.html?name=chapter20)**
132 |
133 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/20.zip)**
134 |
135 | ---
136 |
137 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
138 |
139 | > **alay9999@163.com （刘源）**
140 |
141 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
142 |
143 | * 主站（2018 新版上线）：https://dmnydn.com/
144 |
145 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter21.md:
--------------------------------------------------------------------------------
1 | 第二十一章 导航条（六）
2 | ===
3 |
4 | 上次我们把导航条写了一个雏形，就是看起来还行（这么难看居然说还行……我眼瞎）。我们的计划是现在给它加上链接，让他成为一个能干活的导航。
5 |
6 | 加链接这种事情对于现在的我们来说没什么难度了吧。如果你坚持做练习的话一定觉得小事一桩了。但是我们现在遇到一个问题：我们要给谁加链接？
7 |
8 | 这还有疑问吗？有！我要不说肯定会有人这么写：
9 |
10 | ```html
11 | 这是错误的写法
12 | ```
13 |
14 | 为啥错啦，因为你女盆友用的 IE6 浏览器不支持，这个理由够用吧～
15 |
16 | 可是你不依不饶啊，那为啥错了？你先记着，a 标签里面的元素只能是文字和图片哦，后面我们再去慢慢研究他。
17 |
18 | 现在我们把这个修改一下，于是我们的导航代码变成了：
19 |
20 |
21 | ```html
22 |
28 | ```
29 |
30 | 大家说，你这链接地址好奇特，咋不是个网址啊，咱说了，这个问题留到后面处理，先别着急。咱们先来看看视觉效果。
31 |
32 | 
33 |
34 | 你说你开始怀疑人生，至少是怀疑我的教程。你等等，你究竟觉得有啥不好的？文字的颜色和下划线的问题我们讲过怎么解决了吧？
35 |
36 | 看看前边的这部分 CSS ：
37 |
38 | ```css
39 | #logo a {
40 | color:#333;
41 | text-decoration: none;
42 | font-size:24px;
43 | font-weight: 700;
44 | line-height: 50px;
45 | }
46 | ```
47 |
48 | 把它复制一下，修改成：
49 |
50 | ```css
51 | #nav-items .nav-item a {
52 | color:#333;
53 | text-decoration: none;
54 | font-size:16px;
55 | line-height: 50px;
56 | }
57 | ```
58 |
59 | 注意选择器，现在是三层选择器了，下边的属性都看得懂了，因为前边说过了，那么来看看效果哦：
60 |
61 | 
62 |
63 | 文字样式终于看的过去了，但是这位置……现在我们开始正式研究这个问题了哦～～强迫症的同学已经期待已久了吧？（嘿，别拍我，尊师重道！）
64 |
65 | 右键“审查元素”（Firefox 里是“查看元素”，以后我不说了），来看看 #nav-items 这个元素哦～
66 |
67 | 
68 |
69 | 看到啦，他左侧有个 40px 的内补（图中蓝紫色的位置），上下各有 16px 的外补（图中黄色位置）。你望着左上角问我：“哪有数值？”来，转头，看看右下角的盒模型。
70 |
71 | 这些属性是我们设置的吗？我们查了一下 CSS 文件，发现不是，那么他又是浏览器给的默认属性。这些默认属性是我们想要的吗？内补好像有用，因为我们的导航项要与 logo 拉开一些距离。但是上下的外补明显不是我们想要的。所以去掉他。
72 |
73 | ```css
74 | #nav-items {
75 | margin:0;
76 | }
77 | ```
78 |
79 | 看看 CSS 里已经定义过 #nav-items 了，所以给他的大括号里追加上 `margin:0;` 就好了。然后来看下一个问题：
80 |
81 | 
82 |
83 | 现在位置没问题了，但是你看每个导航项的可点击区域（就是你可以点击到这个链接的范围）才这么大（上图蓝色的区域），你觉得体验会好么？请各位读者瞄准了点击，否则后果自负～～
84 |
85 | 这肯定是不行的，你说，好办，给 a 加上宽高，你可以试试看，我猜他不行啊，为啥不行？在这里我们要引入一个新的属性了。`display`，显示，这个元素怎么显示呢？
86 |
87 | 先说一下他的常用属性值：
88 |
89 | > none 此元素不会被显示。
90 |
91 | > block 此元素将显示为块级元素，此元素前后会带有换行符。
92 |
93 | > inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
94 |
95 | 果然除了第一句，剩下的我也没看懂呢，还是用我的话来说吧，block 是个块，就像 div ，是个已经打包好了的箱子，很乖，说什么听什么，好处理；inline，字面是在行里边，就是跟文字一样的特性，没打包的一堆东西，跑来跑去的，不很听话，你跟他说宽高内补外补的他跟你假装没听懂。剩下的问题咱们在使用中慢慢体会就好。
96 |
97 | 我们想想啊，一段文字加上链接，如果一行没显示下，是不是会分成两行显示？这个凭经验我们也知道——是的。于是链接跟文字特性很像，那他就是内联元素（inline），所以就解释了为啥给他宽高他不听话了。可是不听话不行啊，咱们要让他听话的，所以要把他设置为 block，所以给 a 填上相应的属性：
98 |
99 | ```css
100 | #nav-items .nav-item a {
101 | color:#333;
102 | text-decoration: none;
103 | font-size:16px;
104 | line-height: 50px;
105 | display: block;
106 | height: 50px;
107 | }
108 | ```
109 |
110 | 顺便高度 50px 也没有异议，那么宽度……你想过没有，要是出来一个导航项是五个字，你把它和两个字的导航项设置一样的宽度，他能好看吗？所以实际上我们要设置的是什么？是文字之间的间隔，对不对？只要两个导航项之间的文字间隔是一致的，就会显得很协调。这肯定就是内补或者外补了，现在的问题就是：加给谁？加什么？
111 |
112 | 告诉你啊，还加给 a ，加内补，为啥呢？无论是内补还是外补，无论是加给 a 还是加给 li 在外观上都是没啥区别的。但是 a 的可点击范围有区别。你说对对，还有这一茬呢，那加给 a 就对了，为啥是内补？简言之对我们点击进行反应的是箱子，而与箱子外面的泡泡纸无关，外补不算箱子的范围，但是内补算。所以我们给一个巧克力豆周边加上大量的填充物，然后弄个大箱子装就可以说是一大箱巧克力豆了。但是要是一个小盒子，装上巧克力豆再裹上半米泡泡纸，你说是一大箱就说不过去。现在需要箱子有一定的体积就往里塞喽～
113 |
114 | ```css
115 | #nav-items .nav-item a {
116 | color:#333;
117 | text-decoration: none;
118 | font-size:16px;
119 | line-height: 50px;
120 | display: block;
121 | height: 50px;
122 | padding: 0 20px;
123 | }
124 | ```
125 |
126 | 再来看看效果：
127 |
128 | 
129 |
130 | 是不是看起来舒服多了？下一节我们继续……写导航。
131 |
132 | > 特别补充说明：本教程目前的 CSS 书写并不十分复合规范。
133 |
134 | > 不是本人不知道规范，而是为了便于理解循序渐进，
135 |
136 | > 现在是根据需求直接追加，只求达到效果，暂时不考虑细节。
137 |
138 | > 等后面讲的差不多了再作规范，要不然都没认识几个 CSS 属性，我说谁先谁后你们也搞不明白。
139 |
140 | ---
141 |
142 | > **本章学习卡片：[卡片 21](http://coffee.zji.me/card.html?name=chapter21)**
143 |
144 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/21.zip)**
145 |
146 | ---
147 |
148 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
149 |
150 | > **alay9999@163.com （刘源）**
151 |
152 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
153 |
154 | * 主站（2018 新版上线）：https://dmnydn.com/
155 |
156 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter22.md:
--------------------------------------------------------------------------------
1 | 第二十二章 导航条（七）
2 | ===
3 |
4 | 现在我们来学着解决问题哦，我们还有一个遗留问题没有解决，就是页面底下的滚动条。你肯定又说了：“你还是知道解决啊？你不知道我都看着碍眼好多章了么？”这个不怨我啊，你们看看我的截图，我的系统是超细滚动条，所以我看着一点也不碍眼啊！（好了，可以扔砖头了，我好捡回家盖房子娶老婆……）
5 |
6 | 方法很简单啊，右键审查元素，然后鼠标在代码里划过每个元素，看看最可能是哪个元素引起的问题。
7 |
8 | 然后我就觉得最可能是这里出了问题，为啥啊，这么多元素，就它的宽度比我窗口宽度还大（我当前窗口的宽度为 800px）。
9 |
10 | 
11 |
12 | 你看，其实查找问题也未必很难，那么究竟是出了什么问题呢？这里我们猜猜啊，我们知道他如果遵循我们设置的宽度的话，那么他的宽度应该是 100% ，当前也就是 800px（body 元素当前的宽度值）。再看看我们加的内补，左右各 30px。这要是 `800+30+30=860` ，正好是当前元素的宽度。这应该就是问题的原因了。
13 |
14 | 那么这里涉及到两个问题。第一个，我们设置的宽高到底是什么？其实我们设置的宽高，不是元素边框（边界）的宽高，倒更像是元素内可用面积的宽高。就好像我们说的不是快递箱的尺寸，是他加上填充物之后还能装多大面积的东西，理解没？
15 |
16 | 所以元素的实际尺寸（从边框开始测量），实际上是设置的宽高加上内补的尺寸。就是快递箱的尺寸等于里面的东西再加上填充物的尺寸。**说简单点就是箱子里填充物（内补，padding）的多少会影响箱子的大小（元素的实际面积），当然外面裹多少泡泡纸（外补，margin）都不会影响箱子的大小**。
17 |
18 | 这就理解了，那么内补我们并不想去掉，因为想着在左右留点空白用的。看来只能动宽度了。那宽度应该改作多少？其实去掉就可以了，因为**块元素(display:block)不浮动的情况下默认填满一行**。（这是第二个问题，详见 VIP 章节之 关于浮动的故事）
19 |
20 | 于是，去掉了 #nav 的宽度之后，我们获得了一个虽然简陋，但是确实看得过去的导航条。
21 |
22 | 
23 |
24 | 回想我们学了这么多节课，其实主要在说一些基本的 CSS 知识了，真正看我们写下的代码却没有几行，再看看代码，差不多也能看懂一二了，好像也不过如此。
25 |
26 | 这是一个完整的导航了？当然不是，不过毕竟从无到有，从难看到现在看的过去，我们完成了一轮创造的过程，算得上是我们学习过程中一个重要里程碑！
27 |
28 | 如果到这里你基本都明白了，那么我来带着你做点坏事哦，挺简单的，我们把当前的 #nav 部分的 Html 代码复制一遍，修改一下 id（id 不能重复啊，而且我们也需要用他进行一些区分），这么说有点抽象，来看一下我改过之后的代码（我只粘贴 body 标签之间的喽～）
29 |
30 | ```html
31 |
46 | ```
47 |
48 | 第二个 ul 标签部分是新加入的内容，这挺常用的哈，虽然其实这次我们用不到，但是玩玩还是无妨的。再简单修改一下 CSS，下面是原来的 CSS 中的一部分
49 |
50 | ```css
51 | #nav-items {
52 | float: left;
53 | margin:0;
54 | }
55 | #nav-items .nav-item {
56 | float:left;
57 | list-style: none;
58 | }
59 | #nav-items .nav-item a {
60 | color:#333;
61 | text-decoration: none;
62 | font-size:16px;
63 | line-height: 50px;
64 | display: block;
65 | height: 50px;
66 | padding: 0 20px;
67 | }
68 | ```
69 |
70 | 现在第一条 `#nav-items` 不用动，但是我们要照猫画虎的给新添加的 `#nav-items-r` 加一条，只是改作向右浮动。下边两条现在明显只对第一个 ul 里的内容起作用，但是我想应用到整个 `#nav` 部分，所以把选择器中的`#nav-items` 换成 `#nav`，来看修改后的结果：
71 |
72 | ```css
73 | #nav-items {
74 | float: left;
75 | margin:0;
76 | }
77 | #nav-items-r {
78 | float: right;
79 | margin:0;
80 | }
81 | #nav .nav-item {
82 | float:left;
83 | list-style: none;
84 | }
85 | #nav .nav-item a {
86 | color:#333;
87 | text-decoration: none;
88 | font-size:16px;
89 | line-height: 50px;
90 | display: block;
91 | height: 50px;
92 | padding: 0 20px;
93 | }
94 | ```
95 |
96 | 去看看效果吧～
97 |
98 | 
99 |
100 | 于是我们得到了一个有左右两部分导航的导航条，**现在我希望大家回过头去对整个导航部分认真的复习一下，免得学到后面把前边的忘记了，那样就容易混淆了。另外一定记得每一节课都要跟着做哦～～**
101 |
102 | 下一节课我们来美化我们的导航条。
103 |
104 | > **本章学习卡片：[卡片 22](http://coffee.zji.me/card.html?name=chapter22)**
105 |
106 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/22.zip)**
107 |
108 | ---
109 |
110 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
111 |
112 | > **alay9999@163.com （刘源）**
113 |
114 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
115 |
116 | * 主站（2018 新版上线）：https://dmnydn.com/
117 |
118 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter23.md:
--------------------------------------------------------------------------------
1 | 第二十三章 导航条（八）
2 | ===
3 |
4 | 我们来做一些简单的美化工作，本着过犹不及的原则（其实是我懒），我们就做点很简单的东西啊，比如：你看两个导航项之间的分隔不明确是吧，我们来加个分割线啊，挺简单的事，给 `#nav .nav-item` 选择器下加上 `border-right:1px solid #DDD;` 就可以了，就是每个导航项的右侧边框是一像素粗细，实线（solid），颜色是 #DDD。看到啦，边框就这么设置，简单吧～
5 |
6 | 然后为什么只设置右边的？大家想想就明白啦，每个导航项的左边都和另一个导航项共用一条线啊，这个可以理解吧。但是这里还是多了一个小麻烦哦，就是每组导航项的最后一个，他右侧的边框没人来共用，孤零零，显得好多余啊～
7 |
8 | 所以加分割不难，而去掉多余的分隔却有点麻烦。这里有两种方法可以去掉分隔，但是在这之前我想我要先说一下 CSS 的优先顺序。
9 |
10 | 首先我们知道浏览器会给某些元素默认的样式，这个优先级最低，因为你做的任何与之冲突的自定义都会将它覆盖掉。你看前边我们遇到默认样式的问题就直接再定义一下就好了。
11 |
12 | 如果在 CSS 里遇到定义重复、冲突的情况，则后面的定义覆盖前面的定义。比如：
13 |
14 | ```css
15 | #miao {
16 | width:300px;
17 | }
18 | #miao {
19 | width:400px;
20 | }
21 | ```
22 |
23 | 那么最终 #miao 的宽度是 400px，因为后面的覆盖前面的。
24 |
25 | 在 Html 文件里，link 一个 CSS 文件也就相当于把这个 CSS 文件的内容完全插入在那个位置，然后依旧是后面的定义覆盖前面的。这也就不难理解如果我们同时引入两个 CSS 文件，那么后面的文件优先级要比前面的文件高。
26 |
27 | 进而的，如果我把 style 标签写在页尾（其实这个标签不止可以出现在页头，它可以出现在几乎任何位置，只是不推荐罢了），那么他的优先级肯定是蛮高的，因为它在所有 CSS 定义的最后了。
28 |
29 | 但这还不算什么，元素的内联样式（就是直接写在元素标签里的样式）的优先级高于前边所有。
30 |
31 | 哇，好高哦！但是还可以更高一些，CSS 属性值末尾加上 `!important` 的优先级高于上面所有，比如：
32 |
33 | ```css
34 | #miao {
35 | width:120px !imporant;
36 | }
37 | ```
38 |
39 | 这种写法可以覆盖元素的内联样式，因为他的优先级太高，非十分必要请不要使用！
40 |
41 | 但是还有木有优先级更高的？有！就是浏览器的扩展，他们的优先级高也只是基于上面的理论，将 CSS 写到页尾或者写成内联等，但是更可怕的是他们权限也是很高的，高到可以直接修改页面元素，**所以我们测试页面的时候要禁用所有扩展，以避免不必要的干扰。**
42 |
43 | 我忽然说这个你应该已经猜到了结局：我们只要把最后一个 li 元素的样式覆盖一下就好。没问题，这个有两种方式，一个是给最后的 li 都加上一个相同的 class，然后定义一下这个 class，演示如下（我只写关键部分的代码）：
44 |
45 | ```html
46 |
52 |
56 | ```
57 |
58 | 注意一下：`class="nav-item last-item"` 的写法，空格分隔两个 class，也就是这个元素同时具有两个 class ，同时享受他俩的定义，还真是幸福呢～
59 |
60 | ```css
61 | #nav .last-item {
62 | border:none;
63 | }
64 | ```
65 |
66 | 这个做法很容易理解，当然了，要注意新加的这部分 CSS 的位置哦，想想应该谁覆盖谁？
67 |
68 | 但是我很懒，懒得没边，再去加一个 class 倒是不是大事，但是我以后追加导航项是不是还要做修改，特别注意把 `last-item` 这个 class 加给最后一个导航项才对？你说这是多麻烦啊～
69 |
70 | 所以我想 CSS 的选择器能不能直接表达最后一项？能，真的能！，来看我的写法（Html 先复原，这次不用动他们）：
71 |
72 | ```css
73 | #nav .nav-item:last-child {
74 | border:none;
75 | }
76 | ```
77 |
78 | 用冒号连接的叫做伪类，就是本来没有这个类，但是我们利用一定的规则去选择这个元素。现在很明白了，最后一个不加边框啊，于是我们的效果达到了。
79 |
80 | 
81 |
82 | 但是你没有疑问么？我们的选择器好像是说的 `#nav` 里面的 最后一个 `.nav-item` 啊，怎么有两个 li 都没有边框了？不应该只是最后一个“注册”自己没有边框吗？
83 |
84 | `:last-child` 这个伪类的意思是“**属于其父元素的最后一个子元素**”，很拗口是吧，打个比方你就懂了：俄罗斯小学开家长会（中国不行，都是独生子女，俄罗斯兄弟姐妹多一点），一个家长带着他家几个孩子，如此这般的家庭站满了操场。校长在上面说一至三年级的学生（这个相当于选择器）每家里那个最小的（:last-child 是每家最小的那个），上台来。这时候就要符合上面两个条件了，首先要是一到三年级的学生，然后如果一家有五个符合这一条件，那就只让最小的那个上去。能理解吧，你说我爸爸他们哥仨，我们兄弟姐妹一十八个是一个爷爷的，我们十八个人是不是只出最小的那个？这跟爷爷没关系，只看父母（父辈元素），父母相同的孩子里出最小的一个。
85 |
86 | 所以 li（.nav-item）的父元素是 ul，ul 他们家里中的最后一个，那么现在两个 ul ，当然也就出来两个最后一个。
87 |
88 | 大家好好看看上面的比喻，搞清楚 `:last-child` 哦，下一节我们学习新的伪类～
89 |
90 | > **本章学习卡片：[卡片 23](http://coffee.zji.me/card.html?name=chapter23)**
91 |
92 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/23.zip)**
93 |
94 | ---
95 |
96 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
97 |
98 | > **alay9999@163.com （刘源）**
99 |
100 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
101 |
102 | * 主站（2018 新版上线）：https://dmnydn.com/
103 |
104 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter24.md:
--------------------------------------------------------------------------------
1 | 第二十四章 导航条（九）
2 | ===
3 |
4 | 很多同学问，你看他们那谁家的小谁做的那个导航，鼠标一滑过还有变化，他们怎么做的？
5 |
6 | 那今天我们来讲一些更好玩的伪类，首先是 `：hover`，这个讲的是某元素被鼠标滑过的时候的样式。当然如果不定义的话就是没有变化喽，就像我们前边写的那样，但是如果我定义一下呢？
7 |
8 | ```css
9 | #nav .nav-item a:hover {
10 | background: #DDD;
11 | }
12 | ```
13 |
14 | 然后我们去看看鼠标划过的效果：
15 |
16 | 
17 |
18 | 看到变化啦，嗯，图上没有鼠标指针，但也猜得出来，我的鼠标放在下载上他的背景色发生了变化。你看他的文字大小啊、颜色啊，什么什么的其他东东是不是都没有变化？所以 :hover 是基于元素以前的样式进行变化的，我们只要把变化的内容写上就好了，相同的部分不需要重复的去定义。
19 |
20 | 原来鼠标滑过发生变化的代码竟然这么简单，曾经我们还当做一个什么什么的特效来看的啊！那么我们就再来点稍微复杂哦，看我改写成如下的样式：
21 |
22 | ```css
23 | #nav .nav-item a:hover {
24 | height: 40px;
25 | padding-top: 5px;
26 | line-height: 40px;
27 | background: #DDD;
28 | border-bottom: 5px solid #999;
29 | }
30 | ```
31 |
32 | 我一下修改了好多内容，看看真复杂！但是仔细分析一下也就明白了，高度改成了 40px，所以 line-height 也改成 40px，这是为了垂直居中所做的相应的修改，而刚才高度上减少的 10px 则通过顶部内补 5px，底部增加 5px 的边框补回来了。因为上下是对称着添加的，所以文字依然垂直居中（看起来似乎没有变化），然后内补和边框都算作元素的范围之内（快递箱以及里面的填充物都算作整个箱子的范围之内），所以也不会影响 a 本身已经设定好的点击范围。
33 |
34 | 我们看看划过效果：
35 |
36 | 
37 |
38 | 就是酱紫的效果了，怎么样？大家根据自己的理解修改上面的属性试试看有什么变化？
39 |
40 | 然后再说几个 链接元素常用的伪类：
41 |
42 | > :active 当前鼠标点下链接的时候
43 |
44 | > :hover 当鼠标悬浮在元素上方时
45 |
46 | > :link 当链接还未被访问过时
47 |
48 | > :visited 当链接被访问过之后
49 |
50 | 现在我们也很少用这么多，设置一两种就不少了，比如导航部分的链接，设置一个 :hover 和一个 :active 就差不多，这个几个的用法一样，大家可以自行进行各种惨无人道的变态实验，以便使自己确实掌握这些伪类。
51 |
52 | 至此我们对导航条的美化也算简单的告一段落，如果你愿意，可以开动脑筋看看还可以做些什么样的美化，虽然我们现在学的 CSS 属性不是很多，但是通过有机的结合以就可以做出很多养眼的效果，希望大家多动手练习一下哦～
53 |
54 | 那么是不是我们的导航到此就算做完了呢？不是的，其实还有一个小小的问题没有解决。我们把浏览器窗口调小看一下哦～
55 |
56 | 
57 |
58 | 你说，哎呀，怎么都出去？其实不是都出去了，而是根本就不在里面。不信你把 #nav 的高度去掉试试看，他的高度就会变为 0 ，根本没有被里面的元素撑起来。为什么会这样呢？因为里面的这些元素都进行了浮动，但是 #nav 并没有浮动。
59 |
60 | 浮动的和没有浮动的元素仿佛是不在一个频道的两群人，总觉的他们相互之间对不上频率，那怎么对上频率呢？两个办法：第一、浮动到底，要是所有的元素都浮动那自然就在一个频率上了，但是想想都觉得超麻烦；第二、清除浮动，就是在浮动结束之后清除一下，表示我浮动完了，咱们还是好朋友哦，不许再闹别扭啦，乖～
61 |
62 | 所以我们**用完浮动之后一定要记得清除浮动**，清除浮动的方法有很多，但是我们现在先来讲一种，是最容易理解的哦。
63 |
64 | 首先 #logo 和后面两个 ul ，以及 ul 里面的 li 都已经进行了浮动，那么在这样的局部范围内也算是全部浮动，于是他们之间相安无事，问题出在这些浮动的元素和外部没有浮动的元素 #nav 之间，所以我们要在 #nav 的内部这些浮动元素之后加一个： ``,
65 |
66 | 于是变成了：
67 |
68 | ```html
69 |
85 | ```
86 |
87 | 然后在 CSS 里面写上：
88 |
89 | ```css
90 | .clear {
91 | clear: both;
92 | }
93 | ```
94 |
95 | 这样就可以了，为什么要这么写呢，这样定义以后，下次我们需要清除浮动的话，只需要复制 `` 过去就可以了，定义一次，可以多处使用，也算是很方便的，当然这种办法会多出一个空白的 div，虽然不影响界面，但是强迫症会比较难受，额……这个我们以后再讲其他办法。（强迫症别杀我……）
96 |
97 | 好了，现在我们去掉 #nav 的高度看一下效果。
98 |
99 | 
100 |
101 | 
102 |
103 | 这样就不会出来了……只是浏览器窗口较小的时候好难看………我们下节课再解决……（不要追杀我呀！）
104 |
105 | > **本章学习卡片：[卡片 24](http://coffee.zji.me/card.html?name=chapter24)**
106 |
107 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/24.zip)**
108 |
109 | ---
110 |
111 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
112 |
113 | > **alay9999@163.com （刘源）**
114 |
115 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
116 |
117 | * 主站（2018 新版上线）：https://dmnydn.com/
118 |
119 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter25.md:
--------------------------------------------------------------------------------
1 | 第二十五章 导航条（十）
2 | ===
3 |
4 | 现在来说说这个浏览器宽度的问题，这可不是一个小问题哦，因为大家的显示器尺寸是不同的，所以浏览器窗口的大小相应的也必然无法保持一致，我们必须同时考虑到可能出现的各种情况才行。
5 |
6 | 那么当前我们遇到的问题是当浏览器宽度过小的时候导航的内容放不下，于是被排成了几行，很不好看。当然这个情况如果不去管他其实也没什么问题，因为我们后面要写的其他内容都很宽，足以撑着页面保证宽度足够当前的导航使用。但是有些同学希望做的更严谨一些，那么我们来试一试。
7 |
8 | 我们先来简单分析一下，我们做的是一个电脑页面，#nav 元素宽度和页面相同，一般情况都是没啥问题的，但是当浏览器宽度太小，就会被挤压，也就是 #nav 的宽度不能太小就好了。
9 |
10 | 我们能说不让读者调节浏览器尺寸么？显然不行，那么我们规定一下 #nav 的最小宽度吧～这个很简单，CSS 中给给 #nav 元素加一个属性 `min-width: 960px;` 就好。这是什么意思呢？如果是宽度 `width:960px;` 的话我们就理解了，这是固定宽度 960px。现在呢是 #nav 享有根据情况自动调节宽度的权利（就像以前一样），但是，当他的宽度小于 960px 时，不可以了，到 960px为止，你便只能固定这个宽度，不能再小了。这就是最小宽度的意义，大了你随意，但是不可以小于这个下限，否则强制设定为下限的值。我们再来看看效果。宽度足够的时候不用说了，我现在把浏览器宽度设定为 800px，然后再看：
11 |
12 | 
13 |
14 | 底下出现了滚动条，因为要是自由宽度的话现在 #nav 应该是 800px 宽，但是这小于他的最小宽度 960px，于是就被强制为了 960px。一个很好玩的属性。
15 |
16 | 那么有最小就有最大， `max-width` 是最大宽度。与此同理的高度也可以通过添加前缀产生两个属性，最大高度（`max-height`）和最小高度（`min-height`）。因为用法相差无几在这里就不细说了。
17 |
18 | 然后我们开始研究一下新的问题，这个问题也许有很多朋友早就等不及了，大家写这个的时候有木有想过宽屏的朋友？这导航分左右，在宽屏上左边一堆，右边一堆，中间空着一大块，那感觉就好像是下图：
19 |
20 | 
21 |
22 | 你看，我们解决完了尺寸太小的时候的情况，现在还要面临尺寸太大的时候的情况，但是这个情况好像不是设置最大尺寸可以解决的问题啊。因为我们还是蛮希望背景填满整个宽度的，只是内容不要这么分散就好了。
23 |
24 | 等等，我们说内容不要这么分散！那就把内容部分打个包好啦～，是不是？我去打个包哦，你看着：
25 |
26 | ```html
27 |
45 | ```
46 |
47 | 看到了，我又加了一个 div（.nav-content），然后把以前的内容都放在里面。现在我们设定一下他的 CSS。
48 |
49 | ```css
50 | #nav .nav-content {
51 | width:960px;
52 | }
53 | ```
54 |
55 | 这个挺好理解的，我就是把内容限定在这个里面了，给他一个固定的宽度，至于外面的 #nav 让他带着背景去适应窗口好了，我们来看效果：
56 |
57 | 
58 |
59 | 换做这么写倒是内容紧凑了，可是内容不在中间怎么看啊？来啊，这里教大家一个让元素横向居中的办法，啥是居中？就是元素两边空余的宽度相同，对吧？所以我们这样写：
60 |
61 | ```css
62 | #nav .nav-content {
63 | width:960px;
64 | margin:0 auto;
65 | }
66 | ```
67 |
68 | 就是添加了一个 `margin:0 auto;` 哦，上下外补是 0 没有啥问题，本来我们就不需要，而且不设置默认也是 0。现在说左右，auto 就是自动啊，就是根据情况自己看着办，你想两边权限一样，当 #nav 的宽度比 .nav-content 大的时候，反正不是这边空着就是那边空着，两人权利一样大的结果就是——平分。这是最公平的办法，那么空余的部分左右平分是不是就是左右间距一样，就是居中了呢？
69 |
70 | 但是用这个要注意两个问题：第一、这个办法没法搞定垂直居中，因为受到文档流向上的原动力影响（参见 VIP章节 关于浮动的故事），同理浮动元素也不行；第二、被居中的元素必须指定宽度，否则两边都搞不清一共剩下多少，怎么平分？
71 |
72 | 来看看效果：
73 |
74 | 
75 |
76 | 一切正常了，那么我们想一想，现在有里面的 .nav-content （已经指定了宽度）来撑着，#nav 的 min-width 还有必要吗？当然没有了，于是去掉它。
77 |
78 | 到这里，今天我们其实讲了导航的两种布局方式，一种占用全部宽度，一种只占用中心一部分宽度。希望大家好好练习一下。其实这两种方式都蛮常见，大家可以留意观察一下我们见到的网站哦。
79 |
80 | 然后我们发现我们花费了整整十章才写了一个简陋的导航，但是我们这十章只是在讲导航么？我们快把常用的 CSS 知识说的差不多了好不好？所以一定要认真照着做练习，多思考，觉得懂了就按着自己的想法去修改去尝试，这样才能让自己真的理解他们。当然要是不很懂也没关系，页面刚写到这里，后面的内容还要反复用到这些知识，一回生二回熟，跟着学下去慢慢也就会了哦～～
81 |
82 | > **本章学习卡片：[卡片 25](http://coffee.zji.me/card.html?name=chapter25)**
83 |
84 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/25.zip)**
85 |
86 | ---
87 |
88 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
89 |
90 | > **alay9999@163.com （刘源）**
91 |
92 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
93 |
94 | * 主站（2018 新版上线）：https://dmnydn.com/
95 |
96 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter26.md:
--------------------------------------------------------------------------------
1 | 第二十六章 CSS 书写规范
2 | ===
3 |
4 | 开一瓶一块八的啤酒，再来一串八毛钱的小鱿鱼，老板记得多放辣椒（这样经吃，这是经验，都记着点）。我们继续开始聊~我一个礼拜才三块钱零花钱，今天点了两块六的大餐，喵的，这日子不过了！
5 |
6 | 你说我今天废话特别多？是啊，这节课就是一节发牢骚的课。我们来解释一下题目哦，CSS 是啥我们前边都说过了，书写呢？我们前面也都写过了，但是我们采用的是追加方式，就是需要什么就在后面加上他。规范，这个是我们今天要重点去解释的东西。
7 |
8 | 啥是规范？规范是没有强制性的东西，他建议你去遵守，遵守的话可能会给你带来一定的好处，但是你坚持不遵守也未必会有什么严重的后果。中小学生行为规范要求我们不要早恋，因为这会分散我们的精力，进而影响我们的学习成绩。但是你要是觉得学习这件事情简直是小菜一碟，轻轻松松就名列前茅了，或者你是富二代，别害羞，我们不会歧视你的，反正富二代其实完全可以不在乎分数什么的。那你完全可以选择这个美妙的人生副本（别吵，在学校阶段这个就是副本，毕业之后才是主线任务的）。这有问题么？规范有错么？我的解读有错么？
9 |
10 | 但是不止一次的有人跟我说，你这个不符合规范！你就是在误人子弟。可是为什么我同学里一对对早恋的都成了，而且很幸福。而且我的高中（某地一中，重点）的副校长的老婆也是高中谈的。什么是对的？合适的就是对的。非得拿着条条框框去抠的是教条主义，我写的又不是教科书，教科书又不是没有错。
11 |
12 | 你如果搜索 《CSS 书写规范》 网上有一篇流传很广，但是人家的标题是 《推荐大家使用的CSS书写规范、顺序》 看见了？是推荐，不是强制，不是必须，你又凭什么依据这个说我写错了？而且此篇文章的某些细节也不是大家都完全认同的，有兴趣可以去查查。因此而嘲笑他人写的如何的，我只能说：呵呵！
13 |
14 | 今天我说的规范是你不得不去遵守的，或者说是作为一个写代码的，起码要遵守的吧。当然其实我对你们没有任何要求，还是那句话，初学的时候达到效果是唯一目的，后面用的时间长了自然知道自己该怎么去做的。
15 |
16 | 原则是：第一、书写整齐，要么都缩进，要么都不缩进，缩进要整齐，总之就是好看。你想这么多代码，说看着不头疼是扯淡，如此情况下你还把他写成乱麻，反正你自己还要回头看的，你自己懂得。这个不只是 CSS ，写任何代码都是如此，这是为日后准备的，叫做有备无患。
17 |
18 | 第二、感觉将来可能不清楚的地方要加注释，这里还插一句 Html 的问题，最好每个 `` 后面都加上注释，注明这是结束的哪个 div，否则嵌套多了后面查找的时候很费劲的。为啥你们的代码自己都懒得回头看，首先你的格式难看，然后就是没注释，自己再看的时候都晕了。
19 |
20 | 第三、CSS 元素的先后顺序，先外后内，先全局，后局部，所以 body 的定义在前面，因为他是最外面的，a {……} 这种也在前面，因为定义的是全局的，所有链接啊。然后按着从上到下，由外往里的顺序逐个写。元素的伪类既然是基于元素本来的样式的（比如 :hover）那他肯定跟随在元素本身的定义之后，元素都没定义，你基于谁去啊。
21 |
22 | 第四、内部的属性按着从整体到局部的顺序去写，搞不懂就自己大概有个顺序，各个元素都按照这个顺序就好，因为以后查看的时候方便点，要不然几个元素都是十几个属性的，然后一个宽度写在最上边，一个在最下边，神仙都气哭了，完全不知道你下一张牌怎么出啊。
23 |
24 | 第五、注意点有前因后果的，把基础条件写在前边。本身是内联元素，你不先 `display:block` 又哪来的 `float:left;` 啊。我们说 `margin:0 auto` 居中的话必须有固定的宽度，那你是不是该把宽度定义在他前面？这就是个逻辑关系。
25 |
26 | 然后少点重复定义啥的，挺好了。还有 id 和 class 尽量命名的让人一看就懂这是干嘛的，反正你故意反着写，用 #footer 当页头也没人管你，让下一个看你代码的人去哭吧，在特殊情况下又不是没人这么做，如果你确信你不会再看这个代码完全可以试试，但是要是挖了坑有自己跳进去就呵呵了。
27 |
28 | 就这样差不多够用了，写的多了你自己就给自己一份必须遵守的规范了，其实哪用得着我来废话。技术是让人来享受的便捷的，不要刻意地把它复杂化。别觉得学代码很可怕，其实编程这件事情也在努力变得更加友好，所以前面我们的各种不规范也都被浏览器容忍了。
29 |
30 | 那么大家试着去把我们已经写过的代码规范一下吧~我也简单修改了一下，大家可以下载看一下。
31 |
32 | **没看懂的记得以后过来看~**
33 |
34 | > **本章学习卡片：[卡片 26](http://coffee.zji.me/card.html?name=chapter26)**
35 |
36 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/26.zip)**
37 |
38 | ---
39 |
40 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
41 |
42 | > **alay9999@163.com （刘源）**
43 |
44 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
45 |
46 | * 主站（2018 新版上线）：https://dmnydn.com/
47 |
48 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter27.md:
--------------------------------------------------------------------------------
1 | 第二十七章 首屏大海报（一）
2 | ===
3 |
4 | 一块八的啤酒真不经喝，没聊两句就喝光了，导致上一章有点短。现在还剩下四毛钱，买个棒棒糖都不够，话说有钱不知道怎么花也是一种折磨啊。
5 |
6 | 今天开始聊这个页面的大海报部分，但是一个关键的问题是：首屏。这是页面的灵魂所在啊，好在我不用考虑这些，设计的问题交给设计师去发愁好了，所以我今天就随便找张图片演示一下就好。
7 |
8 | 你真的这么去想？太好了，你又被我忽悠了，其实今天是要你们看看前端如何灭掉设计师的。别反驳我，看下去你就知道设计是死的，网页是活的了。
9 |
10 | 我们首先确定海报是宽屏的，就是屏幕多宽，我的海报就有多宽，这是为了让老板感觉到：“”哎妈呀！你们做得好震撼！“好的，我们开始添加 Html 代码，应该按着顺序加载 #nav 部分之后。
11 |
12 | ```html
13 |
14 |
15 | ```
16 |
17 | 注意，我现在开始更加规范的写代码了，所以注释一定要跟上，随着代码的增加，越来越容易让我们看迷糊了，所以注释这个小秘书显得愈发性感起来了。
18 |
19 | 我们知道 Html 最多只是骨感美，想要丰满，必须”创世神“（CSS）。
20 |
21 | ```css
22 | #post {
23 | width: 100%;
24 | height: 450px;
25 | }
26 | ```
27 |
28 | 现在设计师可以骂街了，你整天问的（别说没有，群里我被我问了可是不止一次两次的）网页我该设计成什么宽度的问题，在这里可一点麻烦都没有，一个 `width: 100%;` 明确解决了。你说那还没放图片呢，说这个为时过早吧？其实放上图片你哭得更惨。
29 |
30 | 我先去准备一张图片哦，要够大的才够爽，嘿嘿~于是我随手找了这张，仅作演示而已。挺大的，2048×1363 像素的，我懒，就不根据需求裁剪了，你们不许像我这么懒，这样不好，因为图片过大会导致加载过慢的。好了，先欣赏一下这张图片：
31 |
32 | 
33 |
34 | 然后开始设置背景了哦，其实很简单的，以前我们设置纯色背景用的是： `background:颜色值;` 现在改成： `background:url(图片地址);` 就好了。这里说一下， `background` 是个复合属性，其实分开写的话有个七八十来个，我记不住，我就记住了一个，就用它了，我省心，它累不累的又不关我的事……其实这样更简单明确啦，分着写……字多！
35 |
36 | ```css
37 | #post {
38 | width: 100%;
39 | height: 450px;
40 | background: url(../images/bg.jpg);
41 | }
42 | ```
43 |
44 | 简单吧，来看看效果哦~
45 |
46 | 
47 |
48 | 什么，你的图片没有显示？右键——审查元素，你会在右侧 CSS 里看到图片的地址，然后点击或者右键（根据不同浏览器操作略有不同）打开图片，然后查看地址栏，看看图片地址跟他的实际地址有什么区别，然后据此修改代码。这可是一个很好的练习机会，希望不要错过哦。
49 |
50 | 不过其实你要是按着前边我们说的文件结构去做的话，这边也照抄基本不会有什么错，只是错过了一个练习而已。
51 |
52 | 好了好了，其实现在图片位置并不合适，我们看到整张图片就显示了一个左上角。我们要定义一下背景图片的位置（`background-position`），但是在这之前我们有必要先讲一下网页的坐标系。坐标系三要素，原点，坐标轴，正方向（恩恩，其实我说错了，应该是……你管呢，我现在就想说这三个，就这么地吧~）。原点，以参照物的左上角为原点，坐标轴有三个：X 轴（横向，即左右）、Y 轴（纵向，即上下），Z 轴（深度，即前后）。学过三维的同学说，咦，这个好熟悉的说。然后正方向，X 轴向右为正方向，Y 轴 向下为正方向，Z 轴 向屏幕外是正方向。
53 |
54 | 你没听懂？请打电话给你的初一几何老师，让他数落你一小时三十二分钟。基本上本教程用到的最深奥的数学知识也没超出初一初二的水平，而且也只是用到最基础的一点概念而已，公式什么的……不好意思，我也早就还给老师了（别打，老师我是真的从来没用到过他们啊！）
55 |
56 | 其实网页上涉及的坐标问题很复杂，但是我的原则是，记不住我干脆不记，用的时候简单测试一下就知道了。
57 |
58 | 背景位置的属性值分为两个，一个 X 轴，一个 Y 轴，他们都可以用数值去表示图片的起点（左上角）坐标。然后我们漏说了一个问题：原点，我们以本元素的右上角为原点。你说你隐约知道怎么调整背景位置了，Too 森普！ X 轴还有三个特殊值：left、center、right；Y 轴也还有三个特殊值：top、center、bottom。可以顾名思义吗？就是以图片的左（中、右、上、中、下）边与元素的左（中、右、上、中、下）边对齐。很复杂？看懂了就行，看懂了用的时候自然就会想起来了。
59 |
60 | 这就完了？还有百分比呢，喵的，w3schools 的网站不管是中文和英文都没仔细去解释这个问题，百分比和数值是有根本的区别的，他跟那几个特殊值倒是很像，这里只简单的说一下：
61 |
62 | > `background-position: 0% 0%` 相当于 `background-position: top left`
63 |
64 | > `background-position: 50% 50%` 相当于 `background-position: center center`
65 |
66 | > `background-position: 100% 100%` 相当于 `background-position: right bottom`
67 |
68 | 其余数值自己体会。然后再说一下，w3school 说：”提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。“这句话在英文版 w3schools 中并未提及。然后中文的 w3school 只是对英文 w3schools 第三方翻译，而不是官方出品。然后其实浏览器发展的那么快，现在根本不需要这个设置了。所以，奉劝一句，那些把 w3schools 奉为圭臬的同学醒醒吧，拿他当词典也就好了，但词典不是标准，只是参考。而且如果可能，尽量直接看英文版。好吧，我又多事了，管这干啥……你爱信谁信谁，反正我说的又不全对。
69 |
70 | 回到正题，现在我们的背景应该如何设置？横向居中对齐，用 center ，纵向要往上一些，以便保证最美好的位置得以展现，这里用固定值就好，所以用像素来表示，那么图片在 Y 轴的起点向上偏移，上面是负方向，所以用负值表示，于是我们写作 `background-position:center -250px;`，不过我懒，于是把它加载了 background 这个复合属性里：
71 |
72 | ```css
73 | #post {
74 | width: 100%;
75 | height: 450px;
76 | background: url(../images/bg.jpg) center -250px;
77 | }
78 | ```
79 |
80 | 来看看效果哦~
81 |
82 | 
83 |
84 | 我觉得单这一个属性就很好玩了，大家可以试着去做各种设置，看他的变化，然后想象一下在什么情况下需要这种设置。
85 |
86 | > **本章学习卡片：[卡片 27](http://coffee.zji.me/card.html?name=chapter27)**
87 |
88 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/27.zip)**
89 |
90 | ---
91 |
92 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
93 |
94 | > **alay9999@163.com （刘源）**
95 |
96 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
97 |
98 | * 主站（2018 新版上线）：https://dmnydn.com/
99 |
100 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter28.md:
--------------------------------------------------------------------------------
1 | 第二十八章 首屏大海报（二）
2 | ===
3 |
4 | 据说看完上一节教程之后好几拨人哭昏在了厕所。别再昏了，起来嗨~
5 |
6 | 其实后面讲到响应式我们可以根据实际情况去调节海报的高度，讲到 JQuery 我们可以很方便的动态设置海报高度。那时候有的你们哭的，让感动的泪水尽情地挥洒吧，欧耶~
7 |
8 | 反正也都感动了，索性再感动一下好了，来玩个 CSS3 的属性哦~对了，你们说什么是 CSS3 啊，什么是 HTML5 啊，就是那些低版本 IE 兼容不了的东西……
9 |
10 | 所以今天的属性你要是在小于等于 8 版本的 IE 下浏览可能不起作用。这个属性是 `background-size` ，他可以同时含有两个值，依次是 X 轴方向和 Y 轴方向。可以设置带长度单位的数字值，或者百分比。然后不设置则默认 auto。这个跟 `width` 或者 `height` 属性是一致的，其实这就是设置背景图片的宽高，你看这个以前让很多人发愁过的问题到了 CSS3 下面变得十分简单了。
11 |
12 | 只是宽高设置还需要演示么？配合昨天讲到的（`background-position`）可以想出各种玩法，看你的想象力了哦。然后我们再来说一个 `background-size` 的特殊值：`cover`。这个值什么意思呢？就是图片等比例缩放至恰好覆盖整个元素，这种情况其实说白了就是某一边正好100%，另一边等于或者大于元素对应方向的长度。
13 |
14 | 反正你理解为图片不变形（只是放大或者缩小）的填满元素就是了，再不理解就试试呗，反正不要钱。这就是学习方法，你看，这么说就显得高大上了。
15 |
16 | 然后我们这里就用 cover 这个值就好了。
17 |
18 | ```css
19 | background-size: cover;
20 | ```
21 | 看看效果，大图在横向上得以完美地展示：
22 |
23 | 
24 |
25 | 但是这里存在一些隐含的问题，第一、我们当前图片较大，需要进行偏移（background-position），那么我们的偏移量就很难确定，不过如果你只是定位（left、top 之类）倒是还不至于有影响；第二、我们的海报（#post）长宽比不是确定的，所以，你可能无法确定究竟哪一边是 100%，进而的，你也可能无法十分明确的确定海报的展示区域。在当前，这是我们很难解决的问题，所以这次我们无法使用这个属性。但是等到后面我们学习了响应式和 JQ 之后，可以根据情况对网页进行动态设置了，那这些鸡肋的问题就可以解决掉了。那才是真正有了生命的网页。
26 |
27 | 好啦，演示了一个 CSS3 属性，其实也不过如此嘛，没有什么神奇的地方，跟以前的属性用起来一样的普通啊，而且他也有他的小缺点。可是有些人非得神化这些东西，把 HTML5 和 CSS3 搞得多么多么高大上，其实完全没必要么，反正我就是个土鳖，给我披萨我也卷着大葱吃，但是我身体倍儿棒，你能怎么样。
28 |
29 | 反正也是讲到背景图像嘛，索性我们就再讲一个属性好了。`background-attachment` ，这个属性是说元素的背景图像是否相对于窗口滚动，默认当然是滚动了，就是像我们平时见到的那样。但是当你设置为 fixed 的时候，他就相对于窗口固定了，测试方法：给咱们现在的代码的 #post 元素加上 `background-attachment: fixed;` ，然后在 html 代码里的 #post 元素下面加上很多个 `
` 这样页面就可以滚动了哦，那么上下滚动页面试试看吧，随便你的页面怎么动，背景也在原地的哦。借助这个属性我们又可以做出很多神奇的效果了呢。当然，这里也说明了上一章提到的 w3cschool 的说法是怎样的误导了。
30 |
31 | 然后，我们把`background-attachment: fixed;` 去掉哦，那些多加的 br 自然也要去掉，回到我们的主线任务上来。我们的主线任务是什么来的？哦，对了，吃烤串，老板，再来三十串大鱿鱼，少放辣椒，对，就是对面这个正在看我教程的人付款。别跑，还有啤酒呢……算了，他跑了，我们继续聊海报。
32 |
33 | 这是一个海报，假设我们现在我们的海报上已经有了完整的内容，你别看我，我这上没有，我就放了张图片示意一下，看不惯你咬我啊，额，男生就算了。那么我们现在想给他加个链接，这是一个很常见的需求，对吧。你说要是图片就简单了，可是我们却把它设置成了背景。我跟你说啊，这个要是图片，你想让他这么居中对齐，然后两边超出的部分隐藏，这个效果可是要好麻烦才能做出来的哦。而且你真的打算给宽屏图片整个加链接吗？那你一定没考虑过用户体验这一层。
34 |
35 | 我在一个页面需要滚动的时候喜欢先用鼠标在空白的地方点一下，以确保焦点在页面上。但是如果我点哪里都会产生某些作用的话，我会很困扰。就好像你要抓住一块掉落的豆腐，却又不能让他碎掉般纠结。所以我觉得我们把两边只是为了视觉补白的部分留出来，只给中间有效内容区加链接就好。
36 |
37 | 怎么加？其实完全是我们讲过的东西哦，先给 #post 元素里边放一个空链接，我说的空是指链接内没有内容，不是说不设置链接的各种属性哦。
38 |
39 | ```html
40 |
43 | ```
44 |
45 | 然后给刚才的链接设置 CSS。
46 |
47 | ```css
48 | #post .post-link {
49 | display: block;
50 | width: 960px;
51 | height: 100%;
52 | margin: 0 auto;
53 | }
54 | ```
55 |
56 | a 是内联元素（inline），先转换成块元素，然后设置宽高，最后用 margin 居中，很简单。但是我们的目的达到了，去页面移动鼠标看看吧，注意鼠标光标的变化哦~~
57 |
58 | 然后说一下这个宽度，960px 是在 1024px 宽度的屏幕下可以舒服的展示（不出现横向滚动条）的最大宽度。有人说淘宝的 990px 宽度，不过不幸的是掏宝商城页面在 1024px 宽度屏幕下会出现横向滚动。也许你说这不重要吧，反正现在都是大屏幕，这就看你期望怎样的兼容性了。不过其实有了响应式，这些问题也就不是大问题了。可是到了低版本的 IE 上，唉，一切都是浮云，不得不再说一句 IE 该死！
59 |
60 | > **本章学习卡片：[卡片 28](http://coffee.zji.me/card.html?name=chapter28)**
61 |
62 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/28.zip)**
63 |
64 | ---
65 |
66 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
67 |
68 | > **alay9999@163.com （刘源）**
69 |
70 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
71 |
72 | * 主站（2018 新版上线）：https://dmnydn.com/
73 |
74 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter29.md:
--------------------------------------------------------------------------------
1 | 第二十九章 首屏大海报（三）
2 | ===
3 |
4 | 不过显然的，要是做个海报这么简单码农们就不哭了。所以现在我们要做一些没有设计师我们一样玩的很 High 的工作。
5 |
6 | 你看我的海报其实还只有一个背景，上节课虽然加了链接，也不过是自欺欺人，没内容谁点击啊？所以我们要开始添加内容了。
7 |
8 | 那么上一节加的那个链接就显得不够精致，所以不要他了，于是我们好像又回到了第二十七章结束的时候。注意哦，现在每个元素我都在讲着他的多种可能性，你们一定要注意点，跳着看的话可就乱了哦。
9 |
10 | 首先做什么？首先要给定内容一个范围，这样比较便于控制里面的内容，否则我们基于宽度变来变去的 #post 进行定位就会很困扰，要考虑的可能性太多了。但是如果我在其中划出一片固定大小的区域用来放内容，事情就变得简单了。
11 |
12 | 划定一个区域，肯定是居中的，能够被各种屏幕正常显示的区域了，然后高度就是 #post 的高度，等等，怎么感觉越说越像昨天加的链接了？
13 |
14 | ```html
15 |
20 | ```
21 |
22 | ```css
23 | #post .post-content {
24 | width: 960px;
25 | height: 100%;
26 | margin: 0 auto;
27 | }
28 | ```
29 |
30 | 相似度确实不低呢，所以啦，其实写网页就是那点东西，套来套去的，套的多了自然就熟练了，也就会用了。
31 |
32 | 在这之后是什么？往里面加东西啊。来，先加上这句：
33 |
34 | ```html
35 | 稻米鼠是大帅哥！
36 | ```
37 |
38 | 当然了，我们知道这是一个不容置疑的事实。但是，你应该知道吧，上边这句要放在 .post-content 里面哦，别放错位置。
39 |
40 | 然后如果你刷新页面的话……你会从这一刻开始怀疑人生。
41 |
42 | 
43 |
44 | 先说 h1 标签是什么，是标题，标题标签有六个 h1—h6，依次从大到小。这么说这个标签肯定又是有自带样式的了，当然我们可以根据需求欢快的去重新定义他们。那么现在的问题是怎么引起的呢？h1 自带了 margin 属性，但是 margin 可不单纯，这个属性用起来很复杂，所以我特别建议一下，如果可以用 padding 的情况最好不要去用 margin ，除非你真的足够熟悉它的特性。
45 |
46 | 那么现在我们怎么做呢，我先打一个不太恰当的比方去理解一下当前的情况，padding 是内补，内部问题终究是好解决的。margin 是外补，这是一个要跟他的相邻元素或者父元素产生相互影响的事情，于是就有点热闹了。眼下的问题是父元素对他的约束力不够，就是当爹的没管住孩子，孩子就开始淘气了。怎么管住孩子呢？加一些特别的属性就可以的，这个可以根据情况选择各种属性，比如给父元素加个内补神马的，但是这里我们并不希望加内补，因为内补会影响元素的尺寸。那就加一个语义上说得过去的属性好了，反正我也挺随心的。
47 |
48 | 那么给父元素（#post .post-content ）加上一个 `overflow: hidden;` 好了，你说这个什么意思？这倒是很值得说道一下。overflow 这个属性是说元素内容如果超出了元素的范围怎么办。这就比方说你一个高二百的元素里插入了一个高五百的图片，多出来那三百高度怎么办？我们后面的属性值也给出了答案，hidden 隐藏。藏起来不让人看到就是了哦。
49 |
50 | 然后刷新页面，你看到终于算是符合预期了。现在就开始下一个问题，标题居中。这个很简单了，文字水平居中啊，居左啊，居右啊，用这个属性来定义：`text-align` 可用的属性值有 left、center、right 等，这个比较显而易见，不多说，顺便把文字颜色（color），距离顶部的距离（margin-top）定义一下好了。
51 |
52 | ```html
53 | #post .post-content h1 {
54 | margin-top: 120px;
55 | color: #EFEFEF;
56 | text-align: center;
57 | font-size: 42px;
58 | }
59 | ```
60 |
61 | 看看效果：
62 |
63 | 
64 |
65 | 嗯，为了强调这个事实，我又把字号（font-size）改大了一些，这样感觉更有说服力啊。但是我怕你们还是无法正确理解我的帅啊~所以我还要在这个标题底下加上一行小字说明一下。当然就是在 h1 元素下面加上：
66 |
67 | ```html
68 | 这是一个毋庸置疑的事实，我们用灵魂承诺，此言不虚！
69 | ```
70 |
71 | 然后看效果：
72 |
73 | 
74 |
75 | 说真的，我仔细找了半天才找到那一行小字。现在我们很容易想到给他加上各种样式，不过仔细想想，我们要加的样式跟上面的 h1 元素好像有很多重复啊。这时候其实我们没必要定义两次。那个同学说用一样的 class ，没错！这只是其中的一个方法，现在我们来试试另外一种。我去把 h1 的文字颜色（color）、文字对齐方式（text-align）的定义，移动到 `#post .post-content` 元素的定义里。变成了如下的样子：
76 |
77 | ```css
78 | #post .post-content {
79 | width: 960px;
80 | height: 100%;
81 | margin: 0 auto;
82 | overflow: hidden;
83 | color: #EFEFEF;
84 | text-align: center;
85 | }
86 | #post .post-content h1 {
87 | margin-top: 120px;
88 | font-size: 42px;
89 | }
90 | ```
91 |
92 | 来看效果哦:
93 |
94 | 
95 |
96 | 你看实现了，但是我并没有去定义更多的内容，或者说没多打几个字。这是 CSS 样式的继承，即子元素会继承父元素的一些属性。比如文字相关的属性，大部分都是可继承的。
97 |
98 | > **本章学习卡片：[卡片 29](http://coffee.zji.me/card.html?name=chapter29)**
99 |
100 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/29.zip)**
101 |
102 | ---
103 |
104 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
105 |
106 | > **alay9999@163.com （刘源）**
107 |
108 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
109 |
110 | * 主站（2018 新版上线）：https://dmnydn.com/
111 |
112 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter3.md:
--------------------------------------------------------------------------------
1 | 第三章 几个小故事
2 | ===
3 |
4 | 在开始之前偶们先来讲几个小故事哦～
5 |
6 | 假设你一个优秀能干的秘书哦，对，是会干活的那种哦～那天老板给了你一份文档，就是一份普通的 Word 文档， 然后老板希望你把上面的格式规范一下，比方说应该加粗的地方要加粗该设置成标题的地方要设置成标题。那么这种工作其实我们大家都曾经做过的，也没有什么难度，老板一般都会标识出来哪里需要做什么样的修改，我们只要根据他的意思去做就是了。那么其中一段的内容是这个样子的。
7 |
8 | > 高端（从这里开始加粗）大气（到这里加粗结束）上档次
9 |
10 | 那么我们很容易理解出括号里面是说明的内容，说明其他文字应该是什么样的，那么现在的意思其实就是把 “大气” 二字加粗，所以你很轻松的就做出了如下的效果：
11 |
12 | > 高端**大气**上档次
13 |
14 | 是的，这很简单的，然后第二天老板又给了你一份文档，不过这次他标注的略显简单，毕竟上次标注的内容比实际内容都多，换谁都觉得累啊。
15 |
16 | > 低调（开始加粗）奢华（结束加粗）有内涵
17 |
18 | 然后哩～有了上次的经验这根本不需要猜啊，老板还没转身你就做出来了～
19 |
20 | > 低调**奢华**有内涵
21 |
22 | 这有什么啊～但是第三天，老板给了你一份董事长写的文档要你整理，这个董事长啊，是个喜欢把中文跟英文掺在一起再加点沙拉酱的讨厌鬼。所以这个文档是这个样子的啊。
23 |
24 | > 奔放（start bold）洋气（end bold）有深度
25 |
26 | 然后你就拿出珍藏已久的神器——中英小词典一查，嘿，合着跟上边一个意思，不过你记住了 bold 是粗体的意思。然后你就做出来啦～
27 |
28 | > 奔放**洋气**有深度
29 |
30 | 第四天，董事长亲自叼着烟卷给你拿过来一份文档，你一看，嘿，这家伙抽懒筋啊！直接简写了
31 |
32 | > 简约（b）时尚（/b）国际范
33 |
34 | 要是你第一次就看到这样的文档你可能犯懵，可是你经过了上边的千锤百炼之后你就想了啊，看这个情况 b 应该代表的就是 bold，那么其实他就是想给“时尚” 加粗，于是你就明白了 / 代表结束的意思。然后就可以做出
35 |
36 | > 简约**时尚**国际范
37 |
38 | 董事长满意的夸了你两句，叼着烟卷迈着小碎步离开了。然后我们开始总结一下这几个故事啊。故事都听懂了，但是这么简单的故事啥意思啊？唯一了解到的就是作者很絮叨。
39 |
40 | 那你看看下面这个啊——
41 |
42 | ```
43 | 狂拽酷炫掉渣天
44 | ```
45 |
46 | 你现在想的一定是——** 你丫再絮叨我抽你！ **
47 |
48 | 换个括号就想再说一遍？？？当然了，这次的背景不错……
49 |
50 | 可是我就再絮叨一句啊～
51 |
52 | > ** 刚才这就是标准的网页代码了啊，他难吗？ **
53 |
54 | > **本章学习卡片：[卡片 3](http://coffee.zji.me/card.html?name=chapter3)**
55 |
56 | ---
57 |
58 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
59 |
60 | > **alay9999@163.com （刘源）**
61 |
62 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
63 |
64 | * 主站（2018 新版上线）：https://dmnydn.com/
65 |
66 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter30.md:
--------------------------------------------------------------------------------
1 | 第三十章 首屏大海报（四）
2 | ===
3 |
4 | > 如果本章演示效果无法正常展示，请至主站查看 http://coffee.zji.me/
5 |
6 | 你看，代码这东西认真玩起来其实还是很有意思的。不过可能有同学问了，咱不是写一个 App 的发布页面么？怎么……啊啊，是啊是啊，所以我们接下来要写一个下载按钮呢~
7 |
8 | 这个按钮的写法比较多啊，你要是只为了链接到一个文件，其实用 a 标签就可以搞定啊，你会设置背景吧，会设置文字颜色吧，会设置边框吧。然后哩？
9 |
10 | 当然，要是希望用来发生什么有趣的事情，或者为了语义明确，我们也可以选用 button（按钮）标签。这个写起来超简单的~
11 |
12 | ```html
13 |
14 | ```
15 |
16 | 
17 |
18 | 是挺简单的，也挺难看的，开始给他定义样式：
19 |
20 | ```css
21 | #post .post-content button {
22 | padding: 12px;
23 | margin-top: 36px;
24 | background: #CCE;
25 | border: 5px solid #DDF;
26 | font-size: 18px;
27 | font-weight: 600;
28 | }
29 | ```
30 |
31 | 大家应该都看得懂的，我也不多说了，看看效果吧，请原谅我这诡异的配色！
32 |
33 | 
34 |
35 | 到这里，这个海报其实就做得差不多了。虽然很多细节没有去完善。不过……那不是应该你们自己去做的吗？赶紧的，每个人做一个漂亮的出来。
36 |
37 | 本来这章已经可以结束了，但是好像字数太少了，我总要对得起各位读者的票钱……虽然你们大部分没给钱。所以在下面做一些简单的补遗。
38 |
39 | 第一个问题：背景相关的还有一个属性：background-repeat 是说背景重复。默认是重复的呦，就是背景图片小于元素的话，则通过重复的方式进行填满，而我们也可以单独设置其中某个轴是否重复。
40 |
41 | 然后我来举个例子：`background-repeat: no-repeat repeat-y` 就是横向不重复，只在纵向重复。挺好理解的事情，就不多解释了。
42 |
43 | 定义背景的时候我们可以把这些属性都写在一起，为什么这么做呢？我就是图省事……
44 |
45 | ```css
46 | background:url(miao.jpg) center -15px no-repeat;
47 | ```
48 |
49 | 然后说说 margin 这个家伙。这个家伙其实也没有想象的那么麻烦，就是纵向上两个 margin 相遇会重叠。比如：
50 |
51 | ```html
52 |
53 |
54 |
55 |
56 |
57 |
58 | ```
59 | 效果如下：
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | 你看你看，两个元素的间隔明显不是 100px（50+50）啊。其实只有 50px ，因为两个 margin 重叠了。
69 |
70 | 然后其实上一章 h1 引起的问题也是着个问题的一个变种，当时我们已经解决掉了。这个先知道就好，剩下的到实践中去理解。
71 |
72 | **然后留个作业吧，敢不敢独立把这个页面完成掉？而且要尽可能的完美~**
73 |
74 | > **本章学习卡片：[卡片 30](http://coffee.zji.me/card.html?name=chapter30)**
75 |
76 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/30.zip)**
77 |
78 | ---
79 |
80 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
81 |
82 | > **alay9999@163.com （刘源）**
83 |
84 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
85 |
86 | * 主站（2018 新版上线）：https://dmnydn.com/
87 |
88 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter31.md:
--------------------------------------------------------------------------------
1 | 第三十一章 还是海报
2 | ===
3 |
4 | 报告读者，本人正在直播……直播写作，接受监督，但是我就不告诉你们在哪里直播。
5 |
6 | 以下为注释 ``
7 |
8 | 好了，今天废话不多说，开始我们的正文。你的啤酒准备好了么？
9 |
10 | 前边我们写了导航栏、写了大海报，你也许觉得这还是在入门，好简陋好简陋的，但是其实呢，这已经是我们常用知识中的大部分了。不信你看，今天的内容几乎完全是在复习的样子啊。
11 |
12 | 那么呢，作为一个 App 发布页面……额，虽然已经被我写得不伦不类的，你就当成那个样子去看好了，毕竟我这么帅，你们会原谅我的对不对？
13 |
14 | 好啦，为了展示它的特性呢，它是谁？不是你想的那个样子啦，是为了展示我们要发布的这个根本不存在的 App 的某些引人入胜的特性，我们要多加几张海报。你说把前边海报部分复制一下就 OK 啦，反正也是，但是我要是那么懒，你们还不打死我？再说了，千篇一律的版式也不方便糊弄老板啊！所以下边两个海报的样式总要变一变的。
15 |
16 | 第一张呢，左边文字，右边一张什么什么 LOGO 或者 ICO 什么的，哎呀，不说那么高大上了，放个剪切画的意思。第二张就是把这两边换换，左边剪切画，右边文字，当然啦，他们都有通栏的背景，这样显得符合潮流……其实是符合老板恶俗的审美啊。
17 |
18 | 那么开始我们的工作，第一张海报……算了，这么懒的我肯定是两张一起写了，首先是 Html ：
19 |
20 | ```html
21 |
26 |
31 | ```
32 |
33 | 然后是一些基础的 CSS 样式控制，我不用讲你也看得懂啦。你看你们老说学不会啊、看不懂啊，现在为啥就能看懂了？切，根本就没那么难嘛~
34 |
35 | ```css
36 | #post, #post-a, #post-b {
37 | width: 100%;
38 | height: 450px;
39 | }
40 | #post {
41 | background: url(../images/bg.jpg) center -250px;
42 | }
43 | #post-a {
44 | background: url(../images/bg-a.jpg) center 0px;
45 | }
46 | #post-b {
47 | background: url(../images/bg-b.jpg) center -250px;
48 | }
49 | .post-content {
50 | width: 960px;
51 | height: 100%;
52 | margin: 0 auto;
53 | overflow: hidden;
54 | color: #EFEFEF;
55 | text-align: center;
56 | }
57 | ```
58 | 以上是我修改/添加的 CSS ，大家看看发生了什么变化？为什么捏？#post, #post-a, #post-b 三者样式区别不大，所以干脆放在一起定义一下相同部分，然后再分别设置背景好了。.post-content 样式是可以共用的，那就共用好了，所以去掉 #post 的约束。然后来看看效果，这次有点长……
59 |
60 | 
61 |
62 | 现在开始填写海报里的内容，几乎跟第一张海报是一样的。什么什么？你说我偷懒？分明就是复制了第一张海报在糊弄？其实你把下两张海报的高度改低点（或者高点），然后设置个纯色背景就挺高大上的，不过好像比现在的还简单……所以我没偷懒好伐？！
63 |
64 | 现在给第一张海报加上一个图标，一段文字。Html 代码如下：
65 |
66 | ```html
67 |
68 |
69 |
70 |
帅的那样让人心醉
71 |
让你忍不住多看了一眼又一眼
72 |
73 |
74 |
75 |
76 |
77 |
122 |
123 |
124 |
125 |
126 |
127 |
其实做人要谦虚的
128 |
你看作者从来不说自己帅
129 |
130 |
131 |
12 |
13 |
我是第一个盒子
14 |
是的，没错的，十分确认的，我是第一个盒子。
15 |
16 |
17 |
反正我就是个盒子
18 |
是的，没错的，十分确认的，我就是一个盒子。
19 |
20 |
21 |
我是盒子我骄傲
22 |
盒子怎么了，你不能瞧不起盒子的，我们也有自尊。
23 |
24 |
请将本行重复一万次，当然你要是和我一样懒，复制到超过一页就好，适当多点可以方便查看效果，我就不复制那么多了，本章的长短与稿费无关……其实根本没有稿费好吗
46 | 我就在这不动了！
47 |
48 |
49 | ```
50 |
51 | 试试效果吧，你怎么滚动那个红色的元素总在左下角，不会发生移动，如下图：
52 |
53 | 
54 |
55 | 那么上面的代码大部分都很容易理解了，我来解释一下其中的 `left` 和 `bottom`。我们说：`position: fixed;;` 是说定位方式，相对于浏览器窗口定位。但是我们说他的位置了没有？没有啊！
56 |
57 | 这 `left` 和 `bottom` 就是说明他的位置的，我解释给你听啊： `left` 就是说元素的左边缘和浏览器的左边缘之间的距离；同理 `bottom` 就是说元素的下边缘和浏览器的下边缘之间的距离。
58 |
59 | 然后聪明的你就可以举一反三地说出 `right` 和 `top` 的意思了。嗯，这四个东西下节课还要用哦~
60 |
61 | 留个作业，除了那种悬浮的“在线客服”或者广告之类的东西以外，大家找找 fixed 定位还在哪里被用出了高大上的效果？
62 |
63 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/36.zip)**
64 |
65 | ---
66 |
67 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
68 |
69 | > **alay9999@163.com （刘源）**
70 |
71 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
72 |
73 | * 主站（2018 新版上线）：https://dmnydn.com/
74 |
75 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter37.md:
--------------------------------------------------------------------------------
1 | 第三十七章 定位（二）
2 | ===
3 |
4 | 上节课我们讲了 fixed 定位，那么现在我们来简单回顾一下他。fixed 定位就是锁定元素和浏览器的相对位置，无论怎么滚动页面，这两者之间是相对静止的。然后还有一个细节上一节我们没有注意哦！
5 |
6 | fixed 定位的元素不在文档流内！这只箱子从传送带上拿出来了，挂在浏览器上一动不动的。所以他和传送带上的箱子互不影响，传送带上也没有他的位置。
7 |
8 | 然后再来认识一个新的定位方式：`relative`，不解释，先看例子再说话。
9 |
10 | ```
11 |
12 |
13 |
14 |
15 | relative 定位实例
16 |
43 |
44 |
45 | 我是那个被定位了的格子
46 | 我是打酱油的格子，老大
47 | 我是打酱油的格子，老二
48 | 我是打酱油的格子，老三
49 |
50 |
51 | ```
52 |
53 | 这些代码不多说，都知道怎么回事，除了这个定位方式，看了效果我们来说。
54 |
55 | 
56 |
57 | 如果没有定位，就是这四个格子排排坐，但是不给果果吃，所以无聊的很。但是我给第一个元素做了 `relative` 定位，这是啥意思呢？就是叫这排排坐的某一位小朋友出来唱个歌。唱完他还回去坐，对吧，所以他的位置要留着，不能他出来唱歌别的小朋友就坐过去，要不然唱完歌回来发现没位子了要哭的。所以你看后面的小朋友还都坐在那里，虽然前面有了一个空着的位置。
58 |
59 | 然后呢，去唱歌的小朋友站在舞台上，他不会影响到坐着的那些小朋友，虽然我们看到他挡住了后面坐的的小朋友，但是只是视线上的遮挡，并不会发生什么肢体上的冲突，否则……去看演唱会什么的也太爽了点。
60 |
61 | 然后就是位置问题，其实也挺简单的，`left` 就是现在位置的左边缘距离原来位置的左边缘的距离。就是老师说，小红，来，起来给大家唱个歌，从你座位开始，向前走两步，再向右走三步，站在那里唱（这个老师是个逗[哔~]）。那么小红唱歌的位置跟她坐着的时候左手移动的距离是三步，而后背移动的相对距离是两步，这都很好理解。
62 |
63 | 那么，现在我们知道了 relative 的定位方式，在文档流中保留原有位置，然后基于原来的位置进行偏移。现在仔细想想，跟 fixed 的区别还是蛮大，很好记。但是跟下一节要学的就容易混淆了，所以先把今天的记牢再看下一节。
64 |
65 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/37.zip)**
66 |
67 | ---
68 |
69 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
70 |
71 | > **alay9999@163.com （刘源）**
72 |
73 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
74 |
75 | * 主站（2018 新版上线）：https://dmnydn.com/
76 |
77 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter38.md:
--------------------------------------------------------------------------------
1 | 第三十八章 定位（三）
2 | ===
3 | 前边的都记住啦？那就来看今天的。
4 |
5 | 其实我觉得，日常用 `relative` 定位的地方并不多，但是又绝对不少。这话怎么理解呢？就要先看今天的定位方式：`absolute` 了。
6 |
7 | 这个简单，就把上节课的例子的定位改成 `absolute` 就好了，我就不再复制一遍了，来看看效果。
8 |
9 | 
10 |
11 | 现在看到，红色的格子没了他原来的位置。这就是老师说：“小明，你给我搬着桌子椅子滚出去！”然后就连他的位置都不给留了，就当没他这回事。
12 |
13 | 然后再说定位，老师都不要小明了，所以他也不可能相对于他原来的位置进行定位了，班里都不承认他了，哪里还有位置啊。
14 |
15 | 那么他的 `left` 之类的属性相对于谁呢？相对于套在他外面的，从他开始往外数，第一个定位方式不是 `static` 的元素。这个听起来乱，其实也很简单，就是不是默认定位方式的元素。
16 |
17 | 就是小明这孩子虽然淘气，但是有良心啊。默认的不敢跟别人说自己是被某某学校或者说自己被某某班开除的，他怕给学校啊、班级啊……丢脸。只有当这些集体声明过不在乎（声明其他的定位方式），他才敢说自己是从那里出来的。而且，为了牵连更少的人跟自己丢脸，如果班级和学校都做了声明，他只说班级，不说学校。
18 |
19 | 如果他外面的元素都没有声明其他的定位方式怎么办？那他相对于页面的最边缘进行定位，注意是页面，不是 html 或者 body 元素，是更外面的页面边缘。
20 |
21 | 但是这样想找小明在哪里真的好难！所以一般的我们会给父级元素进行 `relative` 定位，但是不进行偏移，就是不设置 left 什么的值，这样父级元素还在他原来的地方，还站着原来的位置，仿佛什么都没变化过。这就明白了为什么前边我说 `relative` 用的不多却也不少，因为单独用它本身特性的地方可能比较少，但是出现 `absolute` 定位的时候，他一般都会在外层辅助性的出现。
22 |
23 | 就是小明被轰出去了，老师很开心，说我们全班大合唱庆祝一下吧，但是不用动地方了，都在座位上唱就好了。反正我说的挺玩笑的，你理解就好，后面我们会有案例来专门说明这些问题的。现在就是把故事听明白，知道我比喻的是些什么。
24 |
25 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/38.zip)**
26 |
27 | ---
28 |
29 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
30 |
31 | > **alay9999@163.com （刘源）**
32 |
33 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
34 |
35 | * 主站（2018 新版上线）：https://dmnydn.com/
36 |
37 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter39.md:
--------------------------------------------------------------------------------
1 | 第三十九章 坐标系
2 | ===
3 |
4 | 现在有些同学可能已经有疑问了，你看这几种定位啊，都是让元素到了别的元素的前面。但是要是我们用这种方式把多个元素定义到了相同的位置，究竟谁在前面谁在后面？
5 |
6 | 这时候就涉及到了网页的坐标系，这是一个三维的坐标系，然而并不复杂在三维层面。真正让人头疼的是二维上的各种变化。让我们从最简单地聊起。
7 |
8 | 最简单的，网页的的左上角为坐标系的原点，向右为 X 轴的正方向，向下为 Y 轴的正的方向。那么向着屏幕外则是 Z 轴的正方向。
9 |
10 | X、Y 轴我们用诸如像素之类的单位进行测量，而 Z 轴则只有顺序值，没有单位，它对应一个单独的属性值 `z-index` 来表示元素在这个方向上的顺序，这有就是我们前边问题的答案。（这个下一章进行演示）
11 |
12 | 如果只是这样我们当然很容易理解和掌握，但是很多时候事情没这么简单。元素的位置并不是固定的，所以有些东西就很难用默认的原点进行计算了。比如前边学习的背景位置（`background-position`），我们不能说元素背景在上边这个默认坐标系中位置，那样计算很麻烦，而且我们以后如果需要给元素移动位置，还要再次计算这个坐标值，显然很烦恼的。所以我们就用了相对坐标系。以元素的左上角为原点，去计算背景图片的偏移量（坐标）。那么其实这个背景定位的值也就是背景图的左上角相对于原点（元素的左上角）的坐标值。
13 |
14 | 你看我说了这么多左上角，因为在网页中左上角是一个很常用的定位基准，为什么选他？因为你的元素宽高的变化并不会影响左上角的位置（大部分情况下）。这样比较便于计算，这也是希望让事情变得简单。其实元素的宽高也可以看作是元素右下角点相对于左上角点（原点）的坐标。
15 |
16 | 然后再说前边用到的 `left`、`right`、`top`、`bottom` 这几个属性。他们涉及到的坐标系其实只有一个轴，比如 `left` 它涉及到的方向就是左右而已，或者说只是 X 轴的正负方向而已，这时候我们再去强调是哪个轴就已经是画蛇添足了。然后如果我们还按照基本的坐标系去判断正负方向依旧是徒增烦恼的做法，所以干脆根据我们的第一直觉，向着元素内的方向即为正方向，这样好记好判断。
17 |
18 | 同理的，padding 的四个方向也因为相同的原因而视为向内的是正方向。
19 |
20 | margin 是和 padding 相对的，他们补的方向相反，所以 margin 以向元素外的方向为正方向。
21 |
22 | 这一章文字不多，但是很重要，因为这些问题几乎遍布了元素定位的每一个方面，希望仔细想想，努力去理解他们。
23 |
24 | ---
25 |
26 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
27 |
28 | > **alay9999@163.com （刘源）**
29 |
30 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
31 |
32 | * 主站（2018 新版上线）：https://dmnydn.com/
33 |
34 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter4.md:
--------------------------------------------------------------------------------
1 | 第四章 做点准备工作
2 | ===
3 |
4 | 英文：HyperText Markup Language（我现查的），翻译过来是“超文本标记语言”。
5 |
6 | 超文本：说明归根结底还是个文本文件。
7 |
8 | 标记语言：前边都见识到了。
9 |
10 | 那么记住这两点再学 Html 就简单了，因为你抓住了他的关键。
11 |
12 | 现在我们要开始做一些准备工作了哦，“工欲善其事，必先利其器”嘛，本来吧，就一个文本文件而已，咱们用记事本也可以无压力的编辑他，但是用记事本阅读黑压压的代码可就真的有压力了，所以我们要用到一款小巧而强大的编辑器 Notepad++（[http://notepad-plus-plus.org/zh/](http://notepad-plus-plus.org/zh/)）。下载和安装之类的事情我就不去细说了，如果看不懂就一路下一步就好了。
13 |
14 | 那么，用它有什么好处呢？我们来看一看代码高亮，比如我们看下面一段代码：
15 |
16 | ```
17 |
18 |
19 |
20 |
21 | Document
22 |
23 |
24 |
25 |
26 |
27 | ```
28 |
29 | 这样五颜六色的代码就是代码高亮了，他不会影响你的内容，但是用不同的颜色标记之后的内容变的十分易于阅读，我们都是懒人，那么这么舒服的东西自然是要用起的。当然用它的好处可不止这些，我们以后慢慢再讲。
30 |
31 | 然后很多朋友问我，我用 Dreamweaver 如何？或者我用 Sublime Text 会不会显得更加高大上？我跟你说，都行，都没问题，这就好像我午饭吃馒头还是米饭？都没所谓，因为都能吃饱，至于你说哪个更好吃一些？天啊，我知道你什么口味？吃你自己喜欢吃的，用你自己喜欢用的，总而言之，适合自己的就是最好的。
32 |
33 | 那么东西准备好了，我来讲两个受益终生的知识点哦：
34 |
35 | > * 代码中所有标点均为**英文标点**，这一点一定要记清，新手最常犯的错误就在这里；
36 | > * 代码缩进（就是上面代码中某些行前边的空白）一定要留好，这个空白是用 Tab 键打出来，空白的长度表示代码的层级，缩进整齐的代码阅读起来会十分轻松；
37 |
38 | 这两点没看懂也没关系，先有个印象，等到后面用着用着就懂了。
39 |
40 | > **本章学习卡片：[卡片 4](http://coffee.zji.me/card.html?name=chapter4)**
41 |
42 | ---
43 |
44 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
45 |
46 | > **alay9999@163.com （刘源）**
47 |
48 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
49 |
50 | * 主站（2018 新版上线）：https://dmnydn.com/
51 |
52 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter40.md:
--------------------------------------------------------------------------------
1 | 第四十章 定位实例（一）
2 | ===
3 |
4 | 讲了这么多，有点晕了？嗯，很好，很好！来我们做个练习来更加的迷糊一下，咳咳，是深入理解一下。
5 |
6 | 其实这个案例也十分的简单，本来是可以在前面所写的页面中直接添加的，不过怕大家搞乱了，所以索性新写一个好了。当然我们只写主要部分，不会再写一个完整页面的。
7 |
8 | 我们要写的是一个二级导航，和一个返回顶部的按钮。其他部分咱们就简单呵呵一下，你们要理解我在简言之。先来写个基础的结构哦~
9 |
10 | ```
11 |
12 |
13 |
14 |
15 | 定位练习
16 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
68 | - 首页
69 | - 分类 ▼
70 | - 关于
71 | - 联系
72 | - 福利
73 |
74 |
75 | ```
76 |
77 | 他的 CSS 如下：
78 |
79 | ```
80 | #nav ul {
81 | margin: 0;
82 | padding: 0;
83 | float: left;
84 | }
85 | #nav ul>li {
86 | margin: 0;
87 | padding: 0 35px;
88 | list-style: none;
89 | float: left;
90 | color: #FCFCFC;
91 | line-height: 36px;
92 | }
93 | .clear {
94 | clear: both;
95 | }
96 | ```
97 |
98 | 这也全是前面学过的内容，我们不多说，链接我不写了，反正这也不是我们这次的重点，我们尽量写的清爽一些。
99 |
100 | 然后接是一个新的选择器 `>` 表示某元素的子元素里的什么。`#nav ul>li ` 就是说 `#nav ul` 的所有是 li 子元素。就这么说吧，以前我们说 `#nav ul li`，是说这个 ul 的所有后代，哪怕是七十八代玄孙，只要叫 li ，那就有一个算一个。现在 `#nav ul>li ` 就只说他儿子辈里面叫 li 的，跟其他辈分没有毛关系了。
101 |
102 | 你说我们写了这么半天学过的东西，没见到啥区别啊。嗯……你看到分类那一项我写了个向下的三角箭头么？我们要给他写一个下拉菜单，不过……打字打得手疼了，下节课再继续……
103 |
104 | ---
105 |
106 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
107 |
108 | > **alay9999@163.com （刘源）**
109 |
110 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
111 |
112 | * 主站（2018 新版上线）：https://dmnydn.com/
113 |
114 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter41.md:
--------------------------------------------------------------------------------
1 | 第四十一章 定位实例（二）
2 | ===
3 |
4 | 那么我们说了，这个要做一个二级菜单的，现在刚有了第一级的菜单，现在来写第二级。
5 |
6 | 二级菜单是什么呢？其实还是一个列表，有那么几个列表项。所以还是 ul 和 li 标签而已。那么放在哪里呢？这个问题很有意思，真正的解答是：放在哪里都可以。我来解说几种情况：
7 |
8 | 第一种：像我们这个实例这么简单的情况。一般的我们为了说明他的层级关系，都会把它放在父级导航项内；
9 |
10 | 第二种：二级甚至三级或者更多级导航很复杂，代码量很大。这时候我们一般把它放在页尾。因为，一般这些导航默认是不显示的，那么让不显示的代码在前面，打开页面的时候就会先载入这部分代码，然后再载入下面那些需要被显示的代码，就显得页面加载速度比较慢了。所以我们把这些不需要立刻显示出来的代码放在最后去加载。至于位置，当然用各种方式定位过去就是了，有的时候也可能用 JS 动态的把这部分代码再插到前面。
11 |
12 | 好啦，开始我们本次的简单任务，那么加上二级导航之后就变成了这个样子。
13 |
14 | ```
15 |
16 | - 首页
17 | - 分类 ▼
18 |
19 | - 小分类一
20 | - 小分类二
21 | - 小分类三
22 | - 小分类四
23 |
24 |
25 | - 关于
26 | - 联系
27 | - 福利
28 |
29 |
30 | ```
31 |
32 | 然后我们来给二级导航写 CSS ：
33 |
34 | ```
35 | #nav>ul>li>ul {
36 | margin: 0;
37 | padding: 0;
38 | background:#363636;
39 | position: absolute;
40 | top: 40px;
41 | }
42 | ```
43 |
44 | 我们一段段的说，这里定义的是 #nav （导航）里的 ul （一级菜单）里的 li （一级菜单项）里面的 ul （二级菜单）。好了，选择器就说到这里，下次不说了，说了两遍，差不多该看懂了。
45 |
46 | margin 和 padding 都是清除元素的原有样式，这事情我们也做过很多次了，background 是设置背景色。
47 |
48 | position 是定位，absolute 定位什么特点？不给自己保留原来的位置，而且相对于他外面第一个不是默认定位方式的元素定位。然而他外面并没有……这时候定位变得复杂。所以我们要让它相对于它外面的那个 li 标签进行定位。那么我们要给前面的 li 标签设置一个定位 `position: relative;` ，但是并不设置定位的位置数值。这样 li 位置没有发生变化，而且也占据着原来的位置。但是它内部的 ul 就可以以它为基准进行定位了。
49 |
50 | top 是说二级菜单相对于他外面的 li 标签，顶部的距离是 40px ，正好给一级菜单留出了位置。
51 |
52 | 然后我们定义一下二级菜单的菜单项就可以去看效果了：
53 |
54 | ```
55 | #nav ul>li>ul>li {
56 | width: 80px;
57 | margin: 0;
58 | padding: 0 35px;
59 | list-style: none;
60 | float: left;
61 | color: #FCFCFC;
62 | line-height: 36px;
63 | border-bottom: 1px solid #666;
64 | }
65 | ```
66 |
67 | 这部分不解释了，因为并不复杂。
68 |
69 | 然后我们就获得了如下效果的导航菜单：
70 |
71 | 
72 |
73 | 那么趁着还不复杂，赶紧的思考一下这个定位是怎么实现的，把你不懂得地方都去试着修改或者删除一下，看看会发生什么样的变化。
74 |
75 | > **本章代码下载：[本章代码](http://coffee.zji.me/show-code/41.zip)**
76 |
77 | **本书是收费的，不过交费凭自觉。**价格定义为每人请我喝一杯咖啡（哪种品质的咖啡随意），支付宝账号：
78 |
79 | > **alay9999@163.com （刘源）**
80 |
81 | **本书现已重写，最新版内容请查看主站更新。**本书目前除主站之外，仅授权站酷、极客学院 Wiki发布，其他站点均为无授权盗载。
82 |
83 | * 主站（2018 新版上线）：https://dmnydn.com/
84 |
85 | 未经本人许可，禁止任何形式转载。相关事宜请联系： dms@zji.me
--------------------------------------------------------------------------------
/chapter42.md:
--------------------------------------------------------------------------------
1 | 第四十二章 定位实例（三）
2 | ===
3 |
4 | 然后我们的问题是：这货怎么一直这么显示着，这不是我想要的结果啊，要是可以鼠标划到上面才显示，鼠标离开就隐藏有多好？当然了，这种效果几乎是各个网站所必备的。
5 |
6 | 第一步：我先把它隐藏掉，省得碍眼。
7 |
8 | 这个最简单了，给 `#nav>ul>li>ul` 选择器里面加一个属性就好，`display:none;`，意思就是显示方式是不显示。好了，不碍眼了，但是，他会一直隐藏，那就没什么作用了，所以：
9 |
10 | 第二步：鼠标滑过显示。我们说过鼠标滑过这个状态使用伪类 `:hover` 来表示。所以其实我们如下设置即可：
11 |
12 | ```
13 | #nav>ul>li:hover>ul {
14 | display: block;
15 | }
16 | ```
17 |
18 | 这里要理解的一个问题是，我们把鼠标划到哪个元素上，而显示出来的又是哪个元素？那么这里是当鼠标放在 #nav>ul>li 上面的时候，它里面的 ul 被显示出来。
19 |
20 | 那么我们预期的效果就达到了，大家要自己研究一下源码，定位这个问题在 CSS 里面是个很重要的问题。
21 |
22 | 然后我们开始下一个练习，给这个页面右下添加一个返回首页的按钮，就像很多网站都有的那样。大家应该都知道什么样子，他不随页面滚动，一直处于页面的右下角。
23 |
24 | 像这种浮于页面之上的东西，他并不占据什么位置。也很难说他在逻辑上属于什么元素。而且它的重要性也不是很高，只是增加用户体验，而不是用户打开页面所第一预期的内容。所以这种代码一般放在页尾，就是 `` 标签的前面。
25 |
26 | 那么这个按钮写起来很简单的：
27 |
28 | ```
29 | 
81 |