博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
问题:关于贴友分类菜单的实现
阅读量:4286 次
发布时间:2019-05-27

本文共 1400 字,大约阅读时间需要 4 分钟。

来源:

贴友需求,实现图示菜单的分类

我对于这个问题的实现,不足之处,请求指正。

html:

1: 
2:     
3:         

所有分类

4:         
5:             

精美包包

6:             
    7:                 
  • 双肩包
  • 8:                 
  • 手提包
  • 9:                 
  • 女包
  • 10:                 
  • 男包
  • 11:             
    12:         
    13:         
    14:             

    时尚手表

    15:             
      16:                 
    • 充电器
    • 17:                 
    • 男表
    • 18:                 
    • 女表
    • 19:                 
    • 情侣表
    • 20:             
      21:         
      22:         
      23:             

      时尚化妆品

      24:             
        25:                 
      • 润肤霜
      • 26:                 
      • 面膜
      • 27:                 
      • 彩妆用品
      • 28:             
        29:         
        30:         
        31:             

        潮流卫衣

        32:             
          33:                 
        • 男士卫衣
        • 34:                 
        • 女士卫衣
        • 35:                 
        • 进口卫衣
        • 36:             
          37:         
          38:     
          39: 

          css:

          1: *
          2: {
          3:     margin: 0 auto;
          4: }
          5: .test
          6: {
          7:     width: 200px;
          8:     height: 350px;
          9:     border: 1px solid red;
          10: }
          11: h3
          12: {
          13:     background-color: #B90101;
          14:     padding: 5px;
          15:     color: white;
          16: }
          17: .fenlei
          18: {
          19:     border-bottom: 1px solid #ccc;
          20:     width: 190px;
          21:     margin-top: 5px;
          22:     margin-left: 5px;
          23:     float: left;
          24: }
          25: .fenlei ul
          26: {
          27:     position: relative;
          28:     margin-left: -30px;
          29:     float: left;
          30: }
          31: .fenlei li
          32: {
          33:     float: left;
          34:     text-align: left;
          35:     margin-left: 20px;
          36:     margin-top: 5px;
          37: }

          效果如图:

          演示地址:

          你可能感兴趣的文章
          JVM 内存模型
          查看>>
          iOS之苹果自带的json解析NSJSONSerialization(序列化)
          查看>>
          iOS中坐标转换
          查看>>
          java 基础二
          查看>>
          java基础(三)方法/数组/堆栈/
          查看>>
          java基础(四)二维数组/
          查看>>
          java基础(五)面向对象/类/对象/形式参数/局部和成员变量
          查看>>
          java基础(六)关键字/private/this/static/构造方法/
          查看>>
          java基础(七)/面向对像
          查看>>
          java基础(八)Math/代码块/继承成员方法指南的关系/继承中成员变量之间的关系/方法的重写/继承中构造方法之间的关系/this和super的区别
          查看>>
          iOS之AFNetWorking基本用法(一)上传、下载
          查看>>
          java基础(九)关键字final/多态/抽象类/关键字abstract/接口
          查看>>
          java中的错误集合
          查看>>
          java基础(十)形式参数和返回值/链式编程/包/权限修饰符/内部类
          查看>>
          C语言char *p 和 cha'r p[10]的区别/sizeof和strlen的区别
          查看>>
          PHP配置和基础知识
          查看>>
          PHP 基础一
          查看>>
          iOS 输出指定位数
          查看>>
          iOS 中的传值的方法
          查看>>
          PHP 基础二
          查看>>