二级菜单--竖排---HTML
生活随笔
收集整理的這篇文章主要介紹了
二级菜单--竖排---HTML
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
二級菜單–豎排
- 這是作為回顧之前學習的東西
- 大家也可以康康作為一種回顧
- 二級菜單 —豎 排
- 不足的地方請大家指出來
- 代碼照常 都有詳細解釋
效果圖
下面是css代碼
body{font-size: 14px;color: black;background-color: #ccc;font-family: Arial, Helvetica, sans-serif,"微軟雅黑";line-height: 1.5; } <!-- 這里是給整個網頁設置一些屬性 字體大小 背景顏色 字體顏色 還有字體 行高等 都設為全局的啦 --> a{color: #00a1d6;text-align: center; } <!-- 這里就是給全局的 a 標簽設置一些樣式 -->.main{width: 220px;border: 1px solid #eee;margin: 10px auto;box-sizing: border-box; } <!-- 上面是給那個主要的div設置樣式 定寬 設置邊框等 讓它居中等 -->.main ul li{border: 1px solid #eee;line-height: 50px;height: 50px;<!-- 這里就是居中的意思 行高和高度相等 -->background-color:#fff;position: relative;text-align: center;<!-- 文本居中 -->box-sizing: border-box; } .main ul li ul{display: none;<!-- 這里是隱藏的意思 -->position: absolute;left: 218px;top: -3px;width: 120px;height: 50px;border: 1px solid #ccc;box-sizing: border-box; }.main li:hover{background-color: #008c8c; }.main ul li:hover ul{display: block;border-right:none ; }<!-- 這是hover樣式 鼠標移上去的樣式 -->
- 這里是用來作為一個簡單的回顧 就沒有寫的特別詳細 有哪里不明白的話 都可以在 評論區講出來
- 重置代碼的話 在我另外一篇博客上 大家的要是不一樣的話 可以去看一下。
- 謝謝啦
總結
以上是生活随笔為你收集整理的二级菜单--竖排---HTML的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Request转发---应用
- 下一篇： HTML--猫眼电影---浮动练习