Bagaimana untuk menulis kotak carian css

Cara melaksanakan kotak carian dalam css: mula-mula atur struktur halaman, kemudian gunakan ruang letak untuk menganotasi kotak teks, kemudian tetapkan semula jidar luar lalai dan jidar dalam halaman; tetapkan kotak carian Hanya gaya sempadan luar.

Persekitaran pengendalian artikel ini: sistem Windows 7, versi HTML5&&CSS3, komputer Dell G3.

Bagaimana untuk menulis kotak carian css?

Gunakan p css untuk mencapai kesan kotak carian seperti yang ditunjukkan dalam rajah:

Analisis:

1 Gunakan penanda untuk menganalisis lebar, tinggi, warna, dsb. imej asal, seperti yang ditunjukkan di bawah:

2.
Kotak carian Komponen utama: kotak teks input, butang butang dan simbol penunjuk segi tiga di sebelah kiri butang; struktur:

• Kotak teks, gunakan ruang letak untuk menganotasi kotak teks:

 

   <input>      SEARCH        <span></span>             

• Butang carian:

<input>

• Simbol penunjuk segi tiga: Daripada contoh gambar, simbol segi tiga ini disepadukan dengan butang, jadi kami pada mulanya memutuskan untuk menggunakannya sebagai elemen dalaman butang, menggunakan kedudukan untuk mencapai

<button>SEARCH</button>

• Reka bentuk gaya:

<button>SEARCH
  <span></span>
</button>

Mula-mula tetapkan semula jidar luar lalai dan jidar dalam halaman:

• Tetapkan gaya kelas borang:

    *{
        margin:auto;
        padding:0;
     }

Tetapkan gaya sempadan luar kotak carian, tetapkan ketelusan, alih keluar garis sempadan luar dan tetapkan sempadan radian:

 .form{
        width: 454px;
        height: 42px;
        background:rgba(0,0,0,.2);
        padding:15px;
        border:none;
        border-radius:5px;  
}

Tetapkan gaya kotak input input :

background:rgba(0,0,0,.2);
border:none;
border-radius:5px;

Arka sempadan juga boleh disingkatkan sebagai:

Tetapkan gaya fon:

input{
    width: 342px;
    height: 42px;
    background-color: #eeeeee;
    border:none;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    font-style:italic;
}

Terdapat nilai atribut lain:

    border-radius:5px 0 0 5px;

    style-style:italic

Gaya butang:

属性值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

Nota kedudukan relatif itu digunakan di sini:

digunakan untuk membantu menunjukkan Kedudukan segi tiga

button{
    width:112px;
    height: 42px;
    background-color:#d93c3c;
    color:#fff;
    border:none;
    border-radius:0 5px 5px 0;
    position: relative;
}

menunjukkan gaya segi tiga:

 position: relative;

Elemen ini menggunakan kedudukan mutlak, meletakkan koordinat ynya dari kanan ke kiri merujuk kepada sempadan 100% elemen Pada kedudukan, jika koordinat x tidak ditetapkan, ia lalai kepada 0:

Langkah-langkah untuk membuat simbol penunjuk segi tiga:

 .t{
    border-width:6px;
    border-style:solid;
    border-color: transparent #d93c3c transparent transparent;
    position: absolute;
    right:100%;
}

Tentukan elemen rentang segi tiga:

 position: absolute;
 right:100%;

• Buat jidar empat warna:

<span></span>

warna sempadan Empat nilai mewakili warna sempadan atas, kanan, bawah dan kiri secara bergilir-gilir.
• [Pembelajaran yang disyorkan:

tutorial video css

 .triangle {
    display: inline-block;
    border-width: 100px;
    border-style: solid;
    border-color: #000 #f00 #0f0 #00f;
}

]

Di mana-mana arah segi tiga yang anda perlukan, cuma tetapkan tiga segi tiga yang lain kepada lutsinar

Jangan gunakan span, gunakan pseudo-class untuk terus meletakkan segi tiga, padamkan elemen span dan gaya segi tiga, dan terus tambah sebelum pada gaya elemen butang Kod lengkap adalah seperti berikut:

Atas ialah kandungan terperinci Bagaimana untuk menulis kotak carian css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!