cari

Rumah  >  Artikel  >  hujung hadapan web  >  Html css melaksanakan teks biasa dan butang dengan icons_HTML/Xhtml_Pengeluaran halaman web

Html css melaksanakan teks biasa dan butang dengan icons_HTML/Xhtml_Pengeluaran halaman web

WBOY
WBOYasal
2016-05-16 16:36:032655semak imbas

Artikel ini meringkaskan kaedah pelaksanaan beberapa elemen halaman asas dan akan dikemas kini pada masa hadapan. Pertama sekali, perkara yang paling biasa kita hadapi ialah keratan butang mungkin mempunyai banyak penampilan, tetapi ia boleh dibahagikan kepada butang teks biasa dan butang dengan ikon. Paparannya adalah seperti berikut:

Kod adalah seperti berikut:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. pra><pra nama="kod" kelas="html" >>     
  2. <html lang="zh- CN">     
  3. <kepala>     
  4.   <tajuk>按钮写法<><🎜 🎜>tajuk>     
    5.   
  5. <meta charset="UTF- 8">     
    6.   
  6. <meta http-equiv=" X-UA-Serasi" kandungan="IE=Edge,chrome=1">     
    7.   
  7. <pautan rel="stylesheet"  href="css/style.css">     
  8. <gaya taip="teks/ css">     
    9.   a: hover{text-decoration: none;}     
    10.   .btn{     
    11.     paparan: blok sebaris;     
    12.     margin atas: 10px;     
    13.     lapik: 10px 24px;     
    14.     jejari sempadan: 4px;     
    15.     warna latar belakang: #63b7ff;     
    16.     warna: #fff;     
    17.     kursor: penunjuk;     
    18.   }     
    19.   .btn:tuding{     
    20.     warna latar belakang: #99c6ff;     
    21.   }     
    22.   .inbtn{     
    23.     sempadan: tiada;     
    24.   }     
    25.   .bubtn{     
    26.     sempadan: tiada;     
    27.   }     
    28.   .btn{     
    29.     gaya fon: biasa;     
    30.   }     
  30.   .bgbtn span{     
  31.     margin-kiri: 10px;     
  32.     pelapis-kiri: 20px;     
  33.     latar belakang: url(images/edit.png) kiri tengah tiada ulangan;     
  34.   }     
  35.   .bgbtn02 img{     
  36.     margin-bawah: -3px;     
  37.     margin-kanan: 10px;     
  38.   }     
  39. gaya> 
  40. kepala> 
  41. <badan> 
  42.  
  43. <a href="" kelas="btn">butang labela> 
  44.  
  45. <input kelas="inbtn btn " taip="butang" nilai= "butang label input"/> 
  46.  
  47. <butang kelas="bubtn btn ">butang label butangbutang> 
  48.  
  49. <i kelas="ibtn btn ">butang teg ii> 
  50.  
  51. <a href="" kelas="bgbtn btn">
  52. <span>Butang dengan ikon span> 
  53. a> 
  54. <a href="" kelas="bgbtn02 btn">
  55. <img src="imej/ edit.png"/>Butang dengan ikon
  56. a> 
  57. badan> 
  58. html> 
Mengenai kelebihan dan kekurangan pelbagai tag, semua orang masih perlu memahaminya Jika anda mempunyai butang yang menarik untuk ditulis, kami akan melaksanakannya bersama.
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cara untuk menyediakan struktur navigasi mendatar dalam Html_HTML/Xhtml_Web pengeluaran halamanArtikel seterusnya：Cara untuk menyediakan struktur navigasi mendatar dalam Html_HTML/Xhtml_Web pengeluaran halaman

Artikel berkaitan

Lihat lagi