hujung hadapan webtutorial cssTutorial pengenalan reka letak halaman web CSS 10: Navigasi mendatar bertab dengan logo_Tutorial Asas semasa
Logo semasa bermakna pengguna mengklik pada saluran atau lajur dan label lajur memaparkan warna yang berbeza daripada label lain untuk mengingatkan pengguna tentang lokasi.
Reka bentuk ini adalah cara yang sangat mudah dan klasik untuk meningkatkan kebolehgunaan tapak web dalam reka bentuk tapak web. Apabila laman web digunakan oleh pengguna, ia harus mengambil kira proses pemikiran pengguna semasa menyemak imbas Reka bentuk web yang buruk hanya mengambil kira halaman itu sendiri tanpa mengambil kira pengalaman pengguna Pengenalpastian saluran selalunya sesuatu yang perlu diketepikan oleh ramai pengguna di mana mereka berada dan ke mana lagi mereka boleh pergi Dengan mengenal pasti lokasi semasa, ia membantu pengguna memahami kedudukan mereka dalam tapak web dan membimbing mereka.
Teruskan menulis daripada kod dalam artikel sebelumnya Untuk membolehkan saluran menjadi saluran semasa, saluran ini mesti mempunyai warna latar belakang atau teks yang berbeza daripada saluran lain, tetapi pada masa ini kami menyasarkan semua teg Latar belakang. tetapan bersatu, jadi tugas pertama adalah untuk mereka bentuk pengecualian, iaitu saluran semasa, saluran istimewa sedemikian, kami membuat beberapa pengubahsuaian pada tag dalam HTML:
<ul id="nav">
<li id="current"><a href="/index.asp">主页</a></li>
<li><a href="/Sort/List_4.html">DIV+CSS教程</a></li>
<li><a href="/Sort/List_5.html">常用代码</a></li>
<li><a href="/Sort/List_6.html">水晶图标</a></li>
<li><a href="/Sort/List_7.html">幻灯图片</a></li>
<li><a href="/Sort/List_10.html">软件下载</a></li>
<li><a href="/css2/">CSS2.0实用手册</a></li>
</ul>Kami menambah yang pertama a tag Id baharu ditambahkan, bernama semasa Teruskan membaca bahagian css Mula-mula buat reka bentuk warna untuk arus id:
#nav li a#current { background-color:#2788da; color:#fff;}Pratonton warna latar belakang halaman utama. Berwarna
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>Teruskan perbaiki navigasi kami dan tambahkan garisan mendatar di bawah menu halaman
#nav { height:26px; border-bottom:2px solid #2788da;}Kami menetapkan ketinggian tag ul dan menambahkannya ke garisan pepejal 2px bawah , pratonton kesannya sekali lagi, ia serupa dengan navigasi tab yang kita bayangkan pada asalnya. . Parameternya merujuk kepada lebar 2px, gaya garisan pepejal tunggal dan nilai warna #2788da Dengan tetapan sedemikian, teg ul kami akan mempunyai sempadan bawah berwarna 2px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>
</body>
</html>Navigasi tab mudah diselesaikan melalui satu set reka bentuk css Setiap kali anda menukar halaman saluran, anda hanya perlu menukar id="semasa" Alih ke elemen di mana saluran semasa terletak untuk melengkapkan penukaran warna. Tidak perlu menulis atribut warna, dan jika anda perlu mengubah suainya, anda boleh mengubah suainya dengan mudah dalam CSS.
Berkenaan penggunaan pewarisan sifat CSS antara elemen dalam XHTML dalam contoh ini.
Apakah warisan? Pewarisan bermakna setiap elemen boleh mempunyai berbilang gaya Dalam keadaan biasa, ia mematuhi reka bentuk gaya paling luar.
Jika gaya lapisan dalam bercanggah dengan gaya lapisan luar, kesan gaya lapisan dalam akan dipaparkan.
Contoh ini turut bersentuhan dengan atribut baharu: list-style:none;
Secara lalai, borang senarai li dalam ul mempunyai titik di hadapannya, seperti yang anda boleh lihat daripada bab sebelumnya. Ayat ini bermaksud membuang titik lalai di hadapan.
Di atas ialah kandungan tutorial pengenalan reka letak halaman web CSS 10: Navigasi mendatar yang dilabelkan dengan logo_Tutorial Asas semasa Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!
Bagaimana kami menandakan font Google dan mencipta goofonts.comApr 12, 2025 pm 12:02 PMGoofonts adalah projek sampingan yang ditandatangani oleh isteri pemaju dan suami pereka, kedua-duanya peminat besar tipografi. Kami telah menandakan Google
Artikel Web Dev yang tidak berkesudahanApr 12, 2025 am 11:44 AMPavithra Kodmad meminta orang ramai untuk membuat cadangan mengenai apa yang mereka fikir adalah beberapa artikel yang paling abadi mengenai pembangunan web yang telah mengubahnya
Perjanjian dengan elemen seksyenApr 12, 2025 am 11:39 AMDua artikel diterbitkan pada hari yang sama:
Amalkan pertanyaan GraphQL dengan keadaan API JavaScriptApr 12, 2025 am 11:33 AMBelajar bagaimana untuk membina API GraphQL boleh menjadi agak mencabar. Tetapi anda boleh belajar cara menggunakan API GraphQL dalam 10 minit! Dan ia berlaku saya ' ve mendapat yang sempurna
CMSS peringkat komponenApr 12, 2025 am 11:09 AMApabila komponen tinggal di persekitaran di mana pertanyaan data memisahkannya tinggal berdekatan, terdapat garis langsung yang cukup antara komponen visual dan
Tetapkan jenis pada bulatan ... dengan laluan mengimbangiApr 12, 2025 am 11:00 AMDi sini ' s beberapa CSS Trickery dari Yuanchuan. Terdapat CSS Property Offset-Path. Suatu ketika dahulu, ia dipanggil gerakan-jalan dan kemudian ia dinamakan semula. I
Apa yang 'kembali' lakukan dalam CSS?Apr 12, 2025 am 10:59 AMMiriam Suzanne menerangkan dalam video pemaju Mozilla mengenai subjek.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
