admin管理员组文章数量:1794759
html的侧边栏实现代码
html style="color:#2aa0ea" target=_blank class=infotextkey>代码如下（示例）：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>侧边栏下拉</title> <style type="text/css"> header{ width: 1220px; height: 65px; margin: 0px auto; border: #000000 1px solid; } footer{ width: 1220px; height: 65px; margin: 0px auto; border: #000000 1px solid; } ul,ol{ list-style-type: none; } .p1{ width: 1220px; height: 600px; } .p1 #main1{ width: 13%; height: 590px; margin: 5px auto; border: red solid 1px; position: absolute; left: 149px; } .p1:after{ content: ""; display: block; clear: both; } a{ text-decoration: none; color: #000000; } #main #main1{ font-weight: bold; color: #FFFFFF; background: #DDDDDD; line-height: 60px; } #main #main1 .p2{ display: none; width: 400px; height: 360px; border: #0000FF 1px solid; background: royalblue; color: white; font-size: 16px; line-height: 30px; } #main{ position: relative; } #main #main1 li:hover .p2{ display: block; right: -404px; top: 0; position: absolute; } </style> </head> <body> <header> </header> <section> <div id="main" class="p1"> <div id="main1"> <ul> <li><a href="#">导航1</a> <div class="p2"> <dl> <dt>导航1 <dd>lol</dd> <dd>qq飞车</dd> <dd>cf</dd> </dt> </dl> </div> </li> <li><a href="#">导航2</a> <div class="p2"> <dl> <dt>导航2 <dd>淘宝</dd> <dd>天猫</dd> <dd>京东</dd> </dt> </dl> </div> </li> <li><a href="#">导航3</a> <div class="p2"> <dl> <dt>导航3 <dd>食物</dd> <dd>衣服</dd> <dd>家具</dd> </dt> </dl> </div> </li> <li><a href="#">导航4</a> <div class="p2"> <dl> <dt>导航4 <dd>电脑</dd> <dd>鼠标</dd> <dd>键盘</dd> </dt> </dl> </div> </li> <li><a href="#">导航5</a> <div class="p2"> <dl> <dt>导航5 <dd>金属</dd> <dd>塑料</dd> <dd>合金</dd> </dt> </dl> </div> </li> </ul> </div> <div id="main2"> </div> <div id="main3"> </div> </div> </section> <footer> </footer> </body> </html>版权声明：本文标题：html的侧边栏实现代码 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686816050a106433.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论