1、仿照相册案例, 写一个小案例, 介绍一下你的家乡
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>家乡介绍篇之萧县</title> <style type="text/css"> .box { width: 500px; height: 750px; background-color: #efefef; border: 1px solid lightgray; margin: 20px auto; text-align: center; color: #636363; box-shadow: 2px 2px 2px #999; } .box ul { margin:0; padding:0; /*将ul转为BFC独立块,使之不受内部浮动元素的影响*/ overflow: hidden; } .box ul li { list-style-type: none; float:left; background-color: skyblue; margin-left: 20px; } .box ul li a { /*将a转为块元素,并设置为li的宽高,这样可以使整个li可以被点击*/ display: block; width: 100px; height: 40px; line-height: 40px; color: white; text-decoration: none; } .box ul li:hover { font-size:1.2em; background-color: coral; } .box .pic { width: 450px; height:450px; border: 1px solid lightgray; margin: 50px auto 0; } .box .pic img { width: 100%; height: 100%; } </style> </head> <body> <!-- 知识点: 1.js代码可以写在哪里?2.js如何调用的? 3.js函数的使用语法--> <div class="box"> <h2>家乡介绍</h2> <ul> <li><a href="http://img1.lvyou114.com/nav/nav_photo/2007416143146950.jpg" title="萧县位于安徽省最北部,苏、鲁、豫、皖四省交界处,总面积1871平方公里,大部分为平原,东南部为海拔100—300米的低山矮岭。人口130万,辖18镇5乡708个行政村。开放的萧县日益显现出其特有的发展优势和巨大的发展潜力。" onclick="changePic(this);return false">整体介绍</a></li> <li> <a href="https://dimg08.c-ctrip.com/images/fd/tg/g5/M0B/29/04/CggYsFcAlkOAJB3EAAMThoCGHQU782_C_350_230.jpg" title="圣泉寺始建于北宋年间,至今已有800余年历史,有房舍30余间,因寺旁有一口“圣泉”而得名。圣泉寺圣泉的泉水虽然不大,但四季不涸,常有当地人带着瓶瓶罐罐来此打泉水。寺庙的建筑显得陈旧,寺门前立着几块古老的石碑,进入寺庙,便能看到放生池,池中有一尊观音像,旁边是龙王殿、天王殿等。" onclick="changePic(this);return false">圣泉寺</a> </li> <li> <a href="https://p1.ssl.qhmsg.com/dr/270_500_/t0133bcae4adc24abe8.jpg?size=480x360" title="皇藏峪国家森林公园位于萧县城东南30公里处,东靠京沪铁路,西连淮北、南接宿州,北近徐州,距徐州观音机场60公里,连霍高速、合徐高速在景区边缘交汇,外部交通十分快捷、方便。" onclick="changePic(this);return false">皇藏峪</a> </li> <li> <a href="https://dimg01.c-ctrip.com/images/100d0w000000k5eoj1539_R_1600_10000_Mtg_7.jpg" title="萧县高铁2017年正式通车" onclick="changePic(this);return false">交通</a> </li> </ul> <div class="pic"> <img src="images/zwt.png" alt="" id="img"> </div> <p id='info'></p> </div> <script type="text/javascript"> function changePic(pic) { //1.获取到要替换的家乡图片与简介信息 var picUrl = pic.href; var picInfo = pic.title; var picName = pic.innerHTML; //2.获取到页面中,要被替换掉的图像元素对象 var img = document.getElementById('img'); var p = document.getElementById('info'); //3. 将对应的图像与信息占位符进行替换 img.src = picUrl; // p.innerHTML = picName+':'+picInfo; p.innerHTML = '<span style="color:coral">'+picName+':'+picInfo+'</span>'; } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例