按照知乎王小黑推荐的前端学习路径，自学HTML和CSS后，我在实战中开始尝试做静态页面页面上的小项目。制作幸福蛋糕首页首先，我下载了前锋教育提供的幸福蛋糕官网静态页面的教学视频、图片素材和源码。我先看一集视频，然后关掉视频，自己敲代码。然后和源码对比一下，看看你的代码哪里写的和源码不一样，有没有改进的余地。比较晚的时候，其实也不是很依赖视频教学。大概看到样式就知道怎么办了。第一步：将教程中给出的common.css改成规范的格式，检查整理一下不明白或者记不清楚的标签。html:dl,dd,dt：定义列表（definitionlist），定义列表中的item，解释itemCSS：padding,margin：盒模型的内边距和外边距。（非常重要）display：display属性指定了元素应该生成的框的类型。block表示该元素将显示为块级元素，并且该元素前后会有换行符。（好像挺常用的，用来上下分隔一些元素）clear:哪边不允许浮动元素。height：元素的高度。visibility：元素是否可见。溢出：当内容溢出元素的框时会发生什么。zoom：缩放系数。1或100%表示不缩放。大纲：大纲。vertical-align：图像与文本对齐的方式。（在一行上方或下方对齐）input:xx(-input)-placeholder:xx浏览器的占位符。（这个好像有点复杂，建议具体问题具体分析）position:fixed,absolute等，最好和top,left等一起使用CSSselector::after:在每个x元素的后面插入内容内容。（结合使用：内容：插入的内容）第二步：按照教程开始制作首页。每个教程听完之后，根据自己的理解再敲一遍。最终具体值根据教程中的值更改。新知识点：1.子元素添加margin-top，父元素添加overflow:hidden（这个真的很重要！不然页面缩放的时候，同一行的内容可能会被挤成几行（亲测的header出现问题）或者部分内容被吞掉（亲测下图的问题）。)2.nth-child(n)：选取其父元素的子元素。（不管是什么类型）3.nth-of-child(n)：选择其父元素的该类型子元素的个数。（和上一个的区别是有没有分类型！之前记错了，记一下）4.设置a为display:block后（变成block），如果它的父元素有text-align，它将更改为在块的宽度内居中。所以宽度不能随意调整。5.如果您需要在不同的连续元素（例如连接的跨度）之间使用单个空格，只需按Enter。6.给一小块内容设置样式（比如边框什么的），你必须先把它们做成一个小块，block或inline-block。深度学习思路：把页面拆分成很多个盒子，每个部分都是一个盒子。箱中箱。然后在每个框内添加内容，这样样式就更方便了。有时候一行内容的顺序是乱的，不如整合成一个span。第三步：按照教程开始制作列表页。也是先听听再根据自己的理解打字，最后修改。新知识点：1、设置box-sizing：border-box可以使div框的边框大小固定。否则（应该是content-box），div框的大小就是内部元素的大小，不包括内外边距和边框。2.很迷惑：img是inlinereplacementelement，内联元素的一种。所以居中不能用margin:0auto，可以用text-align:center代替。但它又是一种特殊的内联元素，所以它有高度、宽度、padding、margin等属性。3.伪元素：beforeand:after：在元素之前（或之后）应用这些样式。（可以在父元素上加一个after的伪元素清除浮动）（或者按照W3school上面的给footer加上clear，应该没问题。）附上源码和图片素材happycakecase我自己完成的：HappyWesternCake实战案例（上传于CSDN论坛）百度首页制作百度首页制作不参考任何教学和资料。按照之前学习的思路，我将网页理解拆分成多个块（div），然后在div中先写结构和注释，然后填写html内容，最后给每个部分添加CSS样式。因为自己的工作比较复杂，效率不是很高，经常会在一些小细节上过于纠结，所以就断断续续做了一天左右。按照网上的推荐买了鱼书《CSS权威指南》，还没到货。希望这本比较官方权威的教材能解决我经常纠结于一些样式细节的问题。（希望里面的案例足够丰富，解开我的疑惑）当我做一些我实在不知道如何实现的事情时（比如右上角空气质量状态的小文字），我会去查百度首页的源码，自己琢磨。.在制作百度首页的过程中：发现的新问题新知识：1.当父类和子类都有类选择器时，同一个属性好像是根据父元素的类选择器中的属性值来计算的.但是当祖父母元素和父元素都有类选择器时，它似乎是有序的。希望CSS权威指南能帮我解答疑惑。查了下百度源码发现：2、文字的背景色也可以用border-radius调整。使用padding调整内边距，思路同图片。（我怎么看出来是图片，看不到文字？很迷惑）3.可以使用inline-block元素调整行的宽高等4.可以设置header的min-width，这样在页面缩小的时候有个最小值，然后就需要左右滚动，而不是缩进页眉两边的块。（也不容易把字挤在一起，造成排版问题。）5.Outline可以用来处理选中输入时边框难看的问题。6.fixed和absolute的区别：fixed块会相对于窗口固定。附上自己完成的百度首页源码和图片素材：百度首页实战案例（上传于CSDN论坛）
