ASCII码 ASCII码

关于无序列表的制作小案例

发布于：2022-05-10 12:06:12  栏目：技术文档

1、京东左侧分类导航

  1. .container{
  2.             width:220px;
  3.             height: 620px;
  4.             border:1px solid gray;
  5.         }
  6.         .cate_menu {
  7.             margin:10px auto;
  8.             list-style: none;
  9.         }
  10.         .cate_menu li{
  11.             font-size: 14px;
  12.             height:25px;
  13.             line-height: 25px;
  14.         }
  15.         .cate_menu li a {
  16.             text-decoration: none;
  17.             color: #000;
  18.         }
  19.         .cate_menu li:hover{
  20.             background-color: gray;
  21.             color:red;
  22.         }
  23.         .cate_menu li a:hover {
  24.             text-decoration: none;
  25.             color: red;
  26.         }
  1.     </style>
  2.     <body>
  3.     <div class="container">
  4.         <ul class="cate_menu">
  5.             <li>
  6.                 <a href="#">家用电器</a>
  7.             </li>
  8.             <li>
  9.                 <a href="#">手机</a>
  10.                 <span>/</span>
  11.                 <a href="#">运营商</a>
  12.                 <span>/</span>
  13.                 <a href="#">数码</a>
  14.             </li>
  15.             <li>
  16.                 <a href="#">电脑</a>
  17.                 <span>/</span>
  18.                 <a href="#">办公</a>
  19.             </li>
  20.             <li>
  21.                 <a href="#">家居</a>
  22.                 <span>/</span>
  23.                 <a href="#">家具</a>
  24.                 <span>/</span>
  25.                 <a href="#">家装</a>
  26.                 <span>/</span>
  27.                 <a href="#">厨具</a>
  28.             </li>
  29.             <li>
  30.                 <a href="#">男装</a>
  31.                 <span class="cate_menu_line">/</span>
  32.                 <a href="#">女装</a>
  33.                 <span class="cate_menu_line">/</span>
  34.                 <a href="#">童装</a>
  35.                 <span class="cate_menu_line">/</span>
  36.                 <a href="#">内衣</a>
  37.             </li>
  38.             <li>
  39.                 <a href="#">美妆</a>
  40.                 <span class="cate_menu_line">/</span>
  41.                 <a href="#">个护清洁</a>
  42.                 <span class="cate_menu_line">/</span>
  43.                 <a href="#">宠物</a>
  44.             </li>
  45.             <li>
  46.                 <a href="#">女鞋</a>
  47.                 <span class="cate_menu_line">/</span>
  48.                 <a href="#">箱包</a>
  49.                 <span class="cate_menu_line">/</span>
  50.                 <a href="#">钟表</a>
  51.                 <span class="cate_menu_line">/</span>
  52.                 <a href="#">珠宝</a>
  53.             </li>
  54.             <li>
  55.                 <a href="#">男鞋</a>
  56.                 <span class="cate_menu_line">/</span>
  57.                 <a href="#">运动</a>
  58.                 <span class="cate_menu_line">/</span>
  59.                 <a href="#">户外</a>
  60.             </li>
  61.             <li>
  62.                 <a href="#">房产</a>
  63.                 <span class="cate_menu_line">/</span>
  64.                 <a href="#">汽车</a>
  65.                 <span class="cate_menu_line">/</span>
  66.                 <a href="#">汽车用品</a>
  67.             </li>
  68.             <li>
  69.                 <a href="#">母婴</a>
  70.                 <span class="cate_menu_line">/</span>
  71.                 <a href="#">玩具乐器</a>
  72.             </li>
  73.             <li>
  74.                 <a href="#">食品</a>
  75.                 <span class="cate_menu_line">/</span>
  76.                 <a href="#">酒类</a>
  77.                 <span class="cate_menu_line">/</span>
  78.                 <a href="#">生鲜</a>
  79.                 <span class="cate_menu_line">/</span>
  80.                 <a href="#">特产</a>
  81.             </li>
  82.             <li>
  83.                 <a href="#">艺术</a>
  84.                 <span class="cate_menu_line">/</span>
  85.                 <a href="#">礼品鲜花</a>
  86.                 <span class="cate_menu_line">/</span>
  87.                 <a href="#">农资绿植</a>
  88.             </li>
  89.             <li>
  90.                 <a href="#">医药保健</a>
  91.                 <span class="cate_menu_line">/</span>
  92.                 <a href="#">计生情趣</a>
  93.             </li>
  94.             <li>
  95.                 <a href="#">图书</a>
  96.                 <span class="cate_menu_line">/</span>
  97.                 <a href="#">文娱</a>
  98.                 <span class="cate_menu_line">/</span>
  99.                 <a href="#">教育</a>
  100.                 <span class="cate_menu_line">/</span>
  101.                 <a href="#">电子书</a>
  102.             </li>
  103.             <li>
  104.                 <a href="#">机票</a>
  105.                 <span class="cate_menu_line">/</span>
  106.                 <a href="#">酒店</a>
  107.                 <span class="cate_menu_line">/</span>
  108.                 <a href="#">旅游</a>
  109.                 <span class="cate_menu_line">/</span>
  110.                 <a href="#">生活</a>
  111.             </li>
  112.             <li>
  113.                 <a href="#">理财</a>
  114.                 <span class="cate_menu_line">/</span>
  115.                 <a href="#">众筹</a>
  116.                 <span class="cate_menu_line">/</span>
  117.                 <a href="#">白条</a>
  118.                 <span class="cate_menu_line">/</span>
  119.                 <a href="#">保险</a>
  120.             </li>
  121.             <li>
  122.                 <a href="#">安装</a>
  123.                 <span>/</span>
  124.                 <a href="#">维修</a>
  125.                 <span>/</span>
  126.                 <a href="#">清洗</a>
  127.                 <span>/</span>
  128.                 <a href="#">二手</a>
  129.             </li>
  130.             <li>
  131.                 <a href="#">工业品</a>
  132.             </li>
  133.         </ul>
  134.     </div>
  135.     </body>
  136.     </html>

