前端学习笔记（五）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应该也没问题）

附上我自己完成的幸福西饼案例源码和图片素材：
幸福西饼实战案例

百度首页制作

百度的首页制作就没有参考什么教学和素材了，按照之前学到的思路，自己把网页理解拆分成多个块（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的块会相对于窗口固定。

附上我自己完成的百度首页源码和图片素材：
百度首页实战案例

本文地址：https://blog.csdn.net/weixin_41972947/article/details/107307188