欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

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

页面如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>测试</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <style type="text/css">
    .main{
    float:left;
    margin-left:8px;
    }
    </style>
  </head>
  
  <body>
  <div class="ztree">
     <ul id="treeDemo" class="ztree"></ul>
    </div>
    <div class="main" style="position:relative;">
    <div class="img">
        <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
    </div>
    <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000">
       <input id="box" type="checkbox" name="box">
    </div>
    </div>
    <div class="main" style="position:relative;">
    <div class="img">
        <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
    </div>
    <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000">
       <input id="box" type="checkbox" name="box">
    </div>
    </div>
    <div class="main" style="position:relative;">
    <div class="img">
        <img alt="图片名称" src="plug-in/image/Desert.jpg" style="width:100px;height:100px">
    </div>
    <div class="checkbox" style="position:absolute;top:0;right:0;z-index:1000">
       <input id="box" type="checkbox" name="box">
    </div>
    </div>
  </body>
</html>

相关推荐:

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

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

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

相关标签: css 复选框