├── 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
├── chapter5.md
├── chapter6.md
├── chapter7.md
├── chapter8.md
├── chapter9.md
├── cover.jpg
└── images
├── 10-1.png
├── 14-1.png
├── 15-1.png
├── 15-2.png
├── 15-3.png
├── 15-4.png
├── 16-1.png
├── 16-2.png
├── 16-3.png
├── 17-1.png
├── 17-2.png
├── 17-3.png
├── 17-4.png
├── 17-5.png
├── 17-6.png
├── 17-7.png
├── 18-1.png
├── 18-2.png
├── 18-3.png
├── 19-1.png
├── 19-2.png
├── 19-3.png
├── 2-1.png
├── 2-2.png
├── 2-3.png
├── 20-1.png
├── 20-2.png
├── 20-3.png
├── 20-4.png
├── 20-5.png
├── 20-6.png
├── 20-7.png
├── 20-8.png
├── 21-1.png
├── 21-2.png
├── 21-3.png
├── 21-4.png
├── 21-5.png
├── 21-6.png
├── 21-7.png
├── 21-8.png
├── 21-9.png
├── 22-1.png
├── 22-2.png
├── 22-3.png
├── 22-4.png
├── 22-5.png
├── 22-6.png
├── 22-7.png
├── 22-8.png
├── 23-1.png
├── 23-2.png
├── 23-3.png
├── 24-1.png
├── 24-10.png
├── 24-11.png
├── 24-2.png
├── 24-3.png
├── 24-4.png
├── 24-5.png
├── 24-6.png
├── 24-7.png
├── 24-8.png
├── 24-9.png
├── 25-1.png
├── 25-2.png
├── 25-3.png
├── 25-4.png
├── 25-5.png
├── 25-6.png
├── 25-7.png
├── 25-8.png
├── 25-9.png
├── 26-1.png
├── 26-2.png
├── 26-3.png
├── 27-1.png
├── 27-2.png
├── 27-3.png
├── 27-4.png
├── 27-5.png
├── 28-1.png
├── 28-2.png
├── 28-3.png
├── 29-1.jpg
├── 29-2.png
├── 29-3.png
├── 3-1.png
├── 3-2.png
├── 3-3.png
├── 30-1.png
├── 31-1.png
├── 32-1.png
├── 32-2.png
├── 32-3.png
├── 32-4.png
├── 33-1.png
├── 33-2.png
├── 33-3.png
├── 33-4.png
├── 33-5.png
├── 33-6.png
├── 35-1.png
├── 35-2.png
├── 36-1.png
├── 37-1.png
├── 38-1.png
├── 39-1.png
├── 39-2.png
├── 4-1.png
├── 4-2.png
├── 4-3.png
├── 4-4.png
├── 40-1.png
├── 40-2.png
├── 42-1.png
├── 5-1.png
├── 5-2.png
├── 5-3.png
├── 6-1.png
├── 6-2.png
└── 9-1.png
/README.md:
--------------------------------------------------------------------------------
1 | 前言
2 | ===
3 |
4 | > 鉴于本人对此书满意度不够，现重新开坑：
5 | > **《代码能有多难？——简单的网页代码书》**
6 | > * 主站首发： http://coffee.zji.me/
7 | > * Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
8 | > * 简书： http://www.jianshu.com/users/d37eaf3de0ff
9 | > * 站酷： http://www.zcool.com.cn/u/12927742
10 | > **感谢的大家的支持，我努力写的通俗易懂，也努力让错别字少一些，^-^**
11 |
12 | 很多搞设计的只是作图，对于代码向来是瞥一眼就觉得是天书，因此再无兴趣。其实写个网页能有多难？
13 |
14 | 也许比 Word 排版简单，至少在我，是坚持如此认为的。
15 |
16 | 写代码也不过是像写书一样表达出自己的想法而已，唯一的区别就是要遵守一些相应的语法规范，就如同我们写作的时候要注意不要写病句一样，难么？还能比高考的时候被逼在四十分钟里写八百字的作文难么……
17 |
18 | 但是，一旦你学了，哪怕学的并不好，别人再想在代码方面忽悠你就难了，喵哈哈，这是多么美妙和幸福的事情啊！
19 |
20 | 所以，为什么不试试呢？万一，万一学会了呢？
21 |
22 | **特别提示：** 本教程不按常理出牌，各种暴力通行，想借此获得理论基础的可能会失望，但是想要快速变成生产力的实用派肯定会爱不释手。
23 |
24 | 官方问答社区：[http://coffee.zji.me/](http://coffee.zji.me/)
25 |
26 | 本书持续更新中……
--------------------------------------------------------------------------------
/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 | * [第九章 Div 和 Class、Id](chapter9.md)
13 | * [第十章 神一样的 CSS](chapter10.md)
14 | * [第十一章 一些学习方法](chapter11.md)
15 | * [第十二章 css 的书写格式](chapter12.md)
16 | * [第十三章 相对地址](chapter13.md)
17 | * [第十四章 让代码真的活起来](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 | * [第二十六章 开始新的尝试](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 | * [第四十一章 加点 JavaScript](chapter41.md)
45 | * [第四十二章 再说说 JQ](chapter42.md)
46 | * [第四十三章 开始玩 JQ](chapter43.md)
47 | * [第四十四章 继续玩（一）](chapter44.md)
48 | * [第四十五章 继续玩（二）](chapter45.md)
49 | * [第四十六章 继续玩（三）](chapter46.md)
50 | * [第四十七章 嗯哼，那只按钮会跳舞（一）](chapter47.md)
51 |
52 |
--------------------------------------------------------------------------------
/chapter1.md:
--------------------------------------------------------------------------------
1 | 第一章 一些准备工作
2 | ===
3 |
4 | 网页代码，如果你愿意，其实用 Windows 自带的记事本就可以编辑了。当然，这个工具太过简陋，不只是不够酷，而且也不怎么好用，代码如线团般展示在眼前的感觉不只是您，所有人看了都想吐。
5 |
6 | 其实，换个工具就可以很爽了，比如我习惯使用 Notepad++ （[http://notepad-plus-plus.org/zh/](http://notepad-plus-plus.org/zh/)）这款文本编辑器，小巧，强大！
7 |
8 | 下载安装这种小事情我就不讲解了，如果不理解各种设置项，那么就一路下一步安装吧。o(∩_∩)o
9 |
10 | 这个就是日后我们跟代码打交道的主要工具，就像我们作图常用的 Photoshop 一样。
11 |
12 | > **特别提示：**在本书中，作为代码出现的标点符号均为英文半角标点，这一点作为新手一定要牢牢记住，否则很可能出现你查找半个小时的错误只是因为用错了一个标点。
--------------------------------------------------------------------------------
/chapter10.md:
--------------------------------------------------------------------------------
1 | 第十章 神一样的 CSS
2 | ===
3 |
4 | 神一样的 CSS ，本来网页世界是一片黑暗的，后来 CSS 给了他色彩。
5 |
6 | css 叫做层叠样式表（英语：Cascading Style Sheets，简写CSS），这是我刚从维基百科上抄下来的（嘻嘻）。干他那么多呢，反正 CSS 就是主管样式的，什么是样式？除了内容就是样式。比如说：您好！这是内容，那么您好用什么字体，多大字号，显示在什么位置，什么颜色，什么背景色……这些就是样式。
7 |
8 | 这个神一样的对手（混熟了就是神一样的朋友）究竟能做什么我们需要随着学习慢慢去了解。这节课我们先说说要把 CSS 写在哪里。
9 |
10 | **第一种：写在 Html 标签里**
11 |
12 |
13 |
14 |
15 | 这种很直接，优先级也最高，但是不简洁，想象我要是给一个元素设置十几个属性，然后整个页面的代码会乱成什么样子啊。而且也不能重用，下一个元素跟这个完全一样的样式，但是我还得复制一遍过去，而且将来修改了还要挨个去修改，简直更混乱了！
16 |
17 | **第二种：写在 head 里**
18 |
19 |
20 |
21 |
22 | Document
24 |
32 |
33 |
34 | ……
35 |
36 |
37 |
38 | 上面代码中 style 标签中的部分便是。这种方法把 css 代码集中在一起便于查找和管理，只是页面文件会比较大，也有人说可能不利于 SEO （搜索引擎优化）。当然在我看来最大的麻烦是不方便我编辑。因为我要在下面的 html 代码里写网页结构，在上面的 css 里设置样式这样上面下面来回找一会就晕了。
39 |
40 | **第三种：写在 css 文件里**
41 |
42 |
43 |
44 |
45 | Document
47 | 这是一个段落
63 |
64 | 看到了，上面的 css 就会对下面的 html 结构产生作用。那么要是这里有很多个段落呢？那么既然都是 p 标签，便全部产生作用，咦，这个太好了！我想设置全部的段落文字样式也只写一次 css 就搞定了。
65 |
66 | 那么前面我们还讲了class 和 id ，说他们就是用来区分 html 元素的，那么他们的选择器怎么写呢？
67 |
68 | #topbox { css 代码 }
69 | .box { css 代码 }
70 |
71 | 对下面的 html 结构起作用
72 |
73 |
74 |
75 |
76 |
77 | 这样就很明白了，前边是井号（#）的就是说的 id ，前边是点（.）的就是说 class。
78 |
79 | 然后放一个完整的网页代码大家试试看。
80 |
81 |
82 |
83 |
84 | Document
86 |
94 |
95 |
96 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, delectus, quas, sapiente, hic vero quos eveniet doloremque iste neque molestias explicabo aperiam possimus consequuntur eligendi a rerum suscipit perferendis quae?
97 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, totam neque non quam reiciendis itaque distinctio nesciunt! Repudiandae, architecto sint quod pariatur magnam ex neque dolorum repellendus quisquam culpa minus.
98 | Eum, placeat, illum, nobis at doloremque ut perspiciatis dolor vel perferendis debitis commodi voluptatibus a hic? Assumenda, soluta, voluptate maiores laborum id nobis fugiat in praesentium repellat maxime velit necessitatibus.
99 |
100 |
101 |
102 | 效果如下
103 |
104 | 
--------------------------------------------------------------------------------
/chapter11.md:
--------------------------------------------------------------------------------
1 | 第十一章 一些学习方法
2 | ===
3 |
4 | 按理说这一章应该写在最开始，但是我要是说在最开始估计这个教程也就无法发挥它应有的作用了。能够把书读到这里的应该也都是真心想去把代码弄明白的同学了，那么我们来说点掏心窝的东西吧。
5 |
6 | **第一、也是很重要的，不要去记呀。**
7 |
8 | 我们这是学代码不是学英语，英语是用来说的，你总得说得出一些完整的句子。代码是用来写的，你知道就行，一边写一边查太正常了。常用的东西自然而然的就记住了，不常用的随手一查，写对了，实现预期功能了就达到目的了，去背代码……想着都搞笑，你见过程序员晨练叨咕着背代码么？
9 |
10 | **第二、不背，那要学到什么程度？**
11 |
12 | 要读懂，明白为什么，知道有什么。我知道 css 可以设置文字颜色，可以了。不会写？查呀，搜索“css 文字 颜色”你会把？然后可以搞定了吧。当然，你最好记得一些 css 代码的格式，要不然查到了之后我们还要再去查用什么格式怎么写，这样效率有点低。
13 |
14 | **第三、可是我没读懂咋办啊？**
15 |
16 | 往下看呗，纠结那干啥，一般来说，你再看下去三五章自然就明白前边的意思了。知识是一张网，刚告诉你几个点，还没法连起来的时候不明白是自然的，明白才奇了怪了。你要是这章不明白就老在原地纠结那永远都无法读明白。而且有些东西我也会在很多章节反复讲解，以确保大家能够学明白。
17 |
18 | **第四、然后要怎么学？**
19 |
20 | 勤动手，学代码不怕你不懂，就怕你不动。讲了，明白了，动手试试。成功了，改一改再试试，要实践，要动脑。思考，尝试，才能深入地理解。才能牢固的记忆。
21 |
22 | ---
23 |
24 | 别把它当作学习，就当是玩个游戏，先来点操作指南，然后上手玩起来。慢慢的你就发现乐趣了。反正我到现在也写写开了，后面的章节将各种没溜，各种抖机灵，让你们想认真学习都不能。而且到了 css 也开始有意思了，当然到了 JavaScript 就更加无所不能的 high 了。
--------------------------------------------------------------------------------
/chapter12.md:
--------------------------------------------------------------------------------
1 | 第十二章 css 的书写格式
2 | ===
3 |
4 | 按着我的个人习惯 css 与 html 分离，两个文件在编辑器里左一个右一个，同步编写。html 写下结构，css 里就写对应的样式。那么比如我写下了如下的 html
5 |
6 |
7 |
8 |
9 | Document
11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, delectus, quas, sapiente, hic vero quos eveniet doloremque iste neque molestias explicabo aperiam possimus consequuntur eligendi a rerum suscipit perferendis quae?
15 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, totam neque non quam reiciendis itaque distinctio nesciunt! Repudiandae, architecto sint quod pariatur magnam ex neque dolorum repellendus quisquam culpa minus.
16 | Eum, placeat, illum, nobis at doloremque ut perspiciatis dolor vel perferendis debitis commodi voluptatibus a hic? Assumenda, soluta, voluptate maiores laborum id nobis fugiat in praesentium repellat maxime velit necessitatibus.
17 |
18 |
19 |
20 | 然后我就要在这个 html 文件所在目录新建一个 文件，名叫 style.css （被引用的 css 文件名）。然后在这个 css 文件里些如下内容
21 |
22 | /* 这里是CSS 的注释，你爱写点啥写点啥 */
23 | #topbox {
24 | color:red;
25 | }
26 | .box {
27 | color:blue;
28 | }
29 |
30 | 其实就是
31 |
32 | > 选择器 {属性:属性值;}
33 |
34 | 然后属性和属性值可以多次重复，就像下面：
35 |
36 | #topbox {
37 | color:red;
38 | width:100px;
39 | height:300px;
40 | }
41 |
42 | 其实你都写在一行也行，我一个属性一行，前边还有缩进纯粹是为了便于阅读。所以还有 css 压缩一说，就是把 css 文件里所有不必须的空白和换行全部去掉，这样可以减小 css 文件的体积。当然这样的文件想要阅读……代码高亮了也如线团一般，所以我都是冲洗格式化以后再读。
43 |
44 | 然后在 html 中的属性值很多都不带单位，比如 width=100 就是宽度是 100 像素。但是在 CSS 里则必须带上单位 width:100px; 才行。
--------------------------------------------------------------------------------
/chapter13.md:
--------------------------------------------------------------------------------
1 | 第十三章 相对地址
2 | ===
3 |
4 | 到这里我们必须先说清楚一个概念：相对地址。以后涉及到文件的地方我们要经常用到这个概念，所以还是先讲清楚了的好。
5 |
6 | 地址是用来描述描述文件位置的，它分为绝对地址和相对地址。
7 |
8 | 绝对地址：比如 C:\windows\，再比如 http://www.google.com ，这样拿出来就能确切制定一个位置，不会产生任何疑问的地址就是绝对地址。
9 |
10 | 相对地址，有了相对两个字就得有个参照物，你距离我 100 米，我就是参照物，没有我这个参照物，100 米这个距离就没有任何意义。在我们说相对地址的时候一般的是在那里说就以哪里为参照物。在 a.html 这个文件里的相对地址就以 a.html 这个文件作为参照物。
11 |
12 | 现在开始举例子时间，我们假设我们有如下的目录结构，没有后缀的就是文件夹，
13 |
14 | MyCode
15 | index.html
16 | images
17 | pic.jpg
18 | 1.html
19 | css
20 | style.css
21 | haha.jpg
22 |
23 | 这个结构我希望大家能够看懂，MyCode 是我们存放这些文件的文件夹，里边有 images 和 css 两个文件夹，还有 index.html 和 haha.jpg 两个文件，然后 那两个文件夹里还有……文件。
24 |
25 | 现在我们在 index.html 里写其他几个文件的相对地址
26 |
27 | images/pic.jpg
28 | images/1.html
29 | css/style.css
30 | haha.jpg
31 |
32 | 然后自己理解一下，那么我们在 index.html 文件里写一个显示图片的代码就可以写作
33 |
34 | 我的第一个页面
25 |
9 |
10 |
11 | 建立一个 id 为 nav 的 div ，用来包含所有导航部分。那么我们希望导航的背景色是接近黑色的灰，比如 #2D2D2D，
12 |
13 | 那么我们在 css 里写上
14 |
15 | #nav {
16 | background:#2D2D2D;
17 | }
18 |
19 | 当然，如果你这时候去看页面，会看到依然是空白一片的，为什么呢？因为这个div 里没有任何东西，然后他的大小是 0 * 0 ，自然也就没有任何显示了。
20 |
21 | 那么我们来规定一下它的大小吧，比如高度 45 px，那宽度呢？从左到右，我希望是通栏的啊，对吧，要不跟下面的通栏海报不搭配啊。那么宽度就是 100%。这个百分比是相对的，相对于他的上一级元素，那么 #nav 的上一级元素是谁呢？我们还没写别的，他的上级只可能是 body 标签了。
22 |
23 | 好，我们把 css 里填写上高度和宽度。
24 |
25 | #nav {
26 | background:#2D2D2D;
27 | height:45px;
28 | width:100%;
29 | }
30 |
31 | 预期中应该是这个样子的：
32 |
33 | 
34 |
35 | 希望你也成功做到了这一步，如果你检查了每一个字幕，每一个标点都没发现问题，但是就是显示一片空白或者连标题都是乱码的话，你在 Notepad++ 菜单里找“格式”，把两个文件都设置为 utf-8 就好了，如下图：记得每个文件都要设置一下，这就好像作图的时候使用 RGB 色彩还是 CMYK 色彩一样的问题。
36 |
37 | 
38 |
39 | 然后回过头来注意我们这个页面的效果，我们不禁要说：“我累个擦，怎么还有白边啊？”导航上边不是应该紧贴顶边的么？都设置宽度 100% 了，左右还没填满？
40 |
41 | 这个问题出在 body 身上，浏览器会给一些页面元素一些默认的属性，比如字体多大啊，什么字体啊什么什么的。这个是 body 默认有个外补（外补这个东西后面讲），那么我们需要消除这些默认属性对我们的影响，所以我们还要为此加上一些 css
42 |
43 | html, body {
44 | margin:0;
45 | padding:0;
46 | }
47 |
48 | 然后我们的代码变成了这样
49 |
50 | 
51 |
52 | 我把它们放在了 #nav 的前面，当然其实他们的先后顺序并不重要，但是按照他们的层级去写还是有助于以后我们阅读代码和查询的，一般的全局的要写在最前面，上一层要写在下一层的前面。
53 |
54 | 好了，再看代码，选择器我写了 html, body ，其实这俩我单独写哪个你都能看明白，就是给某个标签的元素指定他的 css 样式。那么现在两个选择器中间用逗号（英文逗号）隔开呢？也没啥特殊的，就是给他两都设置如下的 css 属性。
55 |
56 | margin 是外补，就是在元素外边补充空白，padding 是内补，就是在元素里边补充空白。这两个我们会在后面专门的去讲解，现在就先知道有这么个事情继续可以了。我把他俩都设置为零，于是就相当于没有他们什么事了，也就消除了影响。
57 |
58 | 零是个很特殊的东西啊，我说过在 css 里数值要写单位，但是 0 却可以不写单位，因为无论什么单位 ，0 都是等价的。别抬杠，我知道 0°C 和 0°F 和 0°K 不是一码事，但是我们写网页目前还用不到温度这样的属性。
59 |
60 | 看看效果
61 |
62 | 
63 |
64 | 看看，多好，多黑！反正预期效果有了。下节课我们来给他添点内容
--------------------------------------------------------------------------------
/chapter16.md:
--------------------------------------------------------------------------------
1 | 第十六章 导航（二）
2 | ===
3 |
4 | 前一章我们只是做了一个容器，也相当于一个背景。下面我们准备往里放内容。但是在这之前我们要先讲一讲内补和外补。
5 |
6 | 我先举个例子，现在快递很暴力，我们的包裹都要多层保护才安心。所以我在我的纸箱外面包了一层塑料，厚度是五厘米（夸张了，别在意这个细节）。那么我的纸箱和其他纸箱放在一起，纸箱和纸箱间的距离是多少？就是隔着的那五厘米塑料，对吧？要是两个纸箱都裹着五厘米塑料呢？那就相距 5+5 = 10 厘米。这好像小学一年级数学题。这个裹塑料就是外补。
7 |
8 | 那么其实保护我们的物品还有一种方法，就是在箱子里面垫上海绵，假设我垫了三厘米海绵再放货物，那货物距离箱子多远？当然就是隔着的这三厘米海绵（别跟我说货物沉把海绵压扁了，我买的劣质海绵，就是不变形）。这就是内补。
9 |
10 | 外补（margin）和内补（padding）都可以指定特定的方向（上下左右，top，bottom，left，right），写法如下：
11 |
12 | margin-top:5px;
13 |
14 | 这就是在元素上面空出五像素来。其他方向以此类推。不写方向的话就是一起设置四个方向，规矩有些复杂，我说说，你听听，记不住的话就等后面慢慢理解
15 |
16 | margin:5px;
17 |
18 | 这个是四个方向都外补 五像素。
19 |
20 | margin:5px 10px 8px 0;
21 |
22 | 四个数值的话就是上右下左的顺序，从上开始，顺时针。就好像时钟从十二点开始转起，这样想就记住了。
23 |
24 | margin:5px 10px;
25 |
26 | 两个数值的话，平均分配啊，第一个数值代表上下（上下两个方向相同的数值），第二个数值是左右。两两相对，想到这个词就记住了。
27 |
28 | margin:5px 10px 8px;
29 |
30 | 还能再变态点吗？第一个数值是上，最后一个数值是下，剩下的不够分了，左右共用中间的一个数值。这个上下级总是要分开的，中间的左右平等的才可以共用，上边是长辈，下边是晚辈中间平等的是哥们，哥们是一个辈分的，所以一样。
31 |
32 | 这东西你记不住你就先看明白第一种就好，如果能学会前三种就很好很好了。
33 |
34 | 好了我们现在回到我们的导航代码上来：
35 |
36 |
37 |
38 |
39 | 这是我们上一章的成果，现在我们要是直接在里面写内容的话肯定默认是左对齐，就贴到最左边了，不好看。1920px 宽的显示器，你左上角显示导航，找着都觉得累。那么我们规定一个内容宽度，比如 960px ，我页面的主体内容都在这个宽度范围之内。然后这个960像素的区域又处于显示器的中间，这样就很舒服，也是我们平时最最基础的布局方法。
40 |
41 | 好了，我们添加一些代码变成如下
42 |
43 |
47 |
48 | 这个 #nav-content 宽度是 960px ，高度应该跟外边的 #nav 一致，是 45 像素。然后为了我们能看到效果，我先临时的给他一个背景色（如果不设置背景，一般的元素都是透明的，我们就看不到了），所以 css 如下：
49 |
50 | #nav-content {
51 | background:yellow;
52 | height:45px;
53 | width:960px;
54 | }
55 |
56 | 放在一起看看
57 |
58 | 
59 |
60 | 然后我把浏览器最大化之后看看效果。
61 |
62 | 
63 |
64 | 黄色的区域，也就是 #nav-content 的宽高都没问题，但是他在最左边，而不是页面的中间。我们要让他在中间。
65 |
66 | 你可能想到了，用外补或者内补把他顶到中间去（在他边上垫上东西，使他呆在合适的位置）。这个想法很正确，那么上下方向肯定是不用补了，都是 0 就挺好。可是左右呢？该补多少？你说我的显示器 1920 像素宽，一边补 480 像素正好。可是你考虑过浏览器的边框么？当然这还是小问题，网页可不是只给一个人看的啊，别人显示器不是这么大怎么办？更简单的浏览器窗口大小变化了怎么办？
67 |
68 | 所以我们左右补的不能是一个固定的数值，然后我们要这么写
69 |
70 | margin:0 auto;
71 |
72 | 上下补零（第一个数值），左右自动（第二个数值）。自动就是随便啊，我说了左右平起平坐的，那为了不打架就一人一半最合适啊，来，加上去试试效果。
73 |
74 | 
75 |
76 | 成功了吧，这个就是我们让元素居中的常用方法。但是你要注意，被居中的元素一定要有固定的宽度啊，否则这事好像不是简简单单平均分配就能解决的了，您说是不？
--------------------------------------------------------------------------------
/chapter17.md:
--------------------------------------------------------------------------------
1 | 第十七章 导航（三）
2 | ===
3 |
4 | 终于，在两节课的准备工作之后我们要书写导航的内容了呢~嘿嘿嘿嘿，想想还真有点小激动呢~
5 |
6 | 这个导航啊，可以当做一个列表看（谁第一个这么想的？其实我真心想拍死他！），就像这样
7 |
8 | > * 首页
9 | > * 分类
10 | > * 关于
11 | > * 联系
12 |
13 | 反正都是一项一项的鱲角出来……我怎么还是觉得有点牵强。所以我们使用无序列表来表现。
14 |
15 |
16 | 首页
17 | 分类
18 | 关于
19 | 联系
20 |
21 |
22 | 然后我们把这段代码放在 #nav-content 里面试试看
23 |
24 | 
25 |
26 | 打开页面……
27 |
28 | 
29 |
30 | 天啊，坑死个爹了，谁说这像导航的？我保证我不打死你。可是，现在好多页面都用这个方法写的，所以我们还是坚持着往下走走好了。
31 |
32 | 现在我们要给上述代码规定一些样式来改善现在这种坑爹的状况。首先我们要写一个选择器，你说就写 ul 或者就写 li 就可以选择这两个标签了。可是你再想想，这样可是对整个页面的 ul 或者 li 标签起作用的。你希望除了导航以外的列表也发生变化么？当然不是，所以我们要缩小选取范围。
33 |
34 | 其实用语言表述的话，我们需要选择的是 #nav-content 里面的 ul 还有 #nav-content 里面的 li ，对吧？然后看我怎么表达这个意思。
35 |
36 | #nav-content ul {
37 |
38 | }
39 | #nav-content li {
40 |
41 | }
42 |
43 | 看到了，用一个空格分割两个选择器，就表示什么里面的什么。选择器可以一个很神奇很强大的东西，他很复杂，我们分在课程中一点点学习。好了，开始写 css，首先 ul 就是个框，高度跟外面的 #nab-content 一样就行，宽度先不管他了，什么外补内补全都不要，于是就是：
44 |
45 | #nav-content ul {
46 | height:45px;
47 | margin:0;
48 | padding:0;
49 | }
50 |
51 | 这个挺好理解的啊，那么 li 呢？高度 45 像素也没问题，宽度应该多少？你说多少都不合适，因为我现在导航里写的都是两个字看起来很整齐好像很好办，但是如果有五个字的导航项呢？“请点个赞吧”和“首页”用一样的宽度就混乱了，这时候我们需要的是什么？间隔，相互之间的间隔是一样的。你想到了外补和内补。那用外补还是内补？应该是内补，内补算是箱子里的东西，也就是箱子跟着变大，这样我们可以点击的面积比较大，用外补，你补的部分没法点击，那就只是视觉上的作用了。
52 |
53 | #nav-content li {
54 | height:45px;
55 | margin:0;
56 | padding:0 30px;
57 | }
58 |
59 | 这个可以看得懂吧，我们试试效果。
60 |
61 | 
62 |
63 | 结果一看，继续坑爹，这时候我们想到一个关键的问题，这些导航项要横排啊，这么竖着怎么看怎么坑的。怎么横排？加一个 float:left;
64 |
65 | #nav-content li {
66 | height:45px;
67 | margin:0;
68 | padding:0 30px;
69 | float:left;
70 | }
71 |
72 | 浮动，方向是左，再看看效果
73 |
74 | 
75 |
76 | 这次就知道了，一些元素想要横排，就让这些元素全都向左浮动就行了。然后我们继续看，这导航还有很多问题，第一个，前边的圆点是什么鬼？去掉！
77 |
78 | list-style:none;
79 |
80 | 列表的样式是什么？以前是圆点，现在不想要了，设置为没有。文字垂直居中啊，都在顶上要飞走么？
81 |
82 | line-height:45px;
83 |
84 | 因为导航只有一行，那么这行的高度跟外边元素的高度相同的话……基本就是居中了，多行文本这个方法肯定不行，不信你试试。都写上再看效果
85 |
86 | 
87 |
88 | 好像有点像了哈，现在在解决一些小问题，那个黄色背景是我们为了可以看到 #nav-content 的位置而设置的，实际上一会我们要去掉那么黑色的文字在接近黑色的背景上就找不到了，给他个浅色吧
89 |
90 | color:#EFEFEF;
91 |
92 | 文字还要再大点，要设置一个字号，比如：
93 |
94 | font-size:16px;
95 |
96 | 就这些个你能看不懂？然后顺手去掉到 #nav-content 骚黄的背景。
97 |
98 | 
99 |
100 | 再看看效果
101 |
102 | 
103 |
104 | 好像差不多看得过去了，下节课我们再来加链接。
--------------------------------------------------------------------------------
/chapter18.md:
--------------------------------------------------------------------------------
1 | 第十八章 导航（四）
2 | ===
3 |
4 | 加链接喽，不加链接的导航有毛用啊！
5 |
6 | 加链接很简单啊，大家一定都会的
7 |
8 |
14 |
15 | 这个都会吧？你问 target="_blank" 是什么？这个是在哪里打开，不写的话默认是在当前标签页打开，指定为 _blank 则是在新标签页中打开。
16 |
17 | 来来来，咱试试效果
18 |
19 | 
20 |
21 | 当时我就哭了啊，我第一次觉得链接能这么难看！这都什么色（shair 三声）！改颜色！
22 |
23 | #nav-content li a {
24 | color:#EFEFEF;
25 | }
26 |
27 | 看到啦？三层的选择器，嗯嗯，这个一定要看懂啊。
28 |
29 | 
30 |
31 | 好了，颜色终于回来了，我刚才被吓得都想躲起来了，下一个问题是下划线
32 |
33 | text-decoration:none;
34 |
35 | 对文字的装饰是啥？老子杀装饰都不想要啊！
36 |
37 | 然后效果就回来了，但是你移动鼠标看看，除了文字上剩下都点不了，就这么点的点击范围可不好，点击之前还要瞄准文字，老眼昏花的人可玩不了。
38 |
39 | 你肯定会说，我给 a 标签也设置上宽高！好的，我们试试看哦。
40 |
41 | #nav-content li a {
42 | color:#EFEFEF;
43 | text-decoration:none;
44 | width:100%;
45 | height:100%;
46 | }
47 |
48 | 我们说了，宽高的百分比是相对于外部元素的，也就是现在 a 的大小应该和外部的 li 是一样的。但是事实上文字外边还是点不了。这时候我们要引入一个新的属性 display
49 |
50 | 显示的效果是什么样的呢？常用的有 inline ，就是在行里面，比如 b 标签可以加粗文字，那么被加粗的这部分文字依旧按照文字原有的样式排版，比如该换行换行，都没问题。
51 |
52 | 但是如果是 div 呢，我们说了，div 是个盒子，盒子就是矩形的，所以不可能产生折行之类的效果。这时的 display 属性值是 block ，显示成块。
53 |
54 | 现在我们遇到的问题就是 a 默认为行内元素（inline），那他就跟文字一样的效果，所以你设置了宽高也没起什么作用，现在我们要让他作为一个块来显示。
55 |
56 | display:block;
57 |
58 | 然后你试了一下说不行，说我骗你。哼哼，其实明明有变化了，只是你没发现。添加 display 属性之前只有文字可以点击，现在文字上下都可以点击了呢！
59 |
60 | 那文字左右呢？是啊，左右呢？左右不是被 li 的内补（padding）占领了吗？都塞上泡沫了 a 自然就过不去了啊。
61 |
62 | 那，把泡沫去了？可这也不是我们想要的效果啊，算了，把泡沫塞到 a 里面试试看
63 |
64 | 
65 |
66 | 然后去试试吧，我们成功了呢！
--------------------------------------------------------------------------------
/chapter19.md:
--------------------------------------------------------------------------------
1 | 第十九章 导航（五）
2 | ===
3 |
4 | 功能实现了，但是美观和体验还差点。比如说我希望让导航项之间有个分割线，这样用户就知道鼠标大概点在哪个范围内比较准确了。
5 |
6 | 这个用边框就可以实现，不过边框这东东比内部外部还要复杂。他不光有四个方向，还有边框样式和边框颜色。
7 |
8 | border-width
9 | border-style
10 | border-color
11 |
12 | 我这么一写你就看明白他们什么意思了，他们还可以带上方向，比如
13 |
14 | border-top-width
15 | border-left-style
16 | border-right-color
17 |
18 | 这么说来设置一个元素的边框果然是个大工程。所以我们还是浓缩一点写吧。
19 |
20 | border-right:1px solid #555;
21 |
22 | 右侧边框一像素宽，实线，颜色 #555。#555 就等价于 #555555 ，这样写短一点。现在我们把这条属性加给 li 元素。
23 |
24 | 
25 |
26 | 然后效果如下，边框的颜色不很明显仔细看 。
27 |
28 | 
29 |
30 | 真好，中间就割开了，但是有木有觉得最后还多一条啊！其实最后一个 li 根本就不用有边框就可以的。这个事情描述如下：所有的 li 右侧都是 1px 的边框，但是最后一个 li 没有边框。前半句上边已经实现出来了，现在再告诉一下最后一个不要边框就对了。
31 |
32 | 最后一个，这个选择器怎么写？
33 |
34 | #nav-content li
35 |
36 | 这是我们前面选择 li 的选择器，
37 |
38 | #nav-content li:last-child
39 |
40 | 这是选择最后一个 li 的选择器，就是他们中间最后一个孩子，好理解吧，那要是第一个 li 呢？
41 |
42 | #nav-content li:first-child
43 |
44 | So easy！就是这么好玩~可惜的是 last-child 在 IE 6—8 中好像不被支持。让我们默默的为笨笨的 IE 竖起中指。
45 |
46 | 好了干正事
47 |
48 | #nav-content li:last-child {
49 | border:none;
50 | }
51 |
52 | 不过要记得啊，这段代码要放在 #nav-content li 那段之后，就像酱紫
53 |
54 | 
55 |
56 | 为什么呢？当 css 冲突的时候，以后面的为准。 #nav-content li 中的设置对最后一个 li 起不起作用？当然起作用，所以最后才多了一条竖线，然后我们才要消除这条竖线。就好像先是我们一人一个苹果，然后在从你手中拿走苹果，好了，我有苹果你没有的效果达到了。反过来说的话就是，你手里没有苹果，然后跟咱们一人一个苹果，结果大家都有苹果，效果就没达到。
57 |
58 | 虽然真心说不上怎么好看，但是我们简陋的页面中简陋的导航算是有了，你要是有兴趣可以试着用现有的知识去美化它一下，一切都是可能的，只要用心尝试就可能达到目的。
59 |
60 | 下一节我们开始搞定页面中的大海报。
--------------------------------------------------------------------------------
/chapter2.md:
--------------------------------------------------------------------------------
1 | 第二章 网页的基本结构
2 | ===
3 |
4 | 现在打开 Notepad++ ，它会自动新建一个空白文件 “new 0” ，如下图：
5 |
6 | 
7 |
8 | 这时候就如同我们在 Photoshop 里新建了画布。然后心怀激动的开始我们的有可能十分伟大的作品吧！
9 |
10 | 复制如下代码到这个新文档中。
11 |
12 |
13 |
14 |
15 | Document
17 |
18 |
19 |
20 |
21 |
22 |
23 | 于是我们得到了：
24 |
25 | 
26 |
27 | 咦？！怎么五颜六色的？——这个功能叫做“代码高亮”，意思就是用不同的颜色来标记不同功能的代码。打个比方说：我们写了一篇文章，但是想要一眼在其中找到谁在干什么其实并不容易，但是如果文章中所有的人名都用红色标注，所有的动词都用蓝色标注，那么我们检索的速度必然会大大增加。这里也是相同的道理，不同颜色的标注可以使得我们快速定位代码中的关键词。
28 |
29 | 当然这么说挺复杂的，那么不管他，继续就是了。看的时间长了，自然而然的就感受出他的便捷来了。
30 |
31 | 现在我们再来看看这段代码，其实这只是一个最基础的 Html5 的网页结构。那么现在我来给它添加一些注释。
32 |
33 |
34 |
35 |
36 | Document
38 |
39 |
40 |
41 |
42 |
43 |
44 | 看着都想睡觉了，是不是？我也是啊，好了，记得注释的格式就好。
45 |
46 |
47 |
48 | 至于上面的那些内容，其实写页面之前先复制过去就好了，就好像刚开始学 Photoshop 的时候新建一个文档要设置什么颜色模式啊，分辨率啊……我们也是看不懂，所以索性不看，慢慢的也就明白了。嗯，我们来做点实际的事情吧！把代码稍微修改一下
49 |
50 |
51 |
52 |
53 | 我要看看你显示在哪里？
55 |
56 |
57 | 吼吼！我的第一个页面的说~
58 |
59 |
60 |
61 | 我就修改了两个地方，就是那两个汉字的地方，然后我们把这个文件保存为 Html 文档，比如叫做 FirstPage.html 好了，嗯，一定要保存在你找得到的地方哦，比如桌面就是个不错的地方。
62 |
63 | 然后我们双击打开这个文件（如果双击后不是打开了浏览器，那么就直接把文件拖到浏览器里好了，嗯，我们就是这么直接！）
64 |
65 | 
66 |
67 | 好了，现在看到标题和页面内容应该分别写在哪里了吧？
--------------------------------------------------------------------------------
/chapter20.md:
--------------------------------------------------------------------------------
1 | 第二十章 海报（一）
2 | ===
3 |
4 | 你说什么？这节不用讲了？大海报就是一个 img 标签嘛，然后设置宽度 100% 就行了。那咱们试试好了。
5 |
6 |
29 |
30 |
31 | 这时候看看我们的代码，你注意我写的注释，适当的添加注释可以让自己更容易看懂自己写的东西。
32 |
33 | 
34 |
35 | 然后我们去写 css 啦，再说一遍啊，html 就是框架和内容，样式全都扔给 css。这样两个文件看起来都很清楚啊。
36 |
37 | #post {
38 | width:100%;
39 | height:450px;
40 | }
41 |
42 | 这部分没有疑问吧，然后给这个 div 设置一个背景。
43 |
44 | background:url(../images/post.jpg);
45 |
46 | 变成了这样
47 |
48 | 
49 |
50 | 貌似看得过去，但是那些山呢？怎么只看到星空？这个，其实背景的设置默认是左上角对齐的，那么我们的图比较大，所以只能显示出左上角的一部分了。这时候我们要设置背景图片的偏移。
51 |
52 | background-position:x y;
53 |
54 | x，y 是偏移的坐标，x 轴是从左上角往右是正方向，往左是反方向。y 中从左上角往下是正方向，往上是反方向。不用刻意记，试试就知道的东西。
55 |
56 | 然后有几个特殊值，x 轴 left center right；y 轴 top center bottom；就是讲这个元素和他的背景是左边对齐右边对其上边对齐，下边对齐还是中心线对齐。
57 |
58 | 我们现在希望横向中心线对齐，就是背景的中心线和页面的中心线重合，所以 x 轴是 center。上下方向，我希望图片下边的山也显示出来，那么图片应该相对现在的位置向上移动一些。向上是负方向，那么值是负的。至于是多少大概估摸一个 -600px 试试看，然后再根据实际显示效果修改就对了。
59 |
60 | background-position:center -600px;
61 |
62 | 
63 |
64 | 然后看一下我用的这张背景图片
65 |
66 | 
67 |
68 | 居中对齐没有问题了吧，唯一的问题就是图片偏上了，怎么往下移动？修改 background-position 中 y 轴的值。那是改大还是改小？
69 |
70 | y 轴向上是负方向，向下是正方向，我们向下移动，就是改大，所以改成 -450px ，想明白哦，这是负数值，所以 -450px 可比 -600px 大。其实吧，你改错了一看效果就知道，下次往反方向修改就是了，根本不应去记。 USB 插口朝哪边你去记么？一次插不对就反过来就是了。
--------------------------------------------------------------------------------
/chapter21.md:
--------------------------------------------------------------------------------
1 | 第二十一章 海报（二）
2 | ===
3 |
4 | 好了，现在有了背景，我们来想一想内容的事情。这个事情好像很简单地说。假设我们现在背景大海报内容很完备，我们现在需要的只是加个链接。那么就是加个 a 标签的事
5 |
6 |
24 |
25 |
26 | css 自然可以去掉 display:block 属性，因为 div 本身就是 block 属性的元素。然后考虑到内容的排版，我们加一个文字居中的选项。text-align:center ，center 换成 left 或者 right 则分别是文字左对齐和右对齐。于是 css 改作如下：
27 |
28 | #post .content {
29 | width:960px;
30 | height:100%;
31 | margin:0 auto;
32 | text-align:center;
33 | }
34 |
35 | 现在预览的话自然没什么变化。我们继续添加内容
36 |
37 |
38 |
学好代码很重要！
39 |
升职加薪，当上总经理，出任CEO，迎娶白富美，走上人生巅峰
40 |
Let's go
41 |
9 |
10 |
11 | css 如下：
12 |
13 | #boxes {
14 | width:960px;
15 | margin:0 auto;
16 | border:3px solid #DEDEDE;
17 | }
18 |
19 | 为啥没写高度？这部分区域的高度是变化的呀，里面格子中的内容多了就高，否则就矮。所以先不写了。然后看看效果。
20 |
21 | 
22 |
23 | 可得仔细看哦，海报下边的灰线就是了，因为没有高度嘛，上下边框贴在一起，就成了一根线。不过我们还是能从中看到问题，跟海报贴在一起了，可是我们希望他黑海报之间有些空隙的，比如 15 像素，所以我们改一下 margin
24 |
25 | margin:15px auto;
26 |
27 | 因为后面我们也会希望页尾跟他间隔 15 像素的，所以干脆上下的外补都加上好了。同时我们想，这个边框跟里面的格子要不要有间隔？当然也是有的好，否则边框和里面的盒子贴着也没什么用了，那好，内补也加 15 像素。当然了，内补肯定是全方位的，所以
28 |
29 | padding:15px;
30 |
31 | 这次我们再看一看效果。
32 |
33 | 
34 |
35 | 有那么点意思了哈，准备添加格子。每个格子的结构都是一样的
36 |
37 |
38 |
39 |
这里是个小标题
40 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem nisi fugit sunt totam nesciunt dolores aut modi pariatur! Totam, reiciendis, numquam facere ab illum sed accusantium ipsam blanditiis! Ipsam, voluptas.
41 |
79 |
80 | 然后设置他的 css 为
81 |
82 | .clear {
83 | clear:both;
84 | }
85 |
86 | 自信看看我把它放在了什么位置哦，可别搞错了
87 |
88 | 
89 |
90 | 然后再来看看效果
91 |
92 | 
93 |
94 | 然后就是图标和标题的居中
95 |
96 | .box img {
97 | margin:10px auto;
98 | }
99 |
100 | 这是在图标居中的同时我还希望他上下多一些空隙。
101 |
102 | .box h2 {
103 | text-align:center;
104 | }
105 |
106 | 然后我们发现标题如愿以偿的居中了，但是图片没动，为啥昵？因为图片是内联（display:inline;）元素，所以我们得给他设置一个
107 |
108 | display:block;
109 |
110 | 然后看看效果
111 |
112 | 
113 |
114 | 终于如愿以偿了呢~~
--------------------------------------------------------------------------------
/chapter23.md:
--------------------------------------------------------------------------------
1 | 第二十三章 尾部
2 | ===
3 |
4 | 这一章是练习章节，因为基本都是使用前面学过的东西。
5 |
6 | 先来个大背景，嗯，通栏滴，怎么写来着？
7 |
8 |
10 |
11 | 然后 css 是
12 |
13 | #footer {
14 | width:100%;
15 | padding:30px 0;
16 | background:#333;
17 | }
18 |
19 | 想一想都是为什么？然后我们在 #footer 中添加一个内容区域。
20 |
21 |
23 |
24 | css 的内容也跟以前的写法一样
25 |
26 | #footer .footer-content {
27 | width:960px;
28 | margin:0 auto;
29 | }
30 |
31 | 这也蛮好理解的。下面我打算放两列（不是两行）链接在左侧，然后在右侧放个二维码。所以网页结构如下
32 |
33 |
51 |
52 | 这些代码应该也不需要什么解释了，当然，因为我知道一会我要使用浮动（float）来进行横排，所以我就先加上了 .clear 的元素进行清除。
53 |
54 | 
55 |
56 | 现在写 css
57 |
58 | #footer ul {
59 | width:180px;
60 | float:left;
61 | }
62 | #footer a {
63 | color:#DDD;
64 | text-decoration:none;
65 | }
66 | #footer .erweima {
67 | width:300px;
68 | float:right;
69 | }
70 | #footer .erweima img {
71 | display:block;
72 | width:240px;
73 | margin:30px auto;
74 | }
75 |
76 | 应该都看得懂吧，这些前面都是讲过的，至于二维码那里图片为什么和外面的 div 之间留了空隙，我们一会再讲。先来看看效果
77 |
78 | 
79 |
80 | 发现问题了么？嗯那些链接之间的距离太小了，所以加一个
81 |
82 | #footer li {
83 | line-height:24px;
84 | }
85 |
86 | 然后就听见有人一声断喝：“你丫二啊，那二维码跟背景都顺色（shair三声）了，你看不见啊？”我看到啦，但是我得一个个来啊，不就是加个白背景么？
87 |
88 | #footer .erweima img {
89 | display:block;
90 | background:#EFEFEF;
91 | width:240px;
92 | margin:30px auto;
93 | border:1px solid #666;
94 | }
95 |
96 | 看得出来我加了哪两行吧？当然，我这张图片特殊，四周本身就有透明的空白，否则我还需要用内补（padding）来增加周围的空白，给图片直接加背景，这玩法大家会了么？
97 |
98 | 
99 |
100 | 好吧，虽然不好看，但是我们就假装达到预期了哦。现在我们来加点不一样的东东
101 |
102 | #footer .erweima img:hover {
103 | width:300px;
104 | margin:0 auto;
105 | }
106 |
107 | 看得出来，我修改的是二维码图片的划过效果，我们看他发生了什么变化？宽度改变了（如果没写高度那么高度就是自动，也就根据宽度等比例变化），然后因为宽度变化，外补（margin）也做了相应的变化。这样保证了图片的中心位置没有发生变化。
108 |
109 | 刷新一下试试吧，现在鼠标滑到二维码上，图片会放大哦~
110 |
111 | 就这么糊里糊涂的，我们写了一个丑陋的页面。当然我们借此学会了很多常用的东东。知识点并不是很多，现在回顾起来也不过那么几个。如果你学会了，也练习着写个不一样的页面吧，写好后记得截图发上来，看看大家谁做的页面最漂亮哦~这个是作业哦，记得认真完成。
112 |
113 | 后面我们要讲点周边知识了。
--------------------------------------------------------------------------------
/chapter24.md:
--------------------------------------------------------------------------------
1 | 第二十四章 审核元素
2 | ===
3 |
4 | 这是一个很美妙的技巧哦，用来学代码，查错误都是极好极好的。当然我现在说的浏览器是 Chrome。其他浏览器也都有类似功能，IE ……额，好像是从 IE8 开始也有了吧，反正现在 IE11 的我用着还是经常不正常，反正微软也要抛弃 IE 了，谁用他啊！
5 |
6 | 开始正题，现在以 Chrome 举例，其他浏览器大同小异，我也用 Firefox ，所以 Chrome 党和 Firefox 党都不许拍我！
7 |
8 | 用 Chrome 打开我们写的页面，不知道怎么打开的就先打开 Chrome，然后在我们写的 html 文件拖进去。然后在任意位置（确切的说是你想要检查的元素上）右键。
9 |
10 | 
11 |
12 | 然后选择“审核元素”，PENG 的一下，就变成了这样
13 |
14 | 
15 |
16 | 别紧张，其实我也看不懂。然后注意右上角的按钮
17 |
18 | 
19 |
20 | 点那个红框里的，别在浏览器里找红框，这红框是我画的，然后 PENG 的一下，又变了。
21 |
22 | 
23 |
24 | 你看，这东西可以放在下面，也可以放在右面，然后你怎么方便怎么用就是了。然后我们来研究下这里面的内容。
25 |
26 | 
27 |
28 | 左侧是当前网页显示内容的代码（这个代码是可以发生变化的，与网页源代码不同，后面我们就会明白了。现在记住当前就可以）。右上是左面代码中选中元素的样式（css）。右下那个方块是当前元素的盒模型。我们不是说 div 像个盒子吗？这里就用模型吧他表示出来。
29 |
30 | 现在我们爸说表放在左侧元素上，然后看网页内容。
31 |
32 | 
33 |
34 | 我们就看到了网页中某个元素发生了变化，看看我们鼠标是不是正放在这个元素的代码上？元素上面的黄色标签显示了元素的选择器，还有宽高。然后元素上面的颜色也是有实际意义的。
35 |
36 | 蓝色部分，是元素的主体，你定义的宽高体现在这里；
37 | 绿色部分，是内补（padding）；
38 | 黄色部分，是外补（margin）；
39 |
40 | 当然不同浏览器的配色可能不一样，不过都这么个意思。从外向内，外补——边框——内补——主体。
41 |
42 | 知道这么多就差不多了，以后代码再有问题就在这里看看，也许就能找到出了什么问题。然后呢，其实能看到就能修改，再要修改的地方右键选择 edit 什么什么的，或者直接双击就可以进入编辑，修改了直接看结果，超方便的说！
43 |
44 | 都说到这里了，总得用它干点什么哈。来，我们打开 500px。太假大海报真美，就是可惜在上面右键没有图片另存为。
45 |
46 | 
47 |
48 | 以前我们束手无策，现在看来就是小儿科，没有图片另存为的一般就是背景了。我们在他上面右键审核元素看看。当然你要鼠标在代码上上下移动着，同时看网页上相应的元素范围。当范围差不多了，选中那个元素看看右侧的样式。比如我很容易就找到了这里。
49 |
50 | 
51 |
52 | 看到右面的 background 后面有个地址了么？把鼠标放上去。
53 |
54 | 
55 |
56 | 不用惦点击看到预览图了吧，目测是这张图片，那么我们右键这个链接。
57 |
58 | 
59 |
60 | 选择 open link in new tab ，就是在新标签中打开链接的意思，到了这一步你还有什么不会做的？
61 |
62 | 
63 |
64 | 地址栏是图片的地址，窗口里显示的是图片，右键想怎么存就怎么存。
65 |
66 | 只是以后我们对网页代码查错的主要工具，一定要学着去用哦。
--------------------------------------------------------------------------------
/chapter25.md:
--------------------------------------------------------------------------------
1 | 第二十五章 随便聊聊
2 | ===
3 |
4 | 现在呢，我们也做完了一个网页了，如果你恰好看懂了这些，也跟着做下来了。那么你就拥有了一个网页。挺开心的事情。但是只是自己看着这个网页你总觉得无法满足自己期望炫耀的心情。那怎么办？——发到网上去！
5 |
6 | 最简单的办法好像就是新浪的 sae（http://sae.sina.com.cn/） 了，注册开通之后，创建新应用
7 |
8 | 
9 |
10 | 大概如下图填一下，二级域名和应用名称其实都是随意的。
11 |
12 | 
13 |
14 | 最下面没显示出来的部分是选择程序开发语言，你就选择 php 空应用就行了，然后继续。之后就返回了你的应用列表，点击你那个应用的名称进入管理面板。
15 |
16 | 
17 |
18 | 注意下图的打红框里是你这个应用的网址，用来访问的哦。然后点击代码管理。
19 |
20 | 
21 |
22 | 然后建立一个版本，按钮在右上方，版本号是 1 就行，创建后界面如下
23 |
24 | 
25 |
26 | 然后点击右侧操做按钮，选择上传代码包（如上图）。这个代码包就是把我们的代码打包为 zip 格式，对，用你的压缩软件就行。记得把你的网页命名为 index.html
27 |
28 | 打包的时候要从 index.html 文件这一层开始打包，外面别再套着文件夹了。就像下面这样打包。
29 |
30 | 
31 |
32 | 然后这个压缩包名字用个简单的英文或者数字，免得出意外。上传上去，等到上传结束，如下图
33 |
34 | 
35 |
36 | 点击关闭，然后用前面记录下来的网址就可以访问了。
37 |
38 | ---
39 |
40 | 然后由此开始建一些网站的基础知识，做网站我们需要有三样东西：域名、空间、程序。
41 |
42 | 域名：上面我让你记下来的那个网址就是域名，当然也可以自己够买个新的域名，这就相当于你的家庭地址
43 |
44 | 空间：用来放网页的地方，空间会有一个 IP ，就相当于你家所在的经纬度，我们需要通过一个操作（绑定域名）来吧你的域名指向到这个 IP，才能在访问域名的时候访问到这个空间的内容。
45 |
46 | 程序：比如你写的这个网页。
47 |
48 | 也就是通过域名这个住址访问到你家里的你。然后我们一般通过一些 FTP 软件去管理空间上的程序，或者说是管理那些既存在服务器上的文件。域名和空间都可以在网上购买，当然空间也被称作虚拟主机。
49 |
50 | 网站空间的的管理面板，可以用来管理 FTP 账户，绑定域名，数据库，甚至空间中的文件。比较常用的有两种：DA（DirectAdmin），CP（cPanel），当然在国内买应该都是中文，其实你只要找自己需要的就行了，不懂得不管他。
51 |
52 | 这样我就给了你很多的关键词，如果你有这方面的需求可以去搜索相关的教程，在这里我就不详细地去讲了。
53 |
54 | ---
55 |
56 | 说说版本管理，常见的有两种 SVN 和 Git 。前面说的 SAE 用的是 SVN 来管理代码。Git 则有著名的 Github.com （一个著名的开源代码托管网站）。
57 |
58 | 版本管理的概念是这样的（通俗版），你写了一个文件，然后保存为版本 1然后你修改一下这个文件，保存为版本 2，然后依此类推，到了版本 200。这时候我们需要找到版本 23 的内容……这个案例作为设计师一定觉得心头在滴血。版本管理在这时候就可以非常方便的找出来。
59 |
60 | 然后还可以分支：就好像我要对这个图片做一些不一样的尝试，所以我先把她复制一份去实验，嗯，这就是分支但是当实验成功了你还可以合并分支……
61 |
62 | 其实版本管理对于设计也是很有用的东西，只是很少有设计师愿意去了解一下这方面。
63 |
64 | 本书就是用 git 进行版本管理，然后提交到 Github，再通过接口在 Gitbook 上排版展示出来的。
65 |
66 | ---
67 |
68 | 关于代码自动完成的一点说明：为啥不用记代码？有自动完成谁还记他，见到认识就很好了。
69 |
70 | Notepad++ 默认是开启的，如果没有可以到 设置——首选项——自动完成 中开启一下
71 |
72 | 
73 |
74 | 开启之后，只要已经选定代码的语言（菜单栏，语言），当然保存为对应的后缀也算选定了语言，那么写代码的时候就会有提示
75 |
76 | 
77 |
78 | 就像上图，我写 he 的时候就已经有 height 的提示了。然后上下键选择到你需要的项目，Tab 或者回车键都可以。这样写代码的效率是很高的。
79 |
80 | ---
81 |
82 | 学到这里是不是觉得开始有点简单了？当然就算你看得迷迷糊糊，只要你看了，那么再看后面的内容你会觉得越来越清晰，慢慢的就都明白了。
83 |
--------------------------------------------------------------------------------
/chapter26.md:
--------------------------------------------------------------------------------
1 | 第二十六章 开始新的尝试
2 | ===
3 |
4 | 我们现在知道了一些 css 属性，也在尝试着用他们。但是我们依旧觉得我们无从下手的样子，其实主要还是不熟练罢了，所以多练，多运用是十分十分重要的事情。那么从现在开始我们逐步地做一些很实用的模块玩。
5 |
6 | 你看的没错，这就是玩，要是认真你就输了。来，我们先玩个简单的，给网页加上一个返回顶部的按钮。首先我们用一个图片来做按钮。
7 |
8 |
44 |
45 | 标签之前，就可以了，因为他的位置比较特殊，所以扔在最后就好。css 当然就放在 CSS 文件的最后面就行，如下图
46 |
47 | 
48 |
49 | 代码放好了开始看效果，然后认真找了一下才发现，他在右下角
50 |
51 | 
52 |
53 | 这好像没什么特别的啊，但是你向下滚动页面试试，你会发现他一直呆在右下角。
54 |
55 | 
56 |
57 | 哎呀，曾竟以为多么复杂的效果，原来也就这么几句代码的事。下一节课我们来美化一下这个小按钮。
--------------------------------------------------------------------------------
/chapter27.md:
--------------------------------------------------------------------------------
1 | 第二十七章 一些细节
2 | ===
3 |
4 | 细节自然在 css 里面修改了，先加一个淡淡的边框。
5 |
6 | border:1px solid #DDD;
7 |
8 | 这点装饰当然不足以让我们满足，所以我们还要给他加个圆角效果。
9 |
10 | border-radius:5px;
11 |
12 | 效果如下图：
13 |
14 | 
15 |
16 | border-radius 的属性值是圆角的半径。所以这么说的话……我们的图片宽度 36px，再加上两边的内补，每边 4px ，也就是·总宽度 44px，同理高度也是 44px。那么要是我让他一边的圆角半径为 22px 会是什么结果？来试试看。
17 |
18 | border-radius:22px;
19 |
20 | 效果如下图：
21 |
22 | 
23 |
24 | 这就是个圆，好神奇是不是？原来就是这么好玩。其实还可以更好玩一点的，border-radius 支持分别设置四个角的圆角大小，我们换个写法。
25 |
26 | border-radius:22px 0 22px 22px;
27 |
28 | 再看看效果：
29 |
30 | 
31 |
32 | 颤抖吧，射击师，以后这种小标签我就不找你们去制作了，怪麻烦的。
33 |
34 | 然后我们试着再给他加一些阴影，阴影的写法也很简单
35 |
36 | box-shadow:横坐标偏移 纵坐标偏移 扩散大小 颜色;
37 |
38 | 写上数值就是：
39 |
40 | box-shadow:3px 3px 12px #000;
41 |
42 | 效果如下：
43 |
44 | 
45 |
46 | 你可以改动各个数值看看效果，慢慢就知道怎么去运用它了。当然今天讲的这两个效果你在 IE 8 及其以下版本中可能看不到或者效果很差，换浏览器吧兄弟~
47 |
48 | 然后现在再看看这个小小的图片上我们定义的 css
49 |
50 | 
51 |
52 | 为什么我想起了做设计的时候一个图层上同时添加的 N 个图层样式？
53 |
54 | 来吧，试试看你有什么样的奇思妙想，能做出多么帅气的按钮来？
55 |
56 |
--------------------------------------------------------------------------------
/chapter28.md:
--------------------------------------------------------------------------------
1 | 第二十八章 图片翻转（一）
2 | ===
3 |
4 | 图片翻转这种效果是经常被提到的，那么怎么去做呢？我们试试看。
5 |
6 | **第一种：透明度**
7 |
8 | 这个办法很简单，我们举个例子
9 |
10 | 
39 | 
35 |
36 | 现在我们好像开始理解相对地址了呢，那就换个角度看问题，在 1.html 里些其他文件的相对地址会是怎么样的？
37 |
38 | ../index.html
39 | pic.jpg
40 | ../css/style.css
41 | ../haha.jpg
42 |
43 | .. 代表的就是上一层文件夹了。那要是上两层文件夹呢？../../ 这样啊。好像相对地址也没多复杂。那在 style.css 里怎么写呢？
44 |
45 | ../index.html
46 | ../images/pic.jpg
47 | ../images/1.html
48 | ../haha.jpg
--------------------------------------------------------------------------------
/chapter14.md:
--------------------------------------------------------------------------------
1 | 第十四章 让代码真的活起来
2 | ===
3 |
4 | 这个标题什么意思？是我们要赋予代码以生命。只是看懂了或者了解了那根本就不是学会了。听大师讲调色技巧把照片化腐朽为神奇您都听懂了，换张照片你能保证自己就能独立玩得转么？动手，动手才是硬道理。从这一章开始我们要一起动手写一个页面，希望大家不要光看着，要一起动手做起来。
5 |
6 | 我们要做的页面也很简单，大概就是那种最土的官网的样式，上面一条导航，下面一个通屏的大海报，然后下面并排三个格子，格子里写上一些内容，在下面是一个都是导航啊、联系我们啊、二维码啊之类的页尾。我不做示意图了，我想大家都明白的。反正我新装的系统也没装作图软件呢，就别难为我了。
7 |
8 | 我们先来规划一下文件结构：
9 |
10 | index.html
11 | images
12 | post.jpg
13 | css
14 | styles.css
15 |
16 | 初步规划就是酱紫，每个文件是做什么的大家一看就明白，也不多说，开始做起来。
17 |
18 | 新建 index.html 文件，在其中写上如下内容：
19 |
20 |
21 |
22 |
23 |
24 | 
7 |
8 | 是这个意思吧，对了，海报图片是我在 500px 上顺的，咱就演示效果，别在意那些细节噢
9 |
10 | 
11 |
12 | 高度太大了，再给个高度，比如 450px 怎么样？
13 |
14 | 
48 | 
9 |
10 | 这不就是一个图片吗？也起不到任何作用啊。嗯那就给他加个链接，其实只要连接到 # 就可以实现返回顶部的功能。于是我们改成
11 |
12 |