商城左侧菜单栏网页模板
生活随笔
收集整理的這篇文章主要介紹了
商城左侧菜单栏网页模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
哈哈哈直接上代碼趴！
商城左側菜單欄網頁模板編輯如下：
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}.wrapper{width: 1200px;height:500px;background-color: green;margin: 0 auto; /* 居中 */position: relative; /* 子絕父相 */}.rightbox{width: 1000px;height: 500px;background-color: slateblue;position: absolute;right: 0;top:0;}.leftbox{width: 200px;height: 500px;background-color: #eee;}.leftbox ul{list-style: none;}.leftbox ul li{height: 30px;line-height: 30px;}.leftbox a{text-decoration: none;color: #323232;}.leftbox{color:#323232;}.leftbox li p{width:180px;height: 30px;padding-left: 20px;}.leftbox li:hover p{width:180px;height: 30px;border: solid 1px blue;padding-left: 20px;border-right:0;position: relative;z-index: 2; /* 這個也就相當于是權重的意思 */background-color: #eee;}.submenu{width:998px;height:498px;background-color:#eee;border: solid 1px blue;position: absolute;top: 0;left: 200px;z-index: 1;display: none;}.leftbox li:hover div.submenu{display: block; /* 塊級元素 */}</style></head><body><div class="wrapper"><div class="leftbox"><ul><li><p><a href="">周杰倫</a>/<a href="">昆凌</a> </p><div class="submenu"><img src="img/J.jpg"/></div></li><li><p><a href="">電子書</a>/<a href="">網絡文學</a></p><div class="submenu"><img src="img/p2.png"/></div></li><li><p><a href=""></a>/<a href="">拍賣</a>/<a href="">電子書</a> </p><div class="submenu">333</div></li><li><p><a href="">服飾</a>/<a href="">內衣</a> </p><div class="submenu">4444</div></li><li><p><a href="">鞋靴</a>/<a href="">箱包</a> </p><div class="submenu">5555</div></li><li><p><a href="">運動</a>/<a href="">戶外</a> </p><div class="submenu">666</div></li><li><p><a href="">孕</a>/<a href="">嬰</a>/<a href="">童</a> </p><div class="submenu">7777</div></li><li><p><a href="">家居</a>/<a href="">家紡</a>/<a href="">汽車</a> </p><div class="submenu">8888</div></li></ul></div><div class="rightbox"></div></div></body> </html>瀏覽如圖
涉及到一些基礎知識：
行內元素和塊級元素的相互轉換：https://blog.csdn.net/hanhanwanghaha/article/details/108760461
CSS中z-index屬性：https://blog.csdn.net/hanhanwanghaha/article/details/108967318
子絕父相：https://blog.csdn.net/hanhanwanghaha/article/details/108961741
https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
總結
以上是生活随笔為你收集整理的商城左侧菜单栏网页模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Python当中如何打印输出当前时间（
- 下一篇： mysql中教如何拼接字段（列）值、加入