资源描述
,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,链接与导航,回顾,文字样式,图像样式,动态超链接,超链接:,链接文本,去掉超链接的下划线:,a text-,decoration:none,;,利用伪类制作动态效果:,a:link,超链接的普通样式,即正常浏览状态的样式,a:hover,鼠标指针经过超链接上时的样式,a:visited,被点击过的超链接的样式,a:active,在超链接上单击时,即“当前激活”时,超链接样式,按钮式超链接,利用边框的样式模拟按钮效果。,对于鼠标经过时,改变文字颜色、背景色、位置和边框。,a:linkcolor:#A62020;,padding:2px 10px 2px 10px;,background:#84B3E6;,border-top:1px solid#,eeeeee,;,border-left:1px solid#,eeeeee,;,border-bottom:1px solid#717171;,border-right:1px solid#717171,color:#821818;,padding:3px 8px 1px 12px;,background:#e2c4c9;,border-top:1px solid#717171;,border-left:1px solid#717171;,border-bottom:1px solid#,eeeeee,;,border-right:1px solid#,eeeeee,css,控制鼠标指针,通过,cursor,属性可以设置各式各样的鼠标指针样式。,bodycursor:pointer,项目列表,通常的项目列表主要采用,或者,标记,然后配合,标记罗列各个项目。,设置列表符号,ulfont-size:12px;color:#00458c;,list-style-,type,:decimal,Home,Contact Us,Web Dev,Web Design,项目列表,图片符号,ulfont-size:12px;color:#00458c;,list-style-,img,:url,(),效果:图标与文字之间的距离有,着明显的区别,因此不推荐这种,设置图片符号的方法。,建议:将,list-style-,type:none,;,然后修改,标记的背景属性,。,项目列表,如何设置项目列表的背景图片,?,自适应宽度的导航,*padding:0;margin:0,ul li float:left;list-style:none;,margin-left:10px;margin-top:20px,ul li a display:block;height:35px;,background:url(leftbg.jpg);,padding-left:10px;,text-decoration:none;color:#000,ul li a span display:block;,height:35px;padding-right:10px;,background:url(rightbg.jpg),no-repeat right 0;line-height:35px,学院首页,校园广播站,校园风采,相册,自适应高度,总结,文字样式,背景图像设置,
展开阅读全文