黑马程序员技术交流社区

标题: 第5节居中的规范书写(2) [打印本页]

作者: Zy_阿匠 时间: 2017-1-7 17:17
标题: 第5节居中的规范书写(2)
第1课时
css的背景设置
1、Background-color，设置元素的背景色。如果设置元素的背景图片且图片够大的话，则背景图片会覆盖背景色！
2、Background-image，设置背景图片。其属性值为：url(图像的相对路径)。基本语法为：background-image:url(相对路径)。
3、Background-attachment，设置背景是否固定或者随着页面进行滚动。其属性值为
* fixed，固定（默认值），不随页面滚动而滚动。
* scroll，随页面滚动，并且有滚动条。
基本语法为：background-attachment: fixed或scroll（默认值）。
4、Background-repeat，设置背景图片是否平铺。其属性值为：
* No-repeat，背景不平铺
* Repeat-x，在x轴方向进行平铺
* Repeat-y，在y轴方向进行平铺
* Repeat，在所有方向上进行平铺
基本语法为：background-repeat: no-repeat;repeat-x;repeat-y;repeat.
5、background-position，设置背景图片在其包含块中的位置，其基本语法为：Background-position: x,y。其中，x属性值代表在x轴上的位置，y属性值代表在y轴上的位置。他们的取值可以是具体的像素值；也可以是方向关键字，例如right、top等；还可以取值百分比，例如50%，50%等
6、背景的设置可以进行合写，在实际开发中，要对背景的设置进行合写，这样可以减少大量的代码量，其基本语法为：
Background: background-color background-image background-repeat background-attachment background-position
在实际设置时，只针对必须设置的属性要按照这个顺序进行设置，由于每一个属性都有其默认值，根据需要可以取其默认值，不用非得设置
第2课时
1、通过设置display: inline-block，来设置导航条。注意：ie6与ie7都不识别此设置，可以通过设置“*display: inline与zoom: 1”来解决ie6与ie7兼容问题。
2、案例：

第3课时
Jd导航条案例：

作者: Mr_Maty 时间: 2017-1-7 19:49
不错，认真

作者: 浮世散人 时间: 2017-1-8 00:44
很不错，总结的很好

作者: 小虎同学 时间: 2017-1-9 00:04
总结的很不错

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2