序列表转换成横向菜单
如何把一個無序列表轉換成橫向菜單??
首先建立一個無序列表<html> <body>
<div id='item'>
<ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul>
</div> </body> </html>
如圖： 其次當要橫向排列時，一般會把序列前的圓點去除<html> <style type='text/css'> #item ul{list-style:none;} </style> <body>
<div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul>
</div> </body> </html>
如圖： ? 接下來，把所有的序列由縱向排序變成橫向排序<html> <style type='text/css'> #item ul{list-style:none;}
#item li{float:left;} </style> <body>
<div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul>
</div> </body> </html>
如圖： 現在開始針對橫向菜單進行修飾， 1、先是調整各個選項卡的大小<html> <style type='text/css'> #item ul{list-style:none;} #item li{float:left;width:100px;} </style> <body> <div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul> </div> </body> </html>
如圖： 2、其次對每個子選項進行塊狀修飾<html> <style type='text/css'> #item ul{list-style:none;} #item li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;text-align:center} </style> <body> <div id='item'> <ul> ?<li>星期一</li> ?<li>星期二</li> ?<li>星期三</li> ?<li>星期四</li> ?<li>星期五</li> ?<li>星期六</li> ?<li>星期七</li> </ul> </div> </body> </html>
最終形成效果如圖 ?轉載于:https://www.cnblogs.com/di2wu/p/9401319.html
總結
以上是生活随笔為你收集整理的序列表转换成横向菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： TP框架(接口文档模板框架)
- 下一篇： CodeForces-589B（思维/排