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>

    最终形成效果如图
    如何把一个无序列表转换成横向菜单 - 贝贝 - 大智若愚,内涵外敛
     
  • 相关阅读:
    【2020-04-14】吃一折,长一智吧
    对“沟通成本”模型的一个重新假设
    【2020-04-13】稀缺才能让人珍惜
    【2020-04-12】决策都是当前认知的反映
    hhhhh我进步啦!
    求后序遍历(信息学奥赛一本通 1339)
    数的划分(信息学奥赛一本通 1304 洛谷 1025)
    memset函数怎么用嘞↓↓↓
    stack函数怎么用嘞?↓↓↓
    终于开通博客啦!
  • 原文地址:https://www.cnblogs.com/di2wu/p/9401319.html
Copyright © 2011-2022 走看看