pink老师课程-学成在线案例资料

 哔哩哔哩里面pink老师课程那里实操。

代码和图片在末尾

 总结

1.代码HTML结构要清晰，最好做好注释标明模块的开始和结束如：    。

2.起类名要注意，用对应的英文字母。top 、banner、main、footer、left、right、logo、user、course、goods 、content等等，如果不知道用什么就用对应的拼音全拼的哦。

3.一些有链接的导航采用ul>li>a这种形式写的，就是li里面包含a标签来写。

如下图。

4. 结构拆分，注意先分清楚结构后再写。

在写的过程中，一些知识点的补充

1.button和input都是行内块元素，他们之间有缝隙

2.做用户头像和名字时候，vertical-align: middle;

vertical-align 属性设置一个元素的垂直对齐方式。 middle把此元素放置在父元素的中部。可以这个的搜一下CSS属性，必须是行内块元素才有效

3.background:url(images/banner.png)；这个背景图片链接形式缩写

background缩写各个值的次序依次如下：
background-color | background-image  | background-repeat | background-attachment | background-position

如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：
background: #FFCC66 url("butterfly.gif") no-repeat;
例如:

.bg01{
   background-image: url("path/bgFile.gif");
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: left top;
}

/*上面可以简写为:*/
.bg01{
   background:#FFCC66  url("path/bgFile.gif")  no-repeat  fixed  left  top;
}

补充：background-size

       取值：
    (1)、value1 value2
   宽度 高度
   (2)、value1% value2%
   百分比
   (3)、cover
   覆盖，将背景图像等比缩放，直到背景能够覆盖到元素的所有区域

（4)、contain
包含，将背景图像等比缩放，直到背景图像碰到右边或下边时，停止缩放。

4.浮动的盒子没有外边距合并的问题所以不会塌陷

5.a是行内元素如果没有变成块级元素就无法继承上面父级的宽度

6.可以给父级设置行高，行高会继承给后面的孩子；

7.写导航的时候不确定后面可能加的文字字数，不能指定每个a标签的宽度因为文字大小不确定。用 padding就比较好。不管文字多少，内边距都是一样的。

8.块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote、form，

margin定义的是块级元素的垂直外边距，所以这里的选择器不能选到a元素上，块级元素才有宽高内外边距

9.居中的话自己计算，慢慢理清楚。

 

黑妈程序pink老师学成在线案例代码+图片https://download.csdn.net/download/YuKing_HONG/86823560