HTML+CSS makes div tag add delete icon in the upper right corner sample code
|
1. Requirements description Display the delete icon in the upper right corner of the Div tag 2. Implementation html, CSS 3. Reference Code
<style>
.container{
width:60px;
height:60px;
border: 1px dotted red;
position:relative;
}
.content{
position:relative;
top:20px;
}
.delete{
width:20px;
height:20px;
border-radius:60%;
position:absolute;
top:-10px;
right:-10px;
}
</style>
<div class="container">
<img src="http://www.iconpng.com/download/png/61252" class="delete" onclick="alert(1)"/>
<div class="content">content</div>
</div>
<div class="container">
<img src="http://www.iconpng.com/download/png/61252" class="delete"/>
<div class="content">content</div>
</div>Appendix: How should I write the CSS style to add a small icon to the left of the input box?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.text{border:solid 2px #ccc;width:400px;height:40px;background:url(http://d.lanrentuku.com/down/png/1211/blueberry/user_friend.png) no-repeat 0 center;}
.text input{float:left;border:none;background:none;height:40px;line-height:30px;width:100%; text-indent:32px;}
</style>
</head>
<body>
<div class="text">
<input type="text"/>
</div>
</body>
</html>
Summarize This is the end of this article about how to use html+css to create a div tag with a delete icon in the upper right corner. For more information about the div delete icon in the upper right corner, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
>>: How to embed flash video format (flv, swf) files in html files
Recommend
Use the ip netns command in Linux to isolate the network port and configure the IP address
1. Add the isolation marker: ip netns add fd 2. P...
Detailed introduction of Chrome developer tools-timeline
1. Overview Users expect the web applications the...
The webpage cannot be opened because the div element lacks a closing tag
At first I thought it was a speed issue, so I late...
HTML tag meta summary, HTML5 head meta attribute summary
Preface meta is an auxiliary tag in the head area...
JavaScript+HTML to implement student information management system
Table of contents 1. Introduction 2. Rendering 3....
Detailed explanation of how to clear a few pixels of blank space under an image using CSS
Recently, a friend asked me a question: When layo...
Implementation code for automatically adapting the width of the web page to the width of the mobile phone screen (viewport)
The general way of writing is as follows: XML/HTM...
Detailed explanation of Linx awk introductory tutorial
Awk is an application for processing text files, ...
Example code for using CSS cross-fade() to achieve a semi-transparent background image effect
1. Requirements description For a certain element...
Example code for implementing a circular trajectory animation using CSS3 and table tags
html: In fact, it is to arrange several solid cir...
How to import Tomcat source code into idea
Table of contents 1. Download the tomcat code 2. ...
The difference between html block-level tags and inline tags
1. Block-level element: refers to the ability to e...
Implementation of Vue single file component
I recently read about vue. I found a single-file ...
Detailed explanation of the pitfalls of MySQL 8.0
I updated MySQL 8.0 today. The first problem: Nav...
Analysis of log files in the tomcat logs directory (summary)
Each time tomcat is started, the following log fi...