html+css实现页面顶部导航栏
生活随笔
收集整理的這篇文章主要介紹了
html+css实现页面顶部导航栏
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最終效果如下：
接下來，我將從html和css兩大部分，逐步為您講解制作過程
目錄
Html 實現布局
創建父欄目
創建子欄目
插入外部樣式表，為接下來的css編輯做準備
Css 實現樣式
排布文本，設置背景
交互效果的實現
實現子欄的隱藏與顯示
實現當鼠標移動到子欄時的視覺互動
Html 實現布局
創建父欄目
<body><ul id="ulfather"><!--創建父列--><li class="lifather"><h4>欄目一</h4></li><li class="lifather"><h4>欄目二</h4></li><li class="lifather"><h4>欄目三</h4></li><li class="lifather"><h4>欄目四</h4></li><li class="lifather"><h4>欄目五</h4></li></ul> </body>創建子欄目
因為有五個父欄目，每個父欄我都打算設置3個子欄；如果把全部五個欄目的代碼都貼上來，則太過冗長了。下面僅展示在“欄目一”創建子欄目的代碼
<li class="lifather"><h4>欄目一</h4><ul class="ulson"><!--創建子列--><li class="lison">子欄</li><li class="lison">子欄</li><li class="lison">子欄</li></ul> </li>插入外部樣式表，為接下來的css編輯做準備
這步操作的代碼我就不放了，因為每個人存放css文件的位置不同，如果不知道如何從外部插入樣式表，可以參考以下方法：
<head> <link rel="stylesheet" href="外部樣式表的位置"> </head>Css 實現樣式
排布文本，設置背景
*{margin: 0;/*清除外邊距*/padding: 0;/*清除內邊距*/list-style: none;/*刪除<li>標簽生成的點*/ } body{background-image: url('https://static.runoob.com/images/mix/gradient2.png');/*插入背景圖片*/background-repeat: repeat-x;/*讓背景圖僅在x軸重復*/display: flex;/*設置為彈性盒*/justify-content: center;/*導航欄居中*/ } #ulfather{display: flex;/*設置為彈性盒*/background-color: rgb(40, 44, 100);/*設置欄目背景為深紫色*/box-shadow: 2px 5px 15px rgba(0, 0, 0, .7);/*陰影效果*/border-radius: 5px;/*圓角效果*/width: 350px;/*導航欄寬度*/height: 30px;/*導航欄長度*/line-height: 30px;/*文字垂直居中*/ } .lifather{width: 70px;/*每個欄目占寬70像素，把350像素的導航欄5等分*/text-align: center;/*文字水平居中*/color: rgb(160, 160, 230);/*設置字體顏色為淺紫色*/ } .ulson{background-color: rgb(100, 100, 100, .5);/*設置子欄背景為半透明灰色*/border-radius: 0px 0px 5px 5px;/*圓角效果*/color: rgb(250, 250, 250);/*設置字體顏色為白色*/ }交互效果的實現
實現子欄的隱藏與顯示
隱藏：在.ulson中添加一行代碼即可
.ulson{background-color: rgb(100, 100, 100, .5);/*設置子欄背景為半透明灰色*/border-radius: 0px 0px 5px 5px;/*圓角效果*/color: rgb(250, 250, 250);/*設置字體顏色為白色*/display: none;/*初始狀態為隱藏*/ }顯示：當鼠標移動到欄目上時，顯示對應的子欄
.lifather:hover .ulson{display: block; }?
實現當鼠標移動到子欄時的視覺互動
當鼠標指向子欄時，子欄顏色變深
.lison:hover{background-color: rgba(0, 0, 0, .3); }總結
以上就是利用html和css實現頁面頂部導航欄的過程了，實際使用時，把文本適當修改，并插入鏈接即可實現完整的功能了。
總結
以上是生活随笔為你收集整理的html+css实现页面顶部导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2023最新软件测试面试题（带答案）
- 下一篇： 在这求1到5的阶乘和