第2章网页背景(免费阅读).pptVIP

网页背景图片 背景固定属性 background-attachment 相关属性值 scroll:背景图片和内容一块滚动显示（默认值） fixed:背景图片不和内容一块滚动显示 背景图片滚动属性 固定背景图片 网页背景的介绍 定位背景图片 背景图片属性 background-position 相关属性值 水平位置（关键词）、垂直位置（关键词）：应用关键词来指定背景图片的具体位置，一共有5个关键词可以使用，分别是top、bottom、left、right、center 水平位置（单位数值）、垂直位置（单位数值）：以左上角为起点，使用添加单位的数字或使用百分比来定义背景图片的位置 背景图片位置属性 关键词定位效果图 数值定位效果图 设置多个背景 多个背景网页实例效果图 设置多个背景 创建新的网页文件 运用Dreamweaver软件，进入欢迎界面。选择“文件”→“新建”命令，选择XHTML1.0 Transitonal格式，然后单击“创建”按钮，创建文档。 设置多个背景 修改网页标题 将title/title之间默认的“无标题文档”改为“多个背景的实例”。将文 件保存在相应的位置。 title多个背景的实例/title 页面编码 对应的元素为meta，在Dreamweaver中有的编码是utf-8，在中文网页中，一般会使用gb2312编码，请确保编码是gb2312。 meta http-equiv=Content-Type content=text/html; charset=gb2312 / 设置多个背景 在head之间嵌入CSS样式声明 head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title多个背景的实例/title style type=text/css !-- -- /style /head 网页背景的图片 设置多个背景 设置多个背景 背景图片设置为不重复显示，背景色要与背景图片颜色相符合。 body { background-image: url(2-10-bg.jpg); background-color:#f3f8fc; background-repeat:no-repeat; background-position:left top; background-attachment:fixed; } 在页面添加文字内容结构代码 设置多个背景 div h1因为她开在冰雪之上，与寒冷相伴，就叫她冰凌花/h1 p 如果你没有亲眼看到她，决不会相信这么柔弱的生命会开在冰雪之中。br/ 当春天的新绿还迟迟不肯露出娇容的时候…… /p /div 定义div、h1和p的样式 设置多个背景 .content { width:400px; font-size:14px; color:#333; line-height:20px; padding:10px; border:3px solid #F6F; margin-top:100px; margin-left:150px; background-color: #FDE8F7; } h1 { font-size:16px; color:#F6F; font-weight:bold; text-align:center; } p { text-indent:24px; } 引用content的样式 设置多个背景 在div中加入class=“content”。 最终效果图 渐变背景 效果图分析 渐变背景 背景图片的制作 运用Photoshop软件创建一个图片文件 。 使用“吸管”工具将前景色设置为5CACFE，背景色设置FFFFFF；使用“渐变工具”，自上而下拉伸，填充图片文件 。 渐变背景 使用“单列选择”工具选择1像素宽、700像素高的页面，另存为.gif格式。 渐变背景 页面文件的制作 创建一个网页文件，设置其页面内嵌样式表的声明。 在CSS中添加body属性，对图片设定水平方向重复显示。在属性中添加与图片底部颜色一致的页面背景色。 body { background-image: url(2-11-bg.jpg); background-repeat:repeat-x; background-color:#FFF; margin:0; padding:0; }