<form id="hz9zz"></form>
    • <form id="hz9zz"></form>
    

      

      <nobr id="hz9zz"></nobr>
      <form id="hz9zz"></form>
      3.   
          
      明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！
                   
        
                           
        
                        		  
        
                 
              
                
      Html+css如何完成純文字與帶圖標的按鈕
                
                  發表時間：2023-09-19             來源：明輝站整理相關軟件相關文章人氣：          
              
      [摘要]這次給大家帶來Html+css怎樣實現純文字和帶圖標的按鈕，Html+css實現純文字和帶圖標的按鈕的注意事項有哪些，下面就是實戰案例，一起來看一下。本文總結一下一些基礎頁面元素的實現方式，后續陸續更新。首先我們遇到最多的可能是按鈕的切圖，按鈕可能有很多種外觀，但是一般可分為純文字的和帶圖標的按鈕...
      這次給大家帶來Html+css怎樣實現純文字和帶圖標的按鈕，Html+css實現純文字和帶圖標的按鈕的注意事項有哪些，下面就是實戰案例，一起來看一下。
      本文總結一下一些基礎頁面元素的實現方式，后續陸續更新。首先我們遇到最多的可能是按鈕的切圖，按鈕可能有很多種外觀，但是一般可分為純文字的和帶圖標的按鈕，下面就來說說這兩種按鈕的實現方法。
      </pre><pre name="code" class="html"><!DOCTYPE html>     
<html lang="zh-CN">     
<head>     
  <title>按鈕寫法</title>     
  <meta charset="UTF-8">     
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">     
  <link rel="stylesheet" href="css/style.css">     
<style type="text/css">     
  a:hover{text-decoration: none;}     
  .btn{     
    display: inline-block;     
    margin-top: 10px;     
    padding: 10px 24px;     
    border-radius: 4px;     
    background-color: #63b7ff;     
    color: #fff;     
    cursor: pointer;     
  }     
  .btn:hover{     
    background-color: #99c6ff;     
  }     
  .inbtn{     
    border: none;     
  }     
  .bubtn{     
    border: none;     
  }     
  .btn{     
    font-style: normal;     
  }     
  .bgbtn span{     
    margin-left: 10px;     
    padding-left: 20px;     
    background: url(images/edit.png) left center no-repeat;     
  }     
  .bgbtn02 img{     
    margin-bottom: -3px;     
    margin-right: 10px;     
  }     
</style>     
</head>     
<body>     
<!--<a>標簽按鈕-->     
<a href="" class="btn">a標簽按鈕</a>     
<!--<input>標簽按鈕-->     
<input class="inbtn btn" type="button" value="input標簽按鈕"/>     
<!--<button>標簽按鈕-->     
<button class="bubtn btn">button標簽按鈕</button>     
<!--任意標簽按鈕-->     
<i class="ibtn btn">i標簽按鈕</i>     
<!--帶背景圖標按鈕-->     
<a href="" class="bgbtn btn">     
  <span>帶圖標按鈕</span>     
</a>     
<a href="" class="bgbtn02 btn">     
  <img src="images/edit.png"/>帶圖標按鈕     
</a>     
</body>     
</html>
      相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
      相關閱讀：
      怎樣用HTML和CSS做出大白
      XHTML中有哪些常用的標簽
      在HTML中水平線標注與代碼注釋應該如何使用
      以上就是Html+css怎樣實現純文字和帶圖標的按鈕的詳細內容，更多請關注php中文網其它相關文章！
      				
				
      網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




              
              
                 
              
                                            
                              		       
                          
                           		  
        
                            
      
日韩精品一区二区三区高清