91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS怎么實現滑動門效果

發布時間:2022-02-28 13:57:21 來源:億速云 閱讀:148 作者:小新 欄目:web開發

這篇文章主要為大家展示了“CSS怎么實現滑動門效果”,內容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領大家一起研究并學習一下“CSS怎么實現滑動門效果”這篇文章吧。

  滑動門效果的特點:

  (1)實用性:能夠根據導航條菜單文本的長度自動調節寬度

  (2)簡潔性:可以用簡單的背景圖片來制作好看的導航欄效果

  (3)適用性:可以多層套用

  案例分享

  仿京東首頁菜單導航欄滑動門

  我們可以通過給元素設置偽元素的方式來制作滑動門效果,當我們鼠標未在li上時采用dispaly:none隱藏菜單,當鼠標滑過時觸發hover事件此時的dispaly:block顯示菜單。這樣我們利用CSS代碼就可以將滑動門效果制作出來了

  <!DOCTYPEhtml>

  <html>

  <head>

  <metacharset="utf-8">

  <title></title>

  <style>

  *{

  padding:0;

  margin:0;

  list-style:none;

  text-decoration:none;

  }

  ul{

  padding:20px0px;

  width:200px;

  background:#fff;

  border:1pxsolid#ccc;

  position:relative;

  }

  ulli{

  height:40px;

  line-height:40px;

  padding-left:10px;

  }

  ulli:hover{

  background:#ccc;

  }

  ullia{

  color:#444;

  font-size:14px;

  }

  /*滑動門*/

  ul.div1,.div2,.div3{

  position:absolute;

  top:0;

  left:200px;

  display:none;

  }

  ulli:hover.div1{

  display:block;

  width:800px;

  opacity:1;

  }

  </style>

  </head>

  <body>

  <div>

  <ul>

  <li>

  <ahref="#">手機/運營商/數碼</a>

  <divclass="div1">

  </div>

  </li>

  <li>

  <ahref="#">電腦/辦公</a>

  <divclass="div2"></div>

  </li>

  <li>

  <ahref="#">家居/家具/家裝</a>

  <divclass="div3"></div>

  </li>

  <li>

  <ahref="#">男裝/女裝/童裝</a>

  <divclass="div3"></div>

  </li>

  </ul>

  </div>

  </body>

  </html>

以上是“CSS怎么實現滑動門效果”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

新建县| 德兴市| 连南| 阳东县| 古浪县| 鄂托克前旗| 贵定县| 巴里| 安化县| 穆棱市| 新巴尔虎左旗| 分宜县| 富裕县| 海淀区| 德昌县| 平阴县| 麦盖提县| 新田县| 当涂县| 景泰县| 福建省| 吴旗县| 石景山区| 慈利县| 尼木县| 黔西| 天长市| 黄石市| 武鸣县| 洛扎县| 云龙县| 千阳县| 高要市| 若羌县| 元谋县| 郴州市| 沂南县| 松阳县| 黔东| 贵港市| 柳江县|