视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
css列表问题_html/css
2020-11-27 15:57:29 责编:小采
文档




<br /> 无需表格的菜单 <br />







  • Home

  • My Blog

  • Friends

  • Next Station

  • Contact Me



  • 怎么让运行结果如此图


    回复讨论(解决方案)

    已经是这样的效果了

    学习,接分。。

    不是 你仔细看 每个

  • 的下边框长度不一样

    不是 你仔细看 每个

  • 的下边框长度不一样


    还真没发现你说的问题


    不是 你仔细看 每个

  • 的下边框长度不一样


    还真没发现你说的问题


    这段代码结果是: 而我想让结果是: 就那几个
  • 下面的边框线长度不一样


    浏览器问题,把border-bottom-width的值设大点效果更明显


    浏览器问题,把border-bottom-width的值设大点效果更明显


    那个我设置过 但太粗了 我想要的不是那个效果 我还有套代码 能实现我说的那个效果

    无需表格的菜单






  • Home

  • My Blog

  • Friends

  • Next Station

  • Contact Me





  • 但我不知道之前发的那套为啥达不到此效果

    每个元素想一个盒子模型,你可以搜索一下。四边的border其实是有交叉的,所以每个border是一个梯形而不是长方形。这是导致你的第一个样式想过的原因,通过楼上的那个把border-bottom加大的例子就看得很清楚。网上有通过这种特性来制作纯css的三角形的例子。
    你的第二个样式,是通过设置外层li的border-bottom来避免内层a的padding给border带来的影响。
    另外可以试试通过设置ul的背景和li的margin实现border的效果。点击查看 在线演示

    但我不知道之前发的那套为啥达不到此效果

    下载本文
    显示全文
    专题