商城左侧菜单栏网页模板
生活随笔
收集整理的這篇文章主要介紹了
商城左侧菜单栏网页模板
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
https://blog.csdn.net/hanhanwanghaha寶藏女孩 歡迎您的關(guān)注！
歡迎關(guān)注微信公眾號：寶藏女孩的成長日記
如有轉(zhuǎn)載，請注明出處（如不注明，盜者必究）
哈哈哈直接上代碼趴！
商城左側(cè)菜單欄網(wǎng)頁模板編輯如下：
<!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; /* 這個(gè)也就相當(dāng)于是權(quán)重的意思 */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="">網(wǎng)絡(luò)文學(xué)</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="">內(nèi)衣</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="">運(yùn)動</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>瀏覽如圖
涉及到一些基礎(chǔ)知識：
行內(nèi)元素和塊級元素的相互轉(zhuǎn)換：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寶藏女孩 歡迎您的關(guān)注！
歡迎關(guān)注微信公眾號：寶藏女孩的成長日記
如有轉(zhuǎn)載，請注明出處（如不注明，盜者必究）
總結(jié)
以上是生活随笔為你收集整理的商城左侧菜单栏网页模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在Python当中如何打印输出当前时间（
- 下一篇： 【文章】人的好运从哪里来？