欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html+css制作div標(biāo)簽增加右上角刪除圖標(biāo)的示例代碼

  發(fā)布時間：2020-05-11 15:26:28   作者：newsky_heart   我要評論
這篇文章主要介紹了html+css制作div標(biāo)簽增加右上角刪除圖標(biāo),本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

一、需求描述

在Div標(biāo)簽的右上角顯示刪除圖標(biāo)

二、實現(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>

附錄：在輸入框左邊加一個小圖標(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論