通過使用css可以輕松實現,代碼如下:
<style> *{ padding: 0; margin: 0; } div{ overflow: hidden; width: 160px; margin: 50px; } ul{ list-style: none; } li{ float: left; height: 100px; width: 50px; border-left:1px solid red; /*設置左邊框*/ border-bottom: 1px solid red; /*設置下邊框*/ margin-left: -1px; /*-1后在父容器下面了,所以看不到*/ margin-bottom: -1px; } </style> <div> <ul> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> <li>商品</li> </ul> </div>也可以不使用ul li 使用div也可以實現效果
進一步美化 實現如下邊框效果 使用偽類befor
新聞熱點
疑難解答