当前位置:Gxlcms > css > css如何实现图片右上角添加复选框(代码)

css如何实现图片右上角添加复选框(代码)

时间:2021-07-01 10:21:17 帮助过:12人阅读

本篇文章给大家带来的内容是关于css如何实现图片右上角添加复选框 (代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

页面如下:

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  5. %>
  6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <title>测试</title>
  11. <meta http-equiv="pragma" content="no-cache">
  12. <meta http-equiv="cache-control" content="no-cache">
  13. <meta http-equiv="expires" content="0">
  14. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  15. <meta http-equiv="description" content="This is my page">
  16. <style type="text/css">
  17. .main{
  18. float:left;
  19. margin-left:8px;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div class="ztree">
  25. <ul id="treeDemo" class="ztree"></ul>
  26. </div>
  27. <div class="main" style="position:relative;">
  28. <div class="img">
  29. <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
  30. </div>
  31. <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000">
  32. <input id="box" type="checkbox" name="box">
  33. </div>
  34. </div>
  35. <div class="main" style="position:relative;">
  36. <div class="img">
  37. <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
  38. </div>
  39. <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000">
  40. <input id="box" type="checkbox" name="box">
  41. </div>
  42. </div>
  43. <div class="main" style="position:relative;">
  44. <div class="img">
  45. <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
  46. </div>
  47. <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000">
  48. <input id="box" type="checkbox" name="box">
  49. </div>
  50. </div>
  51. </body>
  52. </html>

相关推荐:

如何使用CSS给图片添加双边框效果_html/css_WEB-ITnose

css实现的在图片上面添加文字说明_html/css_WEB-ITnose

以上就是css如何实现图片右上角添加复选框 (代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行