13 petua CSS praktikal untuk membantu anda meningkatkan kecekapan pembangunan bahagian hadapan!

Artikel ini menyusun dan berkongsi 13 teknik CSS yang mungkin berguna pada bahagian hadapan, termasuk mengubah suai gaya pemegang tempat input, limpahan teks berbilang baris, menyembunyikan bar skrol, mengubah suai warna kursor, dll. Saya harap ia akan membantu semua orang !

Ubah suai gaya pemegang tempat input, limpahan teks berbilang baris, sembunyikan bar skrol, ubah suai warna kursor, pemusatan mendatar dan menegak. Pemandangan yang biasa! Pembangun bahagian hadapan berurusan dengan mereka hampir setiap hari Artikel ini mengumpulkan 13 kemahiran CSS, mari kita semak mereka bersama-sama.

1. Selesaikan masalah jarak 5px dalam imej

Adakah anda sering menghadapi masalah jarak 5px tambahan di bahagian bawah imej? Jangan risau, ada 4 cara untuk menyelesaikannya. [Pembelajaran yang disyorkan: tutorial video css]

• Penyelesaian 1: Tukar elemen induk font-size:0px
• Penyelesaian 2: Tambah gaya img display:block
• Penyelesaian 3: Tambahkan gaya img pada vertical-align:bottom
• Penyelesaian 4: Tambahkan gaya elemen induk pada line-height:5px

2. Bagaimana untuk menjadikan ketinggian elemen sama dengan tetingkap

Dalam bahagian hadapan semasa, CSS mempunyai unit vh, tetapkan gaya ketinggian elemen kepada height:100vh

3. Ubah suai gaya ruang letak kotak input

Ini ialah atribut pemegang tempat kotak input. Cara mengubah suai gaya lalai adalah seperti berikut:

input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4. Menggunakan :not Pemilih

Semua kecuali elemen terakhir memerlukan sedikit penggayaan, yang sangat mudah dicapai menggunakan pemilih not.

Sebagai contoh, untuk melaksanakan senarai, elemen terakhir tidak perlu digariskan, seperti berikut:

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5. Gunakan caret-color untuk mengubah suai warna kursor

Kadangkala perlu mengubah suai warna kursor. Ia adalah masa warna karet.

.caret-color {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  /* 关键样式 */
  caret-color: #ffd476;
}

.caret-color::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}

6 Gunakan reka letak fleksibel untuk menyemat elemen dengan bijak ke bahagian bawah

Apabila kandungan tidak mencukupi, butang harus berada di bahagian bawah halaman. . Apabila kandungan mencukupi, butang harus mengikut kandungan. Apabila anda menghadapi masalah yang sama, anda boleh menggunakan flex untuk melaksanakan reka letak pintar!

<div class="container">
  <div class="main">这里为内容</div>
  <div class="footer">按钮</div>
</div>

Kod CSS adalah seperti berikut:

.container {
  height: 100vh;
  /* 关键样式 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  /* 关键样式 */
  flex: 1;
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.footer {
  padding: 15px 0;
  text-align: center;
  color: #ff9a9e;
  font-size: 14px;
}

7. lalai, jenis input ialah Anak panah kecil akan muncul di hujung type="number", tetapi kadangkala anda perlu mengalih keluarnya Anda boleh menggunakan gaya berikut:

type="number"8 🎜> untuk memadam baris status input

input {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  caret-color: #ffd476;
  display: block;
}

input::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}
/* 关键样式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

Apabila kotak input dipilih, akan ada garis status biru secara lalai, yang boleh dialih keluar menggunakan . outline:none

outline:none

body,html{
  -webkit-overflow-scrolling: touch;
}

11 Sesuaikan gaya teks yang dipilih

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* 基础样式 */
  border: solid 10px transparent;
}
/* 向下三角形 */
.triangle.bottom {
  border-top-color: #0097a7;
}
/* 向上三角形 */
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/* 向左三角形 */
.triangle.left {
  border-right-color: #00bcd4;
}
/* 向右三角形 */
.triangle.right {
  border-left-color: #009688;
}

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

untuk meletakkan halaman dalam mod kelabu user-select: none;

Satu baris kod akan meletakkan halaman dalam mod kelabu. filter:grayscale(1) (Belajar perkongsian video:

)

Atas ialah kandungan terperinci 13 petua CSS praktikal untuk membantu anda meningkatkan kecekapan pembangunan bahagian hadapan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!