search

博客列表 >使用html+css实现京东左侧分类菜单栏

使用html+css实现京东左侧分类菜单栏

世界上最好的语言是PHP
世界上最好的语言是PHP原创
2022年05月07日 10:14:17995浏览

一、京东原图

二、效果图

三、思路

  1. body背景色和div container中的背景色要有差异性。
  2. ul中leftmenu需要设置一下overflow:hidden，以免产生水平、纵向滚动行。
  3. a:hover中设置鼠标为pointer，覆盖上去后展示一只手状，并且标签文字颜色变红。
  4. li:hover中设置背景颜色为灰色，突出选区。

四、源代码（偷懒省略了后面一大段内容）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿京东菜单</title>
  6.     <style>
  7.         body{
  8.             background-color: #f4f4f4;
  9.         }
  10.         .container{
  11.           padding: 0;
  12.           margin: 0;
  13.         }
  14.         .leftmenu{
  15.             width: 190px;
  16.             height: 480px;
  17.             /*
  18.             border: 1px solid red;
  19.             */
  20.             overflow: hidden;
  21.             margin-top: 10px;
  22.             padding: 10px 0;
  23.             background-color: #FFFFFF;
  24.         }
  25.         .menuitem{
  26.             height: 25px;
  27.             line-height: 25px;
  28.             padding-left: 18px;
  29.             font-size: 14px;
  30.         }
  31.         li{
  32.             list-style: none;
  33.         }
  34.         li:hover{
  35.             background-color: #e3e4e5;
  36.         }
  37.         a{
  38.             text-decoration: none;
  39.             color: black;
  40.         }
  41.         a:hover{
  42.             cursor: pointer;
  43.             color: red;
  44.         }
  46.     </style>
  47. </head>
  48. <body>
  49.     <div class="container">
  50.         <ul class="leftmenu">
  51.             <li class="menuitem"><a href="http://jiadian.jd.com">家用电器</a></li>
  52.             <li class="menuitem">
  53.                 <a href="http://jiadian.jd.com">手机</a>
  54.                 <span>/</span>
  55.                 <a href="http://jiadian.jd.com">运营商</a>
  56.                 <span>/</span>
  57.                 <a href="http://jiadian.jd.com">数码</a>
  58.             </li>
  59.             <li class="menuitem">
  60.                 <a href="http://jiadian.jd.com">电脑</a>
  61.                 <span>/</span>
  62.                 <a href="http://jiadian.jd.com">办公</a>
  63.             </li>
  64.             <li class="menuitem">
  65.                 <a href="http://jiadian.jd.com">家居</a>
  66.                 <span>/</span>
  67.                 <a href="http://jiadian.jd.com">家具</a>
  68.                 <span>/</span>
  69.                 <a href="http://jiadian.jd.com">家装</a>
  70.                 <span>/</span>
  71.                 <a href="http://jiadian.jd.com">厨具</a>
  72.             </li>
  73.             <li class="menuitem">
  74.                 <a href="http://jiadian.jd.com">男装</a>
  75.                 <span>/</span>
  76.                 <a href="http://jiadian.jd.com">女装</a>
  77.                 <span>/</span>
  78.                 <a href="http://jiadian.jd.com">童装</a>
  79.                 <span>/</span>
  80.                 <a href="http://jiadian.jd.com">内衣</a>
  81.             </li>
  82.         </ul>
  83.     </div>
  84. </body>
  85. </html>
上一条：个人简历、CSS sprite、学习猿地、网站导航栏、京东左侧分类菜单栏下一条：使用html和css实现网站导航栏
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议