コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML CSSでプレーンテキストとボタンをアイコンで実装_HTML/Xhtml_Webページ制作

HTML CSSでプレーンテキストとボタンをアイコンで実装_HTML/Xhtml_Webページ制作

WBOY
リリース： 2016-05-16 16:36:03
オリジナル
2674 人が閲覧しました

この記事は、いくつかの基本的なページ要素の実装方法をまとめたものであり、今後更新される予定です。まず、最も一般的なのはボタンの切り抜きです。ボタンにはさまざまな外観がありますが、大きく分けてプレーン テキスト ボタンとアイコン付きボタンに分けられます。この 2 つのボタンの実装方法について説明します。レンダリングは次のとおりです:

コードは次のとおりです:

XML/HTML コードコンテンツをクリップボードにコピー
  1. 前><前 名前="コード" クラス="html" >>
  2. <html lang="zh- CN「>
  3. <頭>
  4. <タイトル>按钮写法タイトル>
  5. <メタ charset="UTF- 8">
  6. <メタ http-equiv=" X-UA 互換" コンテンツ="IE=Edge,chrome=1">
  7. <リンク rel="スタイルシート" href="css/style.css">
  8. <スタイル タイプ="text/ css">
  9. a:hover{テキスト装飾: なし;}
  10. .btn{
  11. display: inline-block;     
  12. margin-top: 10px;     
  13. パディング: 10px 24px;     
  14. border-radius: 4px;     
  15. 背景色: #63b7ff;     
  16. カラー: #fff;     
  17. カーソル: ポインタ。     
  18. }
  19. .btn:hover{
  20. 背景色: #99c6ff;     
  21. }
  22. .inbtn{
  23. 境界線: なし。     
  24. }
  25. .bubtn{
  26. 境界線: なし。     
  27. }
  28. .btn{
  29. フォントスタイル: 標準;     
  30. }     
  31. .bgbtn スパン{
  32. margin-left: 10px;     
  33. padding-left: 20px;     
  34. 背景: url(images/edit.png) 左 中央 繰り返しなし;     
  35. }
  36. .bgbtn02 img{
  37. margin-bottom: -3px;     
  38. margin-right: 10px;     
  39. }
  40. スタイル>
  41. 頭>
  42. <ボディ>
  44. <a href="" クラス="btn">ラベルボタンa>
  46. <input class="inbtn btn " タイプ=「ボタン」 値= 「ラベル入力ボタン」/>
  48. <ボタン クラス="ボタン btn ">ボタン ラベル ボタンボタン>
  50. <i クラス="ibtn btn ">タグボタンi>
  52. <a href="" クラス="bgbtn btn">
  53. <スパン>アイコン付きボタン スパン>
  54. a>
  55. <a href="" クラス="bgbtn02 btn">
  56. <img src="images/ edit.png"/>アイコン付きボタン
  57. a>
  58. ボディ>
  59. html>
さまざまなタグの長所と短所については、まだ誰もが理解する必要があります。興味深いボタンがあれば、一緒に実装します。
関連ラベル：
css html ボタン
ソース：php.cn
前の記事：Html_HTML/Xhtml_Web ページ制作で水平ナビゲーション構造を設定する方法 次の記事：HTMLで外部参照しているCSSファイルが有効にならない原因の分析と解決策_HTML/Xhtml_Webページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート