网页制作(三).pptVIP

.NET程序设计 主讲教师: 李璟 e-mail: lijing@ 手机第6讲 网页制作（三） 6.1使用CSS制作背景 6.2使用CSS布局页面顶部内容 6.3使用CSS制作网站导航 6.4使用CSS制作列表 6.5使用CSS制作内容的版式 6.1使用CSS制作背景 6.1.1制作颜色背景 6.1.2给元素添加背景图片 6.1.3制作定位的背景 6.1.4制作不动的背景 6.1.5综合使用背景 6.1.1制作颜色背景 在CSS中，用来定义背景颜色的属性是background-color。 背景色属性background-color的语法结构如下： background-color:transparent|color; 其中各个属性值的含义如下： transparent:定义背景颜色为透明(默认值)。 color:使用各种颜色值定义背景颜色。 6.1.2给元素添加背景图片（1） 指定背景图片，是指定义元素中的是背景图片的属性是background-image。 由于背景图片只有在一定的区域范围内才能能够显示，所以在指定背景图片的时候，通常要定义元素的宽度和高度等属性。 背景图片background-image属性用来定义图片背景路径，其语法结构如下： background-image:url(图片地址|none); 如： background-image:url(images/picture.jpg); 示例：css_backgroundimage.html css_backgroundimage.html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titlecss_backgroundimage/title style type=text/css #content{ border: 1px solid #FF0000; height: 400px; background-image: url(images/5_2_01.jpg); } /style /head body div id=content/div /body /html 背景图片页面效果 6.1.2给元素添加背景图片（2） 在CSS中，背景重复属性background-repeat，与backgound-image一起使用，决定图片是否重复，其语法结构如下： background-repeat:repeat|no-repeat|repeat-x|repeat-y; repeat:即默认方式，完全平铺(重复)背景。 no-repeat:在X及Y轴方向均不平铺(重复) 。 repeat-x:横向平铺(重复)背景。 repeat-y:纵向平铺(重复)背景。 示例：css_backgroundrepeat1.html、 css_backgroundrepeat1.html !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / titlecss_backgroundrepeat1/title style type=text/css #content{ border: 1px solid #FF0000; height: 400px; background-image: url(images/5_2_01.jpg); background-repeat: repeat-y; } /style /head body div id=content/div /body /html 纵向重复背景图片页面效果 6.1.3制作定位的背景 在CSS中，背景定位属性backgound-position用来设置背景的起始位置，语法结构如下： background-position:position|x%y%|xpos ypos; 其中各个属性值的含义如下： position:定义背景图象的位置。可用值有top left、top center、top right、cente