zoukankan      html  css  js  c++  java
  • 序列表转换成横向菜单

    如何把一个无序列表转换成横向菜单  

    首先建立一个无序列表

    <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;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;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>

    最终形成效果如图
    如何把一个无序列表转换成横向菜单 - 贝贝 - 大智若愚,内涵外敛
     
  • 相关阅读:
    ajax(ajax开发)
    gnuplot常用技巧
    Gunplot 命令大全
    程序员的绘图利器 — Gnuplot
    什么是 gnuplot
    QT正则表达式---针对IP地址
    JSP实现分页功能
    java.lang.OutOfMemoryError: Java heap space错误及处理办法
    getInitParameter()
    C/S软件的自动升级部署
  • 原文地址:https://www.cnblogs.com/di2wu/p/9401319.html
Copyright © 2011-2022 走看看