Contoh terperinci penggunaan css untuk mencantikkan kawalan borang html (pengindahan borang)_HTML/Xhtml_pengeluaran halaman web

1. Struktur sintaks asas bagi butang hantar html dan bawah

1. html butang hantar

Tetapkan jenis="serahkan" dalam teg input untuk menetapkan kawalan borang ini sebagai butang.

Serahkan kod butang:

2. Butang bawah html

Tetapkan jenis="bawah" dalam teg input untuk menetapkan kawalan borang ini sebagai butang.

Kod butang bawah:

2. Perbezaan antara butang hantar html dan bawah

type=button hanyalah fungsi butang

type=submit adalah untuk menghantar borang

Tetapi mereka yang terlibat dalam UI WEB harus ambil perhatian bahawa menggunakan serah boleh meningkatkan kebolehgunaan halaman:

Selepas menggunakan serah, halaman menyokong operasi kekunci masukkan papan kekunci, tetapi ramai pereka perisian WEB mungkin tidak menyedari bahawa penyerahan disatukan.

Selepas menggunakan butang, halaman selalunya tidak menyokong kekunci masukkan. Oleh itu, jika anda perlu menyokong kekunci masukkan, anda mesti menyediakan penyerahan Secara lalai, kekunci masukkan beroperasi pada penyerahan pertama pada halaman.

1, onclick="form1.action='a.jsp';form1.submit();" Ini merealisasikan fungsi hantar. < nama borang="form1" method="post" action="http://www.css.com">

< ;input type="button" name="Button" value="Button" onClick="javascript:windows.location.href="your url""> 3. HTML submit dan butang bawah mencantikkan reka letak css p

Pertama sekali, kami menyediakan imej butang untuk pengindahan butang, dan menambah gaya kelas pada penyerahan input atau kawalan butang bawah, tetapkan latar belakang butang kepada imej pengindahan, dan tetapkan jidar kepada sifar, lebar dan tinggi.

1. Cantikkan butang bawah html

Salin kod

butang按钮美化在线演示.com&🎜 >

http://www.css.com/"target="_blank">

onmouseout="this.style.backgroundPosition='lefttop'"/>

< /form>

bawah美化效果截图

2、对html serahkan按钮美化

1）、图片素材

可将图片另存为使用

按钮图片素材 鼠标右键另存为使用

2）、对应完整HTML源代码：

复制代码


复制代码


厜>

🎜



serahkan按钮美化 在线演示-www.css.com


html { lebar:100%; ketinggian:100%; }
badan { latar belakang:#fff; saiz fon:18px; font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";
line-height:18px; padding:0; margin:0; text-align:center; }
div { padding:18px }
img { border:0px; vertical-align:middle; padding:0px; margin:0px; }
input, butang { font-family:"Arial", "Tahoma", "微软雅黑", "雅黑"; sempadan:0;
vertical-align:middle; jidar:8px; ketinggian baris: 18px; saiz fon:18px }
.btns { width:143px; ketinggian:40px; background:url("bg11.jpg") tiada ulangan kiri atas; warna:#FFF; }

http://www.css. com/" target="_blank">