2、数字九宫格

  1. div{
  2.             width:101px;
  3.             height: 101px;
  4.             background-image: url("images/grid.jpg");
  5.         }
  6.         .one{
  7.             float:left;
  8.             background-position: -10px,-10px;
  9.         }
  10.         .two{
  11.             float:left;
  12.             background-position: -121px,-10px;
  13.         }
  14.         .three{
  15.             float:left;
  16.             background-position: -232px,-10px;
  17.         }
  18.         .four{
  19.             position: absolute;
  20.             background-position: -343px,-10px;
  21.             top:108px;
  22.             left:10px;
  23.         }
  24.         .five{
  25.             position: absolute;
  26.             background-position: -454px,-10px;
  27.             top:108px;
  28.             left:111px;
  29.         }
  30.         .six{
  31.              position: absolute;
  32.              background-position: -565px,-10px;
  33.              top:108px;
  34.              left:210px;
  35.          }
  36.         .seven{
  37.             position: absolute;
  38.             background-position: -676px,-10px;
  39.             top:208px;
  40.             left:10px;
  41.         }
  42.         .eight{
  43.             position: absolute;
  44.             background-position: -787px,-10px;
  45.             top:208px;
  46.             left:108px;
  47.         }
  48.         .nine{
  49.             position: absolute;
  50.             background-position: -898px,-10px;
  51.             top:208px;
  52.             left:212px;
  53.         }
  55. <body>
  56.         <div class="one"></div>
  57.         <div class="two"></div>
  58.         <div class="three"></div>
  59.         <div class="four"></div>
  60.         <div class="five"></div>
  61.         <div class="six"></div>
  62.         <div class="seven"></div>
  63.         <div class="eight"></div>
  64.         <div class="nine"></div>
  65.     </body>

3、学习猿地ul列表，主要考察ul的list-style-type可以用url来代替

  1. .container{
  2.             width:520px;
  3.             height:400px;
  4.             margin:0 auto;
  5.         }
  6.         h1 {
  7.             text-align: center;
  8.             color: deeppink;
  9.         }
  10.         .container ul{
  11.             list-style: inside url("images/aaaa.png");
  12.         }
  13.         .container ul li:first-child{
  14.             border-top: 2px solid #000;
  15.         }
  16.         .container ul li:not(li:nth-last-of-type(1)) {
  17.             padding-top:15px;
  18.             padding-bottom: 10px;
  19.             color: deeppink;
  20.             border-bottom: 1px solid darkgray;
  21.         }
  22.         .container ul li:nth-last-of-type(1){
  23.             padding-top:10px;
  24.             color: deeppink;
  25.         }
  26.         .container ul li a{
  27.             color:deeppink;
  28.             text-decoration: none;
  29.         }
  1. <body>
  2.     <div class="container">
  3.         <h1>学习猿地</h1>
  4.         <ul>
  5.             <li><a href="#">老师都是大型互联网公司总监级以上的职位，名校毕业，老司机</a></li>
  6.             <li><a href="#">老师都是大型互联网公司总监级以上的职位，名校毕业，老司机</a></li>
  7.             <li><a href="#">老师都是大型互联网公司总监级以上的职位，名校毕业，老司机</a></li>
  8.             <li><a href="#">老师都是大型互联网公司总监级以上的职位，名校毕业，老司机</a></li>
  9.             <li><a href="#">老师都是大型互联网公司总监级以上的职位，名校毕业，老司机</a></li>
  10.             <li><a href="#">老师都是大型互联网公司总监级以上的职位，名校毕业，老司机</a></li>
  11.             <li><a href="#">老师都是大型互联网公司总监级以上的职位，名校毕业，老司机</a></li>
  12.         </ul>
  13.     </div>
  14. </body>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行