ul和li 帶有邊框的方格程式碼
下面是一段由ul和li實現的方格效果,方格能夠合併邊框,並且滑鼠懸浮的時候會實現邊框變色效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> *{ margin:0; padding:0; } .box{ width:350px; height:500px; background:#999; padding-top:60px; padding-left:60px; } .box li{ float:left; list-style:none } .box li a{ border:5px solid #aaa; display:block; width:100px; height:60px; text-decoration:none; margin:0 0 -5px -5px; position:relative; z-index:0; text-align:center; line-height:60px; color:#fff; font-size:30px; } .box li a:hover{ border:5px solid #333; z-index:1; } </style> </head> <body> <ul class="box"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> <li><a href="#">8</a></li> <li><a href="#">9</a></li> <li><a href="#">10</a></li> <li><a href="#">11</a></li> <li><a href="#">12</a></li> <li><a href="#">13</a></li> <li><a href="#">14</a></li> <li><a href="#">15</a></li> </ul> </body> </html>
上述實現了表格效果,感興趣的朋友可以做一下參考。
相關文章
- 使用ul和li實現的帶有邊框的方格效果程式碼
- ul和li實現的新聞列表程式碼例項
- ul li實現的新聞列表程式碼例項
- jQuery結合ul和li實現的下拉選單例項程式碼jQuery單例
- ul、li列表簡單實用程式碼例項
- 使用ul li實現的文章列表效果程式碼例項
- 在ul的最後插入一個li元素程式碼例項
- ul最後插入li元素
- jQuery 移除ul下指定的li元素jQuery
- 影片直播原始碼,去掉Button自帶邊框原始碼
- 獲取ul元素下的所有li元素
- CSS的ul與li樣式學習CSS
- ul li實現的水平導航選單
- CSS虛線邊框效果程式碼CSS
- 文字嵌入邊框程式碼例項
- css多重邊框程式碼例項CSS
- 去掉ul li 的自定義格式的方法 的方法
- ul>li*3 實現翻書動畫效果動畫
- jquery選擇div下的ul下的li下的ajQuery
- CSS設定div邊框演示程式碼CSS
- css3半透明邊框程式碼CSSS3
- css內邊框效果程式碼例項CSS
- css邊框陰影程式碼例項CSS
- css半透明邊框程式碼例項CSS
- css條紋邊框程式碼例項CSS
- div虛線邊框程式碼例項
- CSS border-radius 帶邊框CSS
- CSS 寫個帶邊框背景色透明的訊息框CSS
- li浮動時ul高度為0,解決ul自適應高度的幾種方法
- 小程式中button的邊框無法去除 button邊框如何去除
- JS輸入框郵箱自動提示(帶有demo和原始碼)JS原始碼
- 搜尋框帶有搜尋提示點選消失程式碼例項
- 純CSS製作帶三角的邊框(氣泡框或者提示框)CSS
- 短視訊平臺原始碼,點選ul/li改變背景顏色原始碼
- CSS的秘密——背景和邊框(下)CSS
- css3實現的多重邊框程式碼例項CSSS3
- SVG設定邊框的透明度程式碼例項SVG
- css實現半透明邊框程式碼例項CSS