Penyelidikan mengenai Image Flip Menu Technology_CSS/HTML

Fastcompany ialah kerja reka letak CSS+Div penuh oleh juruweb simplebits.com

Navigasi tapak web menggunakan selak imej CSS, ia mesti menggunakan a:link dan a:hover untuk dipaparkan imej yang berbeza dalam keadaan berbeza. Diperbuat daripada imej latar belakang saya rasa keunikan pengarang terletak pada a:hover dalam CSS...

#nav a:hover {background-position: 0 -20px;}
# nav a:active {background-position: 0 -40px;}




Imej latar belakang navigasi berada dalam tiga keadaan a:link, a: hover, dan a:active Daripada tiga gambar, gambar yang sama digunakan ~ kedudukan menegak latar belakang melalui CSS menjadikan butang berubah Ini menjimatkan keperluan untuk satu definisi gambar latar belakang setiap butang, menjimatkan banyak kod , mengurangkan bilangan gambar, dan memuat turun dengan lebih pantas , lebih mudah untuk diuruskan Butang

bukan sahaja imej latar belakang, tetapi juga mempunyai teks navigasi >Laman Utama

Gunakan css untuk menyembunyikan teks

#nav a {padding: 20px 0 0 0;overflow: hidden;}


Memandangkan ia tersembunyi, mengapa perlu bersusah payah Bagaimana dengan menulis teks Tujuannya adalah untuk dapat melihat pautan navigasi apabila menggunakan pelayar teks biasa (atau tidak merujuk mana-mana CSS).