DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> Html+css實現純文字和帶圖標的按鈕
Html+css實現純文字和帶圖標的按鈕
編輯：HTML和Xhtml     

本文總結一下一些基礎頁面元素的實現方式，後續陸續更新。首先我們遇到最多的可能是按鈕的切圖，按鈕可能有很多種外觀，但是一般可分為純文字的和帶圖標的按鈕，下面就來說說這兩種按鈕的實現方法。效果圖如下：

代碼如下：

XML/HTML Code復制內容到剪貼板
  1. </pre><pre name="code" class="html"><!DOCTYPE html>     
  2. <html lang="zh-CN">     
  3. <head>     
  4.   <title>按鈕寫法</title>     
  5.   <meta charset="UTF-8">     
  6.   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">     
  7.   <link rel="stylesheet" href="css/style.css">     
  8. <style type="text/css">     
  9.   a:hover{text-decoration: none;}     
  10.   .btn{     
  11.     display: inline-block;     
  12.     margin-top: 10px;     
  13.     padding: 10px 24px;     
  14.     border-radius: 4px;     
  15.     background-color: #63b7ff;     
  16.     color: #fff;     
  17.     cursor: pointer;     
  18.   }     
  19.   .btn:hover{     
  20.     background-color: #99c6ff;     
  21.   }     
  22.   .inbtn{     
  23.     border: none;     
  24.   }     
  25.   .bubtn{     
  26.     border: none;     
  27.   }     
  28.   .btn{     
  29.     font-style: normal;     
  30.   }     
  31.   .bgbtn span{     
  32.     margin-left: 10px;     
  33.     padding-left: 20px;     
  34.     background: url(images/edit.png) left center no-repeat;     
  35.   }     
  36.   .bgbtn02 img{     
  37.     margin-bottom: -3px;     
  38.     margin-right: 10px;     
  39.   }     
  40. </style>     
  41. </head>     
  42. <body>     
  43. <!--<a>標簽按鈕-->     
  44. <a href="" class="btn">a標簽按鈕</a>     
  45. <!--<input>標簽按鈕-->     
  46. <input class="inbtn btn" type="button" value="input標簽按鈕"/>     
  47. <!--<button>標簽按鈕-->     
  48. <button class="bubtn btn">button標簽按鈕</button>     
  49. <!--任意標簽按鈕-->     
  50. <i class="ibtn btn">i標簽按鈕</i>     
  51. <!--帶背景圖標按鈕-->     
  52. <a href="" class="bgbtn btn">     
  53.   <span>帶圖標按鈕</span>     
  54. </a>     
  55. <a href="" class="bgbtn02 btn">     
  56.   <img src="images/edit.png"/>帶圖標按鈕     
  57. </a>     
  58. </body>     
  59. </html>     
至於各種標簽的優缺點，還是需要大家去體會啦，如果大家有什麼好玩的按鈕要寫，我們一起實現哦。
HTML和Xhtml
淺談HTML空鏈接的作用
空鏈接：就是沒有目標端點的鏈接。格式<a href="#">顯示內容
body的屬性 body標簽主要的屬性小結
bgcolor="文本顏色" background="背景圖片&quo
向HTML中插入視頻並兼容所有浏覽器的方法
最常用的向HTML中插入視頻的方法有兩種，一種是古老的<object></obje

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
html下拉菜單提交後保留選中值而不返回默認值 HTML表格標記教程(27):單元格的背景圖像屬性BACKGROUND HTML 行間距的設置方法與問題 html文檔中的 ol 元素的序號數字極限探討 關於分割線 hr 在各浏覽器中的差異 select的最佳預設打造全兼容各浏覽器select HTML 鏈接錨標簽及其在SEO中的作用介紹 HTML中select下拉框內容顯示不全部分被覆蓋的解決方法 Form表單在HTML5中新的使用方法 設計師 需要學習編寫代碼嗎
熱門推薦
HTML表格布局實例講解 html頁!--[if IE]...![endif]--使用詳細介紹 學習如何書寫整潔規范的HTML標記 設置frameset的高度 界面變形的解決方法 理論知識:PSD模板切成HTML的正確操作 HTML 相對路徑和絕對路徑區別分析 HTML表格標記教程(12):邊框樣式屬性FRAME HTML表格標記教程(16):標題水平對齊屬性ALIGN 利用HTML、CSS 實現帶表情的評論框的制作教程
大家都在看
DIV高度自適應方法匯總 使表格的標題列可左右拉伸jquery插件封裝 tab切換樣式 js對文章內容進行分頁的具體實現 客齊集OEM的CSS解析與開發經驗 UCD設計師：挖掘商業價值緯度 jQuery 和 CSS 的文本特效插件集錦 使用XML進行數據存儲與備份的實現(2)
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved