1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>1</title> 5 <meta charset="utf-8"> 6 <style type="text/css"> 7 *{ 8 /* 居中*/ 9 margin:0 auto; 10 padding:0 auto; 11 text-align:center; 12 13 } 14 body{ 15 font-family: "Helvetica","Arial",serif; 16 color:#333; 17 background-color: #ccc; 18 margin:1em 10%; 19 } 20 h1{ 21 color: #333; 22 background-color: transparent; 23 } 24 a{ 25 color: #c60; 26 background-color: transparent; 27 font-weight: bold; 28 text-decoration: none; 29 } 30 ul{ 31 padding: 0; 32 display:inline-block; /* 行内块元素 加了这个属性之后，行级元素可以控制高、宽了，margin可以加纵向了*/ 33 } 34 li{ 35 float: left; 36 padding: 1em; 37 list-style: none; 38 } 39 img{ 40 display: block; 41 clear: both; 42 } 43 </style> 44 </head> 45 <body> 46 <h1>Snapshots</h1> 47 <ul> 48 <li><a href="images/1.jpg" onclick="show(this);return false;" title="这是第一张照片的描述" >第一张图片</a></li> 49 <li><a href="images/2.jpg" onclick="show(this);return false;" title="这是第2照片的描述" >第二张图片</a></li> 50 <li><a href="images/3.jpg" onclick="show(this);return false;" title="这是第3张照片的描述" >第三张图片</a></li> 51 <li><a href="images/4.jpg" onclick="show(this);return false;" title="这是第4张照片的描述" >第四张图片</a></li> 52 </ul> 53 <!-- 54 <img id="pla" src="images/6.jpg" / alt="图片库" width="300px";height="600px"> 55 <p id="description">Choose an image.</p> 56 --> 57 <script type="text/javascript"> 58 var placeimg = document.createElement('img'); 59 var para = document.createElement('p'); 60 placeimg.setAttribute('id','pla') 61 placeimg.setAttribute('src','images/6.jpg'); 62 placeimg.setAttribute('alt','图片库') 63 placeimg.setAttribute('width','300px') 64 placeimg.setAttribute('height','600px') 65 para.setAttribute('id','description') 66 var desctxt = document.createTextNode('Choose an image') 67 para.appendChild(desctxt) 68 document.getElementsByTagName('body')[0].appendChild(placeimg); 69 document.getElementsByTagName('body')[0].appendChild(para) 70 71 function show(pic){ 72 var sour = pic.getAttribute('href'); 73 var placeholder = document.getElementById('pla'); 74 placeholder.setAttribute('src',sour); 75 var text = pic.getAttribute('title'); 76 var description = document.getElementById('description'); 77 description.firstChild.nodeValue=text; 78 } 79 var BodyElement = document.getElementsByTagName('body')[0]; 80 console.log(BodyElement.childNodes); 81 </script> 82 </body> 83 </html>