首頁 > web前端 > html教學 > css 列表问题_html/css_WEB-ITnose

css 列表问题_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:55:04
原創
961 人瀏覽過


    


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

                
  •  Home

  •             
  • My Blog

  •             
  • Friends

  •             
  • Next Station

  •             
  • Contact Me

  •         

    
    怎么让运行结果如此图 


回复讨论(解决方案)

已经是这样的效果了

学习,接分。。。

不是  你仔细看 每个

  • 的下边框长度不一样 

    不是  你仔细看 每个

  • 的下边框长度不一样 
    还真没发现你说的问题


    不是  你仔细看 每个

  • 的下边框长度不一样 
    还真没发现你说的问题
    这段代码结果是: 而我想让结果是: 就那几个
  • 下面的边框线长度不一样


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


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


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

    无需表格的菜单


       


        



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

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

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

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    最新問題
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板