网页制作综合技术教程.pptVIP

?图10.42水平方向平铺背景图像的效果图10.43同时设置背景图像和背景颜色图10.44网页效果图10.3.4设置背景图像位置

图10.46将背景图像放在右下角图10.47用数值设置背景图像的位置图10.48用百分比设置背景图像的位置10.3.6设置标题的图像替换

图10.53文字标题效果图10.54制作一个标题背景图像图10.55显示标题图像图10.56图像替换的最终效果网页制作综合技术教程第3部分CSS样式设计第11章用CSS设置链接与导航菜单丰富的超链接特效11.1控制鼠标指针11.2设置项目列表样式11.3创建简单的导航菜单11.4应用滑动门技术的玻璃效果菜单11.5在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的整体。在各种网站中，导航都是网页中最重要的组成部分之一。因此，也出现了各式各样非常美观、实用性很强的导航样式，如图11.1所示的是Microsoft公司关于Office的网站，上部的导航条和Office2007软件风格非常一致。图11.1Office网站导航风格与软件风格一致图11.2WindowsMobiles网站的菜单式导航11.1丰富的超链接特效

在HTML中，超链接是通过a标记来实现的，链接的具体地址则是利用a标记的href属性设置，例如： ahref=前沿视频教室/a 在默认的浏览器浏览方式下，超链接统一为蓝色并且有下画线，被点击过的超链接则为紫色并且也有下画线，如图11.3所示。图11.3普通的超链接 a{ /*超链接的样式*/ text-decoration:none; /*去掉下画线*/ }图11.4没有下划线的超链接属性说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过的超链接的样式a:hover鼠标指针经过超链接时的样式a:active在超链接上点击时，即“当前激活”时超链接的样式表11.1 可制作动态效果的CSS伪类别属性11.2控制鼠标指针

表11.2 cursor定制的鼠标指针效果11.3设置项目列表样式

html head title项目列表/title style ul{ font-size:0.9em; color:#00458c; list-style-type:decimal; /*项目编号*/ } /style /head body ul liHome/li liContactus/li liWebDev/li liWebDesign/li liMap/li /ul /body /html ul{ font-size:0.9em; color:#00458c; list-style-type:decimal; /*项目编号*/ }图10.10设置段落中首行文本悬挂缩进10.1.10设置字词间距

图10.11设置字词间距10.1.11设置段落内部的文字行高

如果不使用CSS，在HTML中是无法控、制段落中行与行之间的距离的。在CSS中，line-height属性用于控制行的高度，通过它可以调整行与行之间的距离。关于line-height属性的设置值如表10.4所示。设置值说明长度数值，可以使用前面所介绍的尺度单位倍数font-size属性设置值的倍数百分比相对于font-size属性设置值的百分比表10.4 line-height属性的设置值图10.12设置段落中的行高10.1.12设置段落之间的距离

图10.14调整段落间距后的效果10.1.13控制文本的水平位置

设置值说明left左对齐，浏览器默认right右对齐center居中对齐justify两端对齐表10.5