Rumah  >  Artikel  >  hujung hadapan web  >  Kemahiran CSS teratas dikeluarkan, anda mesti tahu div+css layout_Experience exchange

Kemahiran CSS teratas dikeluarkan, anda mesti tahu div+css layout_Experience exchange

PHP中文网
PHP中文网asal
2016-05-16 12:06:121400semak imbas

Kemahiran teratas CSS dikeluarkan, anda mesti tahu div+css layout_Experience exchange

Gunakan px untuk saiz fon

Isytihar CSS dalam satu baris
Bandingkan di bawah Dua:

h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} 
h2 { 
   font-size:18px; 
   border:1px solid blue; 
   color:#000; 
   background-color:#FFF; 
   }

Yang kedua memang kelihatan berformat, tetapi ia tidak membantu dalam membaca. Menulis dalam satu baris membolehkan anda mencari bahagian yang anda perlukan dengan lebih cepat.

Saya pernah menulis dengan cara yang serupa dengan kaedah kedua, tetapi secara beransur-ansur saya mendapati ia tidak begitu berguna seperti yang dikatakan artikel itu. Satu baris kelihatan segar, menjimatkan ruang dan menjadikan fail lebih kecil.

Menulis kod dalam blok
Menulis kod dengan cara ini boleh menjadikan CSS lebih seperti halaman, dan apabila masalah berlaku, masalah itu boleh ditemui dalam masa yang paling singkat. Seperti ini:

#content {float:left;} 
   #content p { … } 
#sidebar {float:left;} 
   #sidebar p { … } 
#footer {clear:both;} 
   #sidebar p { … }

Sokongan penyemak imbas
Hanya menyokong penyemak imbas terkini. Ini bermakna melepaskan IE5 dan IE5.5. Ini menjimatkan banyak masa. Untuk IE6, tidak perlu menggunakan model kotak Hack. Jika anda hanya menyasarkan pelayar popular, anda hanya memerlukan beberapa Hacks untuk mencapai kesan yang sama.

Saya memberi perhatian kepada CSS halaman utama baru NetEase, dan tiada !penting atau Hack di dalamnya, tetapi ia dipaparkan dengan sangat baik dalam FF dan IE. Penggunaan CSS yang munasabah boleh mengelakkan Hacks. Sudah tentu, penyahpepijatan akan mengambil lebih banyak masa.

Mengandungi unsur terapung
Semua kandungan dalam bekas hendaklah direka bentuk agar konsisten dengan bekas. Jika terlalu besar, ia akan meluncur ke kedudukan yang salah. Menggunakan jidar negatif untuk melaraskan di luar bekas juga akan menyebabkan gelongsor.

Memahami Limpahan
Jika terdapat dua elemen terapung pada halaman, mengeluarkan terlalu banyak kandungan dalam bekas kiri akan menyebabkan bekas kanan berjalan di bawahnya. Ini bermakna tetapan jidar, lebar atau padding anda tidak kemas, tetapi ia tidak akan ditunjukkan dalam FF. Gunakan overflow:hidden atau overflow:scroll untuk menghalang IE daripada membenarkan kandungan mengalir keluar dari bekas.

Benarkan elemen blok mengisi tempat kosong secara automatik

Singkatan CSS
Ramai orang menggunakan sekumpulan margin-atas, margin-kanan, margin-bawah dan margin-kiri. Malah, ini adalah yang paling asas Margin boleh disingkatkan terus sebagai margin: kanan atas nilai kiri bawah. Ringkasan singkatan CSS boleh dilihat di sini.
Elakkan pemilih yang tidak perlu
Kurangkan pemilih gaya kepada minimum. Jika anda mendapati diri anda menulis ul li {} atau table tr td{} secara berterusan, ia membuktikan bahawa anda menulis terlalu terperinci. Lebih sedikit pemilih memudahkan untuk mengesan masalah.

Saya tidak menterjemahkannya sepenuhnya, dan terdapat banyak perkataan saya sendiri di dalamnya, haha.

Di atas adalah keluaran kemahiran CSS teratas, susun atur div+css mesti tahu_pengalaman pertukaran kandungan, untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php. cn)!


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