其他分享
首页 > 其他分享> > 前端知识复习: JS选中变色

前端知识复习: JS选中变色

作者:互联网

前端知识复习: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,选中,秀丽
来源: https://www.cnblogs.com/apeng/p/10422243.html