html+css制作div標(biāo)簽增加右上角刪除圖標(biāo)的示例代碼
發(fā)布時(shí)間：2020-05-11 15:26:28 作者：newsky_heart 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了html+css制作div標(biāo)簽增加右上角刪除圖標(biāo),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、需求描述
在Div標(biāo)簽的右上角顯示刪除圖標(biāo)
二、實(shí)現(xiàn)方式
html、CSS
三、參考代碼
<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" οnclick="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>
附錄：在輸入框左邊加一個(gè)小圖標(biāo)，css樣式應(yīng)該怎么寫？
<!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>無標(biāo)題文檔</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>
總結(jié)
到此這篇關(guān)于html+css制作div標(biāo)簽增加右上角刪除圖標(biāo)的示例代碼的文章就介紹到這了,更多相關(guān)div 右上角刪除圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
html+css 實(shí)現(xiàn)圖片右上角加刪除叉、圖片刪除按鈕
這篇文章主要介紹了html+css 實(shí)現(xiàn)圖片右上角加刪除叉、圖片刪除按鈕,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-05-11
