個人如何在企業(yè)網(wǎng)站做實名認證網(wǎng)絡營銷的渠道有哪些
一、前言
實現(xiàn)功能:
????????這案例是一個具有動態(tài)效果的導航欄。導航欄的樣式設置了一個灰色的背景，并使用flex布局在水平方向上平均分配了四個選項。每個選項都是一個li元素，包含一個文本和一個橫向的下劃線。
????????當鼠標懸停在選項上時，選項的文本顏色會變?yōu)榉奂t色，并且下劃線會從中間向兩邊展開，呈現(xiàn)出一種動態(tài)的效果。
????????這種導航欄可以用于網(wǎng)頁或應用程序中，提供簡潔且有吸引力的導航選項。
實現(xiàn)邏輯：
- 創(chuàng)建一個導航欄容器div，并設置其類名設置為.nav。
- 在導航欄容器中創(chuàng)建四個選項，即li元素，每個選項包含一個文本和一個下劃線。
- 為每個選項設置樣式，包括設置寬度、高度、文本對齊方式、行高和相對定位。
- 為每個選項的下劃線i元素設置樣式，包括設置寬度為0%（初始狀態(tài)下不可見）、高度為3px、背景色、絕對定位和過渡效果。
- 當鼠標懸停在選項上時，為選項設置:hover偽類樣式，改變文本顏色為粉紅色。
- 當鼠標懸停在選項上時，為選項下劃線i元素設置:hover偽類樣式，將下劃線從中間向兩邊展開，即將left屬性設置為0，將寬度設置為100%。
- 設置過渡效果，使下劃線的展開效果具有動畫效果。
二、項目運行效果
三、全部代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>動態(tài)導航欄文字</title><style>*{padding: 0;margin: 0;list-style: none;}.nav{display: flex;width: 500px;height: 100px;margin: 100px auto;justify-content: space-around;align-items: center;background-color: rgb(205, 223, 248);border-radius: 10px;}.nav li{position: relative;width: 100px;height: 50px;text-align: center;line-height: 50px;transition:.5s all;cursor: pointer;}.nav li i{display:block; width: 0%;height: 3px;background-color: rgb(255, 0, 119);position: absolute;bottom: 0px;left: 50%;transition:.5s all;}.nav li:hover {color: rgb(255, 0, 119);letter-spacing: 4px;}.nav :hover i{left:0; width:100%;}</style>
</head>
<body><div class="nav"><li>1111<i></i></li><li>2222<i></i></li><li>3333<i></i></li><li>4444<i></i></li></div>
</body>
</html>四、答疑解惑
? ? ? ? 這是一個非常適合前端入門練習的小案例，各位小伙伴可以自行更改樣式和內容，如果大家運行時出現(xiàn)問題或代碼有什么不懂的地方都可以隨時評論留言或聯(lián)系博主QQ。
? ? ? ? 還多請各位小伙伴多多點贊支持，你們的支持是我最大的動力。
博主QQ：1196094293
謝謝各位的支持~~