前端学习笔记（五）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：插⼊的内容）
第⼆步：照着教程开始做⾸页页⾯。每段教程听完，再按照⾃⼰理解敲⼀遍。最后具体数值照着教程⾥⾯的数值改过来。
css选择器分为哪几类
新知识点：
1.⼦元素加了margin-top，⽗元素要加overflow: hidden（这个真的挺重要的！否则缩放页⾯时，可能同⾏的内容会被挤成好⼏⾏（亲测的header出现的问题）或者被吞掉⼀部分内容（亲测的下⾯图⽚出现的问题）。）
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的块会相对于窗⼝固定。
附上我⾃⼰完成的百度⾸页源码和图⽚素材：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。