【免费】chapter6源代码.zip资源-CSDN文库

共18个文件

html：10个

jpg：8个

需积分: 0 67 浏览量 2023-04-12 07:55:14 上传评论收藏 243KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

chapter6源代码.zip （18个子文件）

chapter6

6-7.html 1KB

6-3.html 1KB

6-8.html 700B

6-4.html 2KB

6-10.html 484B

6-5.html 923B

6-1.html 1KB

6-9.html 1KB

6-6.html 2KB

images

banner.jpg 60KB

list.jpg 1KB

button1.jpg 22KB

jh.jpg 61KB

bg.jpg 22KB

md.jpg 120KB

button2.jpg 22KB

button1_bg.jpg 21KB

6-2.html 1KB

<!doctype html> <html> <head> <meta charset = "utf-8"> <title>背景图像变换超链接</title> <style type = "text/css"> *{ margin:0px; padding:0px; } .banner{ background:url(images/bg.jpg); /* 自动水平平铺 */ } .banner img{ display:block; /*消除图像对父元素高度带来的4px小bug*/ } .menu{ height:32px; background:url(images/button1_bg.jpg); font-size:12px; } .menu ul{ list-style-type:none; } .menu ul li{ float:left; /* 利用浮动属性，使列表中的每一项水平排列 */ width:80px; /* 宽度与背景图像宽度一样 */ text-align:center; } .menu ul li a{ display:block; /* 将元素a转换为块级元素，方便设置width和height属性 */ text-decoration:none; height:32px; line-height:32px; /* 与height属性值一样，达到文字垂直方向居中 */ } .menu ul li a:link,.menu ul li a:visited{ color:#0000FF; background-image:url(images/button1.jpg); } .menu ul li a:hover{ color:#FFFFFF; background-image:url(images/button2.jpg); /* 鼠标经过链接时的背景图像 */ } </style> </head> <body> <div class = "banner"><img src=" images/banner.jpg" /></div> <div class = "menu"> <ul> <li><a href = "#">首页</a></li> <li><a href = "#">版面设计</a></li> <li><a href = "#">文章导读</a></li> <li><a href = "#">收藏资源</a></li> <li><a href = "#">休闲娱乐</a></li> <li><a href = "#">联系方式</a></li> </ul> </div> </body> </html>

评论收藏

内容反馈