Rumah > hujung hadapan web > tutorial css > Penyelidikan mengenai Image Flip Menu Technology_CSS/HTML

Penyelidikan mengenai Image Flip Menu Technology_CSS/HTML

WBOY
Lepaskan: 2016-05-16 12:11:45
asal
1711 orang telah melayarinya

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).
    sumber:php.cn
    Kenyataan Laman Web ini
    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
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan