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) ファイルを埋め込む方法
この記事では、トランザクション、インデックス、ロックなどの MySQL の知識ポイントの原理と使用法...
Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...
よくある質問ユーザー ''@'localhost' によるデータベー...
目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...
目次1. Commonjsのエクスポートとrequireの使用1.1 CommonJS エクスポート...
開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...
個々のウェブマスターにとって、自分のウェブサイトをいかにユニークで個性あふれるものにするかは、常に絶...
それは何ですか? em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ...
a href="#"> リンクをクリックすると、ページがページ上部までスク...
VMware ツールは VMware の使用に非常に便利です。そのため、VMware ツールをインス...
目次1. 時刻表示に関する従来の考え方2. 時刻の書式設定 toLocaleString() Obj...
ターゲットzabbix フロントエンド監視の iostat コマンドでデータの 1 つを表示します。...
REPLACE構文REPLACE(String,from_str,to_str)つまり、String...
まず、フォームを送信するいくつかの方法を見てみましょう。 1. <!--一般的な送信ボタン--...
最近、たまたま vue+springboot のフロントエンドとバックエンドの分離プロジェクトに触れ...