So fügen Sie mithilfe von CSS (Code) ein Kontrollkästchen in der oberen rechten Ecke des Bildes hinzu-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

So fügen Sie mithilfe von CSS (Code) ein Kontrollkästchen in der oberen rechten Ecke des Bildes hinzu

不言

Aug 28, 2018 am 11:24 AM

css复选框

Der Inhalt dieses Artikels befasst sich mit dem Hinzufügen eines Kontrollkästchens (Code) in der oberen rechten Ecke des Bildes. Ich hoffe, dass es hilfreich ist Du.

Die Seite sieht wie folgt aus:

<%@ 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 src="/static/imghwm/default1.png"  data-src="plug-in/image/Desert.jpg"  class="lazy"  alt="图片名称"    style="max-width:90%">
    </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 src="/static/imghwm/default1.png"  data-src="plug-in/image/Desert.jpg"  class="lazy"  alt="图片名称"    style="max-width:90%">
    </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 src="/static/imghwm/default1.png"  data-src="plug-in/image/Desert.jpg"  class="lazy"  alt="图片名称"    style="max-width:90%">
    </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>

Verwandte Empfehlungen:

So verwenden Sie CSS, um einem image_html/css_WEB-ITnose einen doppelten Rahmeneffekt hinzuzufügen

CSS-Implementierung zum Hinzufügen von Textbeschreibungen zu images_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonSo fügen Sie mithilfe von CSS (Code) ein Kontrollkästchen in der oberen rechten Ecke des Bildes hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenApr 18, 2025 am 11:08 AM

Haben Sie jemals ein Formular gehabt, das ein kurzes, willkürliches Stück Text akzeptieren musste? Wie ein Name oder was auch immer. Das ist genau das, wofür es ist. Es gibt viele

Frontkonferenz in ZürichApr 18, 2025 am 11:03 AM

Ich bin so aufgeregt, nach Zürich, der Schweiz, zur Frontkonferenz zu gehen (liebe diesen Namen und diese URL!). Ich war noch nie in der Schweiz, also bin ich aufgeregt

Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternApr 18, 2025 am 10:58 AM

Eine meiner Lieblingsentwicklungen in der Softwareentwicklung war das Aufkommen von Serverless. Als Entwickler, der die Tendenz hat, sich in den Details festzuhalten

Erstellen dynamischer Routen in einer Nuxt -AnwendungApr 18, 2025 am 10:53 AM

In diesem Beitrag werden wir eine E -Commerce -Store -Demo verwenden, die ich für Netlify erstellt und bereitgestellt habe, um zu zeigen, wie wir dynamische Routen für eingehende Daten erstellen können. Es ist fair

Gestaffelte CSS -ÜbergängeApr 18, 2025 am 10:46 AM

Lassen Sie sich sagen, Sie wollten ein Element auf einen unterhaltsamen visuellen Effekt verschieben.

Verwendung von Immer für React State ManagementApr 18, 2025 am 10:41 AM

Wir nutzen den Zustand, um Anwendungsdaten zu verfolgen. Zustände ändern sich, wenn Benutzer mit einer Anwendung interagieren. In diesem Fall müssen wir den Status aktualisieren

Das Erstellen eines animierten FaviconApr 18, 2025 am 10:35 AM

Es ist das erste, wonach Ihre Augen beim Wechseln der Registerkarten suchen.

Verwenden Sie Ihre Domain mit einer netlify veranstalteten WebsiteApr 18, 2025 am 10:34 AM

Netlify hat ihre eigenen Dokumente für benutzerdefinierte Domains. Wenn Sie also nach technischen Dokumenten des Pferdes auf der Suche nach dem Mund -Mund -Dokument sind, sollte dies als Quelle von behandelt werden

See all articles