masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > 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
Lepaskan： 2016-05-16 16:36:03
asal
2675 orang telah melayarinya

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.
Label berkaitan：
css html butang
sumber：php.cn
Artikel sebelumnya：Cara untuk menyediakan struktur navigasi mendatar dalam Html_HTML/Xhtml_Web pengeluaran halaman Artikel seterusnya：Analisis dan penyelesaian kepada sebab mengapa fail CSS yang dirujuk secara luaran oleh HTML tidak berkuat kuasa_HTML/Xhtml_Pengeluaran halaman web
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
Penukaran automatik PX kepada ralat REM  <style>html {   font-size: calc(100vw / 3.75);      }badan {    saiz fon: 0.16rem; ...
daripada 2024-04-16 09:34:16
0
0
4687
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Kaedah peringkat atas untuk menggantikan rentetan dengan kod HTML (dihasilkan daripada tatasusunan) Diberi rentetan seperti ini...$htmlPattern="Usernameis:#name#andusercompanyis#company...
daripada 2024-04-06 17:40:41
0
2
410
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan