html怎么设置顶部导航栏,互联网常识：CSS+HTML如何实现顶部导航栏
本篇文章給大家介紹一下CSS+HTML實現頂部導航欄的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
導航欄的實現、固定頂部導航欄、二級菜單實現
效果圖：
最近在使用這個導航欄的時候，發現頁面在放大和縮小的情況下，導航欄的布局和顯示都有些小問題，所以重新改了一下css部分的代碼，重新貼上來
新的代碼實現(優化布局)：
.top{
/* 設置寬度高度背景顏色 */
height: auto; /*高度改為自動高度*/
width:100%;
margin-left: 0;
background:rgb(189, 181, 181);
position: fixed; /*固定在頂部*/
top: 0;/*離頂部的距離為0*/
margin-bottom: 5px;
}
.top ul{
/* 清除ul標簽的默認樣式 */
width: auto;/*寬度也改為自動*/
list-style-type: none;
white-space:nowrap;
overflow: hidden;
margin-left: 5%;
/* margin-top: 0; */
padding: 0;
}
.top li {
float:left; /* 使li內容橫向浮動，即橫向排列 */
margin-right:2%; /* 兩個li之間的距離*/
position: relative;
overflow: hidden;
}
.top li a{
/* 設置鏈接內容顯示的格式*/
display: block; /* 把鏈接顯示為塊元素可使整個鏈接區域可點擊 */
color:white;
text-align: center;
padding: 3px;
overflow: hidden;
text-decoration: none; /* 去除下劃線 */
}
.top li a:hover{
/* 鼠標選中時背景變為黑色 */
background-color: #111;
}
.top ul li ul{
/* 設置二級菜單 */
margin-left: -0.2px;
background:rgb(189, 181, 181);
position: relative;
display: none; /* 默認隱藏二級菜單的內容 */
}
.top ul li ul li{
/* 二級菜單li內容的顯示 */
float:none;
text-align: center;
}
.top ul li:hover ul{
/* 鼠標選中二級菜單內容時 */
display: block;
}
body{
background:#eff3f5;
}
- 一級菜單
- 一級菜單
- 一級菜單
- 一級菜單
- 一級菜單
一級菜單
- 二級菜單
- 二級菜單
下面的原來的代碼實現(頁面放大縮小的時候導航版排版有問題)：
.top{
/* 設置寬度高度背景顏色 */
height: 50px;
width:100%;
background:rgb(189, 181, 181);
position: fixed; /*固定在頂部*/
top: 0;/*離頂部的距離為0*/
}
.top ul{
/* 清除ul標簽的默認樣式 */
width: 80%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.top li {
float:left; /* 使li內容橫向浮動，即橫向排列 */
margin-right:50px; /* 兩個li之間的距離*/
}
.top li a{
/* 設置鏈接內容顯示的格式*/
display: block; /* 把鏈接顯示為塊元素可使整個鏈接區域可點擊 */
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none; /* 去除下劃線 */
}
.top li a:hover{
/* 鼠標選中時背景變為黑色 */
background-color: #111;
}
.top ul li ul{
/* 設置二級菜單 */
width: auto;
background:rgb(189, 181, 181);
position: absolute;
display: none; /* 默認隱藏二級菜單的內容 */
}
.top ul li ul li{
/* 二級菜單li內容的顯示 */
margin-right:0;
float:none;
text-align: center;
}
.top ul li:hover ul{
/* 鼠標選中二級菜單內容時 */
display: block;
}
- 一級菜單
- 一級菜單
- 一集菜單
- 一級菜單
- 一級菜單
一級菜單
- 二級菜單
- 二級菜單
總結
以上是生活随笔為你收集整理的html怎么设置顶部导航栏,互联网常识：CSS+HTML如何实现顶部导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 镜面反射原理以及实现
- 下一篇： 前端性能优化之浏览器渲染原理和关键渲染路