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 html-webpack-plugin' to generate HTML page plugin in memory
When we package the webpackjs file, we introduce ...
Detailed explanation and examples of database account password encryption
Detailed explanation and examples of database acc...
Detailed explanation of Linux LVM logical volume configuration process (create, increase, reduce, delete, uninstall)
Detailed explanation of Linux LVM logical volume ...
How to quickly create tens of millions of test data in MySQL
Remark: The amount of data in this article is 1 m...
Solution to the problem that the background image of a label does not display in IE8
I encountered a small problem today and struggled ...
How to solve the problem of FileZilla_Server:425 Can't open data connection
When installing FileZilla Server on the server, t...
MySQL index principle and usage example analysis
This article uses examples to illustrate the prin...
Apache Flink arbitrary Jar package upload leads to remote code execution vulnerability recurrence problem (vulnerability warning)
Vulnerability Description Apache Flink is an open...
Simple example of limit parameter of mysql paging
Two parameters of Mysql paging select * from user...
How to change the mysql password on the Xampp server (with pictures)
Today, I found out while working on PHP that if w...
HTML fixed title column, title header table specific implementation code
Copy code The code is as follows: <!DOCTYPE ht...
Introduction to query commands for MySQL stored procedures
As shown below: select name from mysql.proc where...
HTML set as homepage and add to favorites_Powernode Java Academy
How to implement the "Set as homepage" ...
Details on using bimface in vue
Table of contents 1. Install Vue scaffolding 2. C...
MySQL fuzzy query statement collection
SQL fuzzy query statement The general fuzzy state...