hujung hadapan web
tutorial css
Tutorial pengenalan reka letak halaman web CSS 10: Navigasi mendatar bertab dengan logo_Tutorial Asas semasa
Tutorial 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)!
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
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana cara memaparkan 'badan bulat jingnan mai' yang dipasang dengan betul di laman web?
Apr 05, 2025 pm 10:33 PM
Menggunakan fail font yang dipasang di laman web baru -baru ini, saya memuat turun fon percuma dari internet dan berjaya memasangnya ke dalam sistem saya. Sekarang ...
Bagaimana untuk memilih elemen kanak -kanak dengan item nama kelas pertama melalui CSS?
Apr 05, 2025 pm 11:24 PM
Apabila bilangan elemen tidak ditetapkan, bagaimana untuk memilih elemen anak pertama nama kelas yang ditentukan melalui CSS. Semasa memproses struktur HTML, anda sering menghadapi unsur yang berbeza ...
Adakah pengeluaran halaman H5 memerlukan penyelenggaraan berterusan?
Apr 05, 2025 pm 11:27 PM
Halaman H5 perlu dikekalkan secara berterusan, kerana faktor -faktor seperti kelemahan kod, keserasian pelayar, pengoptimuman prestasi, kemas kini keselamatan dan peningkatan pengalaman pengguna. Kaedah penyelenggaraan yang berkesan termasuk mewujudkan sistem ujian lengkap, menggunakan alat kawalan versi, kerap memantau prestasi halaman, mengumpul maklum balas pengguna dan merumuskan pelan penyelenggaraan.
Cara membuat bar kemajuan dengan h5
Apr 06, 2025 pm 12:09 PM
Buat bar kemajuan menggunakan HTML5 atau CSS: Buat bekas bar kemajuan. Tetapkan lebar bar kemajuan. Buat elemen dalaman bar kemajuan. Menetapkan lebar elemen dalaman bar kemajuan. Gunakan perpustakaan JavaScript, CSS, atau Progress Bar untuk memaparkan kemajuan.
Bagaimana untuk bersesuaian dengan peninggalan limpahan multi-line pada terminal mudah alih?
Apr 05, 2025 pm 10:36 PM
Isu keserasian limpahan berbilang baris pada terminal mudah alih yang ditinggalkan pada peranti yang berbeza apabila membangunkan aplikasi mudah alih menggunakan Vue 2.0, anda sering menghadapi keperluan untuk melimpah teks ...
Senario aplikasi apa yang sesuai untuk pengeluaran halaman H5
Apr 05, 2025 pm 11:36 PM
H5 (HTML5) sesuai untuk aplikasi ringan, seperti halaman kempen pemasaran, halaman paparan produk dan promosi korporat mikro. Kelebihannya terletak pada platformiti silang dan interaktiviti yang kaya, tetapi batasannya terletak pada interaksi dan animasi yang kompleks, akses sumber tempatan dan keupayaan luar talian.
Bagaimana cara menggunakan atribut CSS outside untuk mencapai kesan paparan teks secara beransur-ansur?
Apr 05, 2025 pm 10:54 PM
Melaksanakan kesan paparan secara beransur -ansur memendekkan teks dalam reka bentuk web, bagaimana untuk mencapai kesan paparan teks khas untuk menjadikan panjang teks secara beransur -ansur memendekkan? Kesan ini ...
Adakah pengeluaran halaman H5 adalah pembangunan front-end?
Apr 05, 2025 pm 11:42 PM
Ya, pengeluaran halaman H5 adalah kaedah pelaksanaan penting untuk pembangunan front-end, yang melibatkan teknologi teras seperti HTML, CSS dan JavaScript. Pemaju membina halaman H5 yang dinamik dan berkuasa dengan bijak menggabungkan teknologi ini, seperti menggunakan & lt; kanvas & gt; Tag untuk menarik grafik atau menggunakan JavaScript untuk mengawal tingkah laku interaksi.
