纵向导航css设置主要属性,CSS 导航
CSS 導(dǎo)航
GUI下有一個導(dǎo)航欄或?qū)Ш较到y(tǒng)，可幫助訪問者訪問信息。它是網(wǎng)頁上的UI元素，其中包含網(wǎng)站其他部分的鏈接。
導(dǎo)航欄通常以水平鏈接列表的形式顯示在頁面頂部。可以將其放置在徽標或標題的下方，但應(yīng)始終將其放置在網(wǎng)頁的主要內(nèi)容之前。
使用易于使用的導(dǎo)航對于網(wǎng)站很重要。它在網(wǎng)站中起著重要作用，因為它允許訪問者快速訪問任何部分。
讓我們詳細討論水平導(dǎo)航欄和垂直導(dǎo)航欄。
水平導(dǎo)航欄
水平導(dǎo)航欄是水平鏈接列表，通常位于頁面頂部。
讓我們看看如何使用創(chuàng)建水平導(dǎo)航欄。
示例
在此示例中，我們添加了
overflow:hidden屬性，以防止
li元素進入列表之外，而
display:block屬性將鏈接顯示為block元素，并使整個鏈接區(qū)域可單擊。
我們還添加了
float:left屬性，該屬性使用float來使塊元素彼此相鄰滑動。
如果要使用全角背景色，則必須將
background-color屬性添加
- 而不是
元素。
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
- Home ??
- Java
- HTML
- CSS
輸出：
邊界分隔線
我們可以使用
border-right屬性在導(dǎo)航欄中的鏈接之間添加邊框。以下示例對其進行了更清晰的說明。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
- Home ??
- Java
- HTML
- CSS
輸出：
固定的導(dǎo)航欄
滾動頁面時，固定的導(dǎo)航欄位于頁面的底部或頂部。參見相同的示例。
示例
ul {
list-style-type: none;
position: fixed;
width:100%;
top:0;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
- Home ??
- Java
- HTML
- CSS
Hello World
Scroll down the page to see the fixed navigation bar
輸出：
粘性導(dǎo)航
position:sticky;屬性用于根據(jù)用戶的滾動位置來定位元素。
此CSS屬性允許元素在滾動到達特定點時停留。根據(jù)滾動位置，粘性元素可在
固定和
相對屬性
之間切換。
例子
ul {
list-style-type: none;
position: sticky;
width:100%;
top:0;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
border-right: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
Example of sticky navigation bar
- Home ??
- Java
- HTML
- CSS
Hello World
Scroll down the page to see the sticky navigation bar
輸出：
下拉導(dǎo)航欄
下面的示例說明如何在導(dǎo)航欄中創(chuàng)建下拉菜單。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: lightgray;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: blue;
font-size:20px;
text-align: center;
padding: 10px 20px;
text-decoration: none;
}
.active{
background-color: gray;
color: white;
}
li a:hover , .dropdown:hover .dropbtn{
background-color: orange;
color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightblue;
min-width: 160px;
box-shadow: 5px 8px 10px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: gray;
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
h1,h2,h3{
text-align:center;
color: green;
}
- Home ??
- Java
- C
- C++
Web-designing
HTML
CSS
Bootstrap
Welcome to the lidihuo.com
Example of Dropdown Menu inside a Navigation Bar
Move your cursor on the "web-designing" to see the dropdown effect.
輸出：
垂直導(dǎo)航欄
在此示例中，我們將了解如何構(gòu)建垂直導(dǎo)航欄。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightblue;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 8px 16px;
text-decoration: none;
}
.active{
background-color: orange;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
Vertical Navigation Bar
- Home ??
- Java
- CSS
- HTML
- Bootstrap
輸出：
我們可以將鏈接對準中心并在它們之間添加邊框。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: lightblue;
border: 1px solid blue;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
ul:last-child {
border-bottom: none;
}
.active{
background-color: orange;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
Vertical Navigation Bar
- Home ??
- Java
- CSS
- HTML
- Bootstrap
輸出：
全高固定垂直導(dǎo)航欄
我們還可以使用屬性
height：100％;創(chuàng)建固定全高側(cè)面導(dǎo)航欄和
位置：固定；
示例
body{
background-color: pink;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
height:100%;
top:0;
width:150px;
overflow: auto;
background-color: lightblue;
border: 1px solid blue;
position: fixed;
}
li a {
display: block;
color: blue;
font-size:20px;
padding: 10px 20px;
text-decoration: none;
border-bottom: 1px solid blue;
}
.active{
background-color: orange;
color: white;
}
li a:hover {
background-color: orange;
color: white;
}
- Home
- Java
- CSS
- HTML
- Bootstrap
Welcome to the lidihuo.com
Side navigation bar with height: 100%; and position: fixed;
Scroll the page, and see how the sidenav sticks to the page
輸出：
總結(jié)
以上是生活随笔為你收集整理的纵向导航css设置主要属性,CSS 导航的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sql升级重启计算机失败win10,wi
- 下一篇： 负载均衡下ajax第二次请求,会话清除第