共计 2383 个字符，预计需要花费 6 分钟才能阅读完成。
依照知乎下面汪小黑举荐的前端学习门路，在自学了 HTML 和 CSS 之后，开始尝试实战制作动态页面小我的项目。
幸福西饼首页制作
首先我在网上下载到了千锋教育提供的的幸福西饼官网动态页面的教学视频和图片素材、源码等。我是先看一集视频，而后关掉视频本人敲一遍代码。而后再和源码进行比拟，看看本人哪些地方的代码写法和源码不一样，是否有能够改良的中央。做到比拟靠后面的时候，其实曾经不是很依赖视频教学了，本人大略看到款式就大略能晓得应该怎么搞。
第一步：把教程中给的 common.css 改成标准的格局，把本人看不懂或是没记分明的标签等等查一遍，整顿一下。
Html：
dl，dd，dt：定义列表（definition list），定义列表中的我的项目，解释我的项目
CSS:
padding，margin：盒模型的内边距，外边距。（十分重要）
display：display 属性规定元素应该生成的框的类型。
block 即是该元素将显示为块级元素，此元素前后会带有换行符。（如同还挺罕用，用于让有些元素高低离开）
clear：哪边不容许呈现浮动元素。
height：元素的高度。
visibility：元素是否可见。
overflow：内容溢出元素框时产生的事件。
zoom：缩放因数。1 或 100% 即为不缩放。
outline：轮廓线。
vertical-align：图片对齐文字的形式。（对齐一行中下面还是上面这样）
input：xx（-input）-placeholder：xx 浏览器的占位符。（这个如同有点简单，倡议具体问题具体分析）
position：固定、相对等。最好要配合 top、left 等应用。
CSS 选择器：
:after：在每个 x 元素的内容前面插入内容。
（配合应用：content：插入的内容）
第二步：照着教程开始做首页页面。每段教程听完，再依照本人了解敲一遍。最初具体数值照着教程外面的数值改过来。
新知识点：
1. 子元素加了 margin-top，父元素要加 overflow: hidden（这个真的挺重要的！否则缩放页面时，可能同行的内容会被挤成好几行（亲测的 header 呈现的问题）或者被吞掉一部分内容（亲测的上面图片呈现的问题）。）
2.nth- child(n)：抉择其父元素的第几个子元素。（不分品种）
3.nth-of-child(n)：抉择其父元素的第几个该类型的子元素。（和上一个的区别在于是否分类型！这里之前了解错过，要记好）
4. 把 a 设成 display:block（转成块）了之后，它的父元素如果有 text-align，则会变成在这个块的宽度内进行居中。所以宽度不能乱调。
5. 同行间断不同元素（比方连着的 span）之间如果须要单空格，用回车就好。
6. 要给一小块内容设置款式（比方边框什么的），就要先把它们搞成一小块，block 或者 inline-block。
粗浅学习到的思维：要把页面拆分成很多个盒子，每一个局部都是一个盒子。盒子套盒子。
而后每个盒子外部再进行增加内容，这样款式比拟不便。
有的时候一行内容呈现程序错乱，要把它们整合成一个 span 比拟好。
第三步：依据教程开始做列表页页面。同样先听一遍再带着本人的了解敲码，最初再对着批改。
新知识点：
1. 设置 box-sizing:border-box 能够使 div 盒子的 border 尺寸固定。
否则（应该是 content-box），div 盒子的尺寸是外部元素的尺寸，不含内外边距和边框。
2. 很迷：img 是行内替换元素，行内元素的一种。所以居中不能用 margin:0 auto，反而能够用 text-align:center。
然而它也是比拟非凡的行内元素，所以有 height、width、padding、margin 等属性。
3. 伪元素:before 和:after：在该元素的之前（or 之后）利用这些款式。（能够用于给父元素加 after 的伪元素来革除浮动）（或者依照 W3school 下面说的给 footer 加 clear 应该也没问题）
附上我本人实现的幸福西饼案例源码和图片素材：
幸福西饼实战案例（上传于 CSDN 论坛）
百度首页制作
百度的首页制作就没有参考什么教学和素材了，依照之前学到的思路，本人把网页了解拆分成多个块（div），而后先写好 div 构造和正文，再往里面填 html 内容，最初对每一部分进行增加 CSS 款式。因为本人事件比拟杂效率不是很高，加上常常在一些细枝末节的中央过分纠结，断断续续大略做了一天工夫。依据网上的举荐买了鱼书《CSS 权威指南》，还没到，心愿比拟官网权威的这本教材能够解决我常常在一些款式的细枝末节的中央纠结的故障了。（心愿外面的案例丰盛到能够解决我的纳闷）
做到一些切实不晓得如何实现的中央的时候（比方右上角空气质量情况的小文字），我就去翻查百度 s 首页源码，并且试图搞清楚。
在百度首页的制作过程中：
发现的新问题和新常识：
1. 父类和子类都有类选择器的状况下，同一属性仿佛优先依照父元素的类选择器中的属性值来算。
然而祖父元素和父元素都有类选择器的状况下，又仿佛变成依照先后顺序来了。
心愿 CSS 权威指南能够帮我解答纳闷。
查了百度源码才晓得：
2. 文字背景色也是能够用 border-radius 来调整形态的。用 padding 调整内边距，思路和图片的一样。（我怎么图片的想进去了，文字的就没想进去呢，蛊惑）
3. 能够用 inline-block 行内块元素来调整行的宽度高度等。
4. 能够设置 header 的 min-width，这样来使页面放大时有一个最低限度，之后就须要左右滚动条，而不是 header 两侧的块缩进来了。（也不容易让字挤成一坨导致排版问题。）
5. 能够用 outline 来解决选中 input 时候的俊俏边框。
6.fixed 和 absolute 的区别：fixed 的块会绝对于窗口固定。
附上我本人实现的百度首页源码和图片素材：
百度首页实战案例（上传于 CSDN 论坛）