前端练习-京东导航条-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/reset.css"> <style> .box1{ width: 190px; height: 480px; background-color: #bfa; } .cate_menu{ overflow: hidden; padding: 10px 0; height: 450px; background-color: #fefefe; color: #2d2d2e; margin-top: 10px; } .cate_menu_item{ overflow: hidden; padding-left: 18px; height: 25px; /* 为了使子元素中的文字在父元素垂直居中，可使用line-weight = height 即可 */ line-height: 25px; } .cate_menu_lk{ font-size: 14px; color: #333; transition: color .2s ease; } .cate_menu_line{ padding: 0 2px; font-size: 12px; } .cate_menu_item:hover{ background-color: rgba(185, 183, 183, 0.671); } .cate_menu_lk:hover{ transition: color .2s ease; color: red; } .cate_menu_sp{ line-height: 25px; } </style> </head> <body> <!-- g给一个外部容器 nav(div) div(div) ul(li)皆可 --> <div class="box1"> <ul class="cate_menu"> <li class="cate_menu_item"> <a class="cate_menu_lk" target="_blank" href="">家用电器<a> </li> <li class="cate_menu_item"> <a class="cate_menu_lk" target="_blank" href="">手机<a> <span class="cate_menu_sp">/</span> <a class="cate_menu_lk" target="_blank" href="">运营商<a> <span>/</span> <a class="cate_menu_lk" target="_blank" href="">数码<a> </li> <li class="cate_menu_item"> <a class="cate_menu_lk" target="_blank" href="">电脑<a> <span>/</span> <a class="cate_menu_lk" target="_blank" href="">办公<a> </li> <li class="cate_menu_item"> <a class="cate_menu_lk" target="_blank" href="">家居<a> <span class="cate_menu_line">/</span> <a href=""><a> <span></span> <a href=""><a> <span></span> <a href=""><a> <span></span> <a href=""><a> <span></span> <a href=""><a> <span></span> <a href=""><a> <span></span> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> <li> <a href=""><a> <span></span> </li> </ul> </div> </body> </html>
posted on 2022-03-02 10:26 mercykillerannimal 阅读(25) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通