热搜:NVER node 开发 php

css 列表问题_html/css_WEB-ITnose

2024-11-19 19:10:01
css 列表问题_html/css_WEB-ITnose


    


         <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的效果。点击查看 在线演示

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