App下載

html橫向導航欄怎么做？橫向導航條代碼實例

猿友 2021-03-11 10:53:28 瀏覽數(shù) (24664)
反饋

有不少小伙伴在剛學習 html 的時候都會遇到這樣一個問題：html 橫向導航欄怎么做？今天W3Cschool小編就為大家分享一下簡單的橫向導航條代碼，相信會對大家有所幫助。

html 橫向導航欄一般用兩種方法來制作：第一種，我們使用塊狀結構結合行內(nèi)結構來制作。第二種，我們使用?float?屬性來制作。由于第一種比較常用，一下就以第一種方式來介紹。

首先大家要明確一下塊狀元素與行內(nèi)結構的不同之處：

（1）塊狀結構可以自定義寬、高、邊框、邊距等屬性，而行內(nèi)元素只支持對行高、邊距進行自定義，塊狀元素擁有的外邊距、上線邊距、邊框屬性行內(nèi)元素都沒有。

（2）塊狀結構不能與其他元素在同一行使用，而行內(nèi)元素支持在其他元素中嵌套使用。

橫向導航條代碼實例：

<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:140px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:15px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#e6e6e6;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">W3Cschool</a></li>
<li><a href="#news">入門教程</a></li>
<li><a href="#contact">編程課程</a></li>
<li><a href="#about">編程實戰(zhàn)</a></li>
</ul>
</body>
</html>

橫向導航欄效果圖 - w3cschool

以上就是本文的全部內(nèi)容了，今天和大家分享了 html 橫向導航欄怎么做，有興趣的朋友可以使用我們W3Cschool的 html在線編輯器進行調(diào)試非常方便！


HTML

0 人點贊