コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 純粋な CSS_html/css_WEB-ITnose を使用してバブル プロンプト ボックスを作成する

純粋な CSS_html/css_WEB-ITnose を使用してバブル プロンプト ボックスを作成する

WBOY
リリース： 2016-06-24 11:53:56
オリジナル
1751 人が閲覧しました

出典: http://www.ido321.com/1214.html


CSS の border 属性を使用して基本的なグラフィックを作成する方法に関する 2 日前の記事を翻訳しました: http://www.ido321。 com/1200.html

これに基づいて、今日は CSS を使用してバブル プロンプト ボックスを作成する方法に関する記事を共有します。

最初に 2 つのレンダリングを見てください:

CSS: 

/* 对话气泡 用法：使用.speech-bubble和.speech-bubble-DIRECTION类 <div class="speech-bubble speech-bubble-top">Hi there</div>*/ .speech-bubble {  position: relative;  background-color: #292929;   width: 200px;  height: 150px;  line-height: 150px; /* 垂直居中 */  color: white;  text-align: center;  border-radius: 10px;  font-family: sans-serif;} .speech-bubble:after {  content: '';  position: absolute;   width: 0;  height: 0;   border: 15px solid;} /* 箭头的位置 */.speech-bubble-top:after {  border-bottom-color: #292929;  left: 50%;  bottom: 100%;  margin-left: -15px;  }.speech-bubble-right:after {  border-left-color: #292929;   left: 100%;  top: 50%;  margin-top: -15px;   } .speech-bubble-bottom:after {  border-top-color: #292929;  top: 100%;  left: 50%;  margin-left: -15px;  } .speech-bubble-left:after {  border-right-color: #292929;  top: 50%;  right: 100%;  margin-top: -15px;   }
ログイン後にコピー

HTML: 

<!DOCTYPE html><html>    <head>        <link rel="stylesheet" type="text/css" href="maopao.css">        <title>Test</title>    </head>    <body>        <div class="speech-bubble speech-bubble-top">            箭头在顶部        </div>         <br/>        <div class="speech-bubble speech-bubble-bottom">            箭头在底部        </div>        <br/>        <div class="speech-bubble speech-bubble-left">            箭头在左侧        </div>         <br/>        <div class="speech-bubble speech-bubble-right">            箭头在右侧        </div>    </body></html>
ログイン後にコピー

デモアドレス: http://js fiddle.net/80r9kjs2/embedded/result/

次の記事: PHP: 非反復乱数を生成する方法




関連ラベル：
纯CSS制作冒泡提示框
ソース：php.cn
前の記事：Codeforces ラウンド #226 (ディビジョン 2) C 数値理論_html/css_WEB-ITnose 次の記事：写輪眼の開眼と進化過程の純粋CSS3制作 [transfer]_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2063
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2222
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1872
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1753
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1782
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート