前端知识复习: 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>

 

转载于:https://www.cnblogs.com/apeng/p/10422243.html

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值