JavaScript程序设计基础教程第9章 CSS+DIV技术.pptVIP

颜色和背景属性 （6）background- position设定背景图像位置 语法： background- position：[value] | [top| center| bottom] | [left| center| right] 背景图像位置属性可以确定背景图像的绝对位置，这是HTML标记不具备的功能。该属性只能用于块级元素和替换元素（包括img，input，textarea，select和object）。背景图像位置属性值如表9.9所示。 课件制作人： 颜色和背景属性 （7）background设定背景综合属性 语法： background：background-color ||background-image ||background-repeat ||background-attachment ||background- position 如果使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。默认值为：transparent none repeat scroll 0% 0%。 CSS颜色和背景属性的应用非常广泛，弥补HTML显示属性的不足，使页面显示更加完美。 例9.2 下面的示例是颜色和背景属性的综合应用，读者会看到CSS属性美化页面的效果，程序代码如下。 html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleCSS颜色和背景属性的应用/title style type=text/css !-- body{background-image:url(air.jpg); background-attachment:scroll} p{color:#000000; background-color:#C4ECFD ; background-image:url(mr.jpg); background-repeat:no-repeat; background-position:60% 8px} body,td,th,caption {font-size: 12px;} .style2 {color: #000000} -- /style /head 课件制作人： 颜色和背景属性 body leftmargin=30px topmargin=10px p style=width:400 从60% 8px处开始显示br 有一条路br 走过了总会想起br 有一个人br 经历了就再难忘记br br/p table width=400 border=1 caption align=center 在单元格标记的style属性中设置背景图的摆放位置 /caption tr td height=200 style=color:#6666FF; text-align:center; background-repeat:no-repeat; background-image:url(book.jpg); background-position:bottom left本单元格背景图在[0% 100%]处/td td height=200 style=color:#6666FF; text-align:center; background-repeat:no-repeat; background-image:url(book.jpg); background-position:top right本单元格背景图在[100% 0%]处/td /tr /table /body /html 运行结果如图9.10所示。 课件制作人： 容器属性 在设计页面时，CSS可以将元素放置在一个容器中。容器属性如表9.10所示。 课件制作人： 容器属性 例9.3 下面示例定义CSS的容器属性，将元素存放在一个容器中，方便对元素的操作，程序代码如下： html head meta http-equiv=Content-Type content=text/html; charset=gb2312 titleCSS区块属性的应用/title style type=text/css .class1{width:400px; height:100px; margin-top:20px; margin-right:30px; margin-bottom:20px; margin-left:20px; float:left;border-left-style:groove; border-left-width:3px; border-left-color:#FF9900; border-bottom-sty