HTML+CSS で div タグの右上隅に削除アイコンを追加するサンプルコード
|
1. 要件の説明 Divタグの右上隅に削除アイコンを表示します 2. 実装 html、CSS 3. 参照コード
<スタイル>
。容器{
幅:60ピクセル;
高さ:60px;
境界線: 1px の赤い点線;
位置:相対;
}
。コンテンツ{
位置:相対;
上:20px;
}
。消去{
幅:20px;
高さ:20px;
境界線の半径:60%;
位置:絶対;
上:-10px;
右:-10px;
}
</スタイル>
<div class="コンテナ">
<img src="http://www.iconpng.com/download/png/61252" class="delete" onclick="alert(1)"/>
<div class="content">コンテンツ</div>
</div>
<div class="コンテナ">
<img src="http://www.iconpng.com/download/png/61252" class="delete"/>
<div class="content">コンテンツ</div>
</div>付録: 入力ボックスの左側に小さなアイコンを追加するには、CSS スタイルをどのように記述すればよいですか?
<!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">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>無題のドキュメント</title>
<スタイル>
.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;}
</スタイル>
</head>
<本文>
<div class="text">
<入力タイプ="テキスト"/>
</div>
</本文>
</html>
要約する html+cssを使用して右上隅に削除アイコンがあるdivタグを作成する方法についての記事はこれで終わりです。右上隅のdiv削除アイコンの詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 |
<<: シンプルで簡単なJavaScript開発のためのSvelte実装原理の詳細な説明
>>: HTML ファイルにフラッシュ ビデオ形式 (flv、swf) ファイルを埋め込む方法
推薦する
CSS3で実装されたテキストポップアップ効果
成果を達成する実装コードhtml <div>123WORDPRESS.COM</d...
WindowsでのMySQLインストールチュートリアルの詳細な紹介
目次1. ダウンロードする前に理解しておくべき概念2. 必要なバージョンを選択する3. MySQLサ...
mysql zipファイルのインストールチュートリアル
この記事では、参考までにMySQL zipファイルをインストールする具体的な方法を紹介します。具体的...
Vue Element UI カスタム説明リストコンポーネント
この記事の例では、Vue Element UIカスタム説明リストコンポーネントの具体的なコードを参考...
HTML ページジャンプのパラメータ渡しの問題
効果は以下のとおりです。ページジャンプボタンをクリックした後 対応する値はページ b で取得できます...
Vueはシンプルなメモ帳機能を実装します
この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...
MySQL Undo ログと Redo ログの概要
目次元に戻すログUNDOログの生成と破棄UNDOログの保存元に戻すログ機能トランザクションの原子性の...
MySQL 8.0.11 Community Green Edition の Windows 用インストール手順図
このチュートリアルでは、インストールに最新の MySQL コミュニティ グリーン バージョンである ...
Docker ベースの MySQL マスタースレーブ レプリケーションを実装する方法
序文MySQL マスター/スレーブ レプリケーションは、アプリケーションの高パフォーマンスと高可用性...
Vue はタブ ラベルを実装します (ラベルが自動スクロールを超える)
作成されたタブラベルがページの表示領域を超えると、タブラベルの距離だけ自動的にスクロールされます。ま...
Reactは感情を使ってCSSコードを書く
目次導入：感情のインストール：一般的な CSS コンポーネントを追加します。既存のコンポーネントにス...
Vue 仮想リストの実例
目次序文デザイン成し遂げるまとめ序文最近は、いつも延々とスワイプしています。 Weibo をチェック...
JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明
目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...
AngularでTweenMaxアニメーションライブラリを使用する際の問題と解決策
最近何もすることがないのでCSSをいじっていますより良いアニメーションライブラリTweenMaxを見...
バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?
目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...