序列表转换成横向菜单
如何把一个无序列表转换成横向菜单
首先建立一个无序列表
<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>
最终形成效果如图