怎么使用css代码制作网站导航栏？（示例）-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

怎么使用css代码制作网站导航栏？（示例）

藏色散人

Aug 25, 2018 am 09:40 AM

本篇文章主要给大家介绍关于如何用css做导航栏的相关知识，希望对有需要的朋友有所帮助。对于任何一个网站来说，导航栏的存在是至关重要的，那么如果仅仅只是用html做出枯燥乏味的导航菜单，效果肯定是不佳的。这时css属性的重要性就体现出来了。

下面给大家列举出css导航代码的具体示例：

垂直导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css垂直导航代码示例</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
a
{
    display:block;
    width:60px;
    background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

以上效果如下图：

2.水平导航栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css水平导航栏代码示例</title> 
<style>
ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}
li
{
display:inline;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

效果如下图：

这里主要涉及到的重要知识：

display：其属性规定元素应该生成的框的类型。这个属性是用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

display:inline; -在默认情况下，25edfb22a4f469ecb59f1190150159c6元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。

那么以上就是针对在网页中css导航怎么做的这个问题进行了相关介绍，具有一定的参考价值。希望对大家有所帮助。

Atas ialah kandungan terperinci 怎么使用css代码制作网站导航栏？（示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Artikel Berkaitan

Draggin ' dan Droppin ' dalam ReactApr 17, 2025 am 11:52 AM

Ekosistem React menawarkan kita banyak perpustakaan yang semuanya memberi tumpuan kepada interaksi seret dan penurunan. Kami mempunyai React-Dnd, React-Beautiful-Dnd,

Perisian CepatApr 17, 2025 am 11:49 AM

Terdapat beberapa perkara yang saling berkaitan dengan perisian cepat sejak kebelakangan ini.

Kecerunan bersarang dengan klip latar belakangApr 17, 2025 am 11:47 AM

Saya tidak boleh mengatakan saya menggunakan klip latar belakang semua yang kerap. Saya ' Tetapi saya diingatkan dalam jawatan oleh Stefan Judis,

Menggunakan RequestAnimationFrame dengan cangkuk ReactApr 17, 2025 am 11:46 AM

Animasi dengan RequestAnimationFrame semestinya mudah, tetapi jika anda belum membaca dokumentasi React dengan teliti maka anda mungkin akan mengalami beberapa perkara

Perlu tatal ke bahagian atas halaman?Apr 17, 2025 am 11:45 AM

Mungkin cara paling mudah untuk menawarkan kepada pengguna adalah pautan yang mensasarkan ID pada elemen. Begitu seperti ...

API terbaik (graphql) adalah salah satu yang anda tulisApr 17, 2025 am 11:36 AM

Dengar, saya bukan pakar GraphQL tetapi saya suka bekerja dengannya. Cara ia mendedahkan data kepada saya sebagai pemaju front-end cukup sejuk. Ia seperti menu

Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruApr 17, 2025 am 11:26 AM

Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s

Pelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanApr 17, 2025 am 11:19 AM

Saya baru -baru ini melihat perubahan yang menarik pada Codepen: apabila melayang pena di laman web, ada persegi panjang dengan sudut bulat yang berkembang di belakang.

See all articles