HTML+CSS静态页面实战案例：幸福西饼首页和百度首页

1、html+css静态页面实战案例：幸福西饼首页和百度首页幸福西饼首页制作首先我在网上下载到了千锋教导提供的的幸福西饼官网静态页面的教学视频和素材、源码等。我是先看一集视频，然后关掉视频自己敲一遍代码。然后再和源码举行比较，看看自己哪些地方的代码写法和源码不一样，是否有可以改进的地方。做到比较靠后面的时候，其实已经不是很依靠视频教学了，自己也许看到样式就也许能知道应当怎么搞。第一步：把教程中给的common.css 改成规范的格式，把自己看不懂或是没记清晰的标签等等查一遍，收拾一下。html：dl，dd，dt：定义列表(definition list)，定义列表中的项目，说明项目css:padd

2、ing，margin：盒模型的内边距，外边距。(十分重要)display：display 属性规定元素应当生成的框的类型。block即是该元素将显示为块级元素，此元素前后会带有换行符。(好似还挺常用，用于让有些元素上下分开)clear：哪边不允许浮现浮动元素。height：元素的高度。visibility：元素是否可见。overflow：内容溢出元素框时发生的事情。zoom：缩放因数。1或100%即为不缩放。outline：轮廓线。vertical-align：对齐文字的方式。(对齐一行中上面还是下面这样)input：xx(-input)-placeholder：xx扫瞄器的占位符。(这个好似

3、有点复杂，建议详细问题详细分析)position：固定、肯定等。最好要协作top、left等用法。css挑选器：:after：在每个x元素的内容后面插入内容。(协作用法：content：插入的内容)其次步：照着教程开头做首页页面。每段教程听完，再根据自己理解敲一遍。最后详细数值照着教程里面的数值改过来。新学问点：1.子元素加了margin-top，父元素要加overflow: hidden(这个真的挺重要的！否则缩放页面时，可能同行的内容会被挤成好几行(亲测的header浮现的问题)或者被吞掉一部分内容(亲测的下面浮现的问题)。)2.nth- child(n)：挑选其父元素的第几个子元素。(不

4、分种类)3.nth-of-child(n)：挑选其父元素的第几个该类型的子元素。(和上一个的区分在于是否分类型！这里之前理解错过，要记好)4.把a设成display:block(转成块)了之后，它的父元素假如有text-align，则会变成在这个块的宽度内举行居中。所以宽度不能乱调。5.同行延续不同元素(比如连着的span)之间假如需要单空格，用回车就好。6.要给一小块内容设置样式(比如边框什么的)，就要先把它们搞成一小块，block或者inline-block。深刻学习到的思想：要把页面拆分成无数个盒子，每一个部分都是一个盒子。盒子套盒子。然后每个盒子内部再举行添加内容，这样样式比较便利。有

5、的时候一行内容浮现挨次错乱，要把它们整合成一个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和:

6、after：在该元素的之前(or之后)应用这些样式。(可以用于给父元素加after的伪元素来清除浮动)(或者根据w3school上面说的给footer加clear应当也没问题)附上我自己完成的幸福西饼案例源码和素材：幸福西饼实战案例(上传于csdn论坛)百度首页制作百度的首页制作就没有参考什么教学和素材了，根据之前学到的思路，自己把网页理解拆分成多个块(div)，然后先写好div结构和注释，再往里面填html内容，最后对每一部分举行添加css样式。由于自己事情比较杂效率不是很高，加上常常在一些细枝末节的地方过分纠结，断断续续也许做了一天时光。按照网上的推举买了鱼书css权威指南，还没到，希翼比

7、较官方权威的这本教材可以解决我常常在一些样式的细枝末节的地方纠结的毛病了。(希翼里面的案例丰盛到可以解决我的怀疑)做到一些实在不知道如何实现的地方的时候(比如右上角空气质量情况的小文字)，我就去翻查百度s首页源码，并且试图搞清晰。在百度首页的制作过程中：发觉的新问题和新学问：1.父类和子类都有类挑选器的状况下，同一属性似乎优先根据父元素的类挑选器中的属性值来算。但是祖父元素和父元素都有类挑选器的状况下，又似乎变成根据先后挨次来了。希翼css权威指南可以帮我解答怀疑。查了百度源码才知道：2.文字背景色也是可以用border-radius来调节外形的。用padding调节内边距，思路和的一样。(我怎么的想出来了，文字的就没想出来呢，迷惑)3.可以用inline-block行内块元素来调节行的宽度高度等。4.可以设置header的min-width，这样来使页面缩小时有一个最低限度，之后就需要左右滚动条，而不是header两侧的块缩进来了。(也不简单让字挤成一坨导致排版问题