前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页

按照知乎上面汪小黑推荐的前端学习路径，在自学了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论坛）