前端知識復習： JS選中變色
阿新 • • 發佈：2019-02-23
href utf -c ng- splay eight spa idt bubuko
前端知識復習：JS選中變色
上篇文章 ：前端知識復習：Html DIV 圖文混排（文字放在圖片下邊）
Js選中圖片效果
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <style type="text/css"> 7 img { 8 width:200px; 9 height:200px; 10 } 11 .list li { 12 float: left; 13 display: inline; 14 margin: 5px; 15 } 16 .p{ 17 text-align:center; 18 } 19 #div_img1 { 20 padding-bottom: 50px; 21 } 22 </style> 23 </head> 24 <body> 25 26 <div> 27 <center><h1>圖文混排</h1></center> 28 <div id="div_img1"> 29 <ul class="list"> 30 <li> 31 <img src="portfolio/1.jpg" align="bottom"> 32 <div class="p">秀麗的風景1</div> 33 </li> 34 <li> 35 <img src="portfolio/2.jpg" align="bottom"> 36 <div class="p">秀麗的風景2</div> 37 </li> 38 <li> 39 <img src="portfolio/3.jpg" align="bottom"> 40 <div class="p">秀麗的風景3</div> 41 </li> 42 <li> 43 <img src="portfolio/4.jpg" align="bottom"> 44 <div class="p">秀麗的風景4</div> 45 </li> 46 <li> 47 <img src="portfolio/5.jpg" align="bottom"> 48 <div class="p">秀麗的風景5</div> 49 </li> 50 51 <li> 52 <img src="portfolio/6.jpg" align="bottom"> 53 <div class="p">秀麗的風景6</div> 54 </li> 55 </ul> 56 57 </div> 58 59 <div id="div_img2"> 60 <ul class="list"> 61 <li> 62 <img src="portfolio/7.jpg" align="bottom"> 63 <div class="p">秀麗的風景7</div> 64 </li> 65 <li> 66 <img src="portfolio/8.jpg" align="bottom"> 67 <div class="p">秀麗的風景8</div> 68 </li> 69 <li> 70 <img src="portfolio/9.jpg" align="bottom"> 71 <div class="p">秀麗的風景9</div> 72 </li> 73 <li> 74 <img src="portfolio/10.jpg" align="bottom"> 75 <div class="p">秀麗的風景10</div> 76 </li> 77 <li> 78 <img src="portfolio/11.jpg" align="bottom"> 79 <div class="p">秀麗的風景11</div> 80 </li> 81 82 <li> 83 <img src="portfolio/12.jpg" align="bottom"> 84 <div class="p">秀麗的風景12</div> 85 </li> 86 </ul> 87 </div> 88 </div> 89 90 </body> 91 </html>
前端知識復習： JS選中變色