CSS设置菜单的横竖转换

来源：互联网发布：php 在线直播编辑：程序博客网时间：2024/05/15 01:02

CSS设置菜单的横竖转换

导航条不仅仅可以是竖直排列，还可以在水平方向上显示，通过CSS可以实现导航条的横竖转换。

首先，建立HTML结构，菜单的各个项目列表使用<ul>表示，设置页面的背景颜色，接着设置项目列表<ul>的属性，将项目符号设置不显示，在<div>标记中设置字体。

<span style="font-size:24px;"><html>       <head>              <title>                     菜单的横竖转换              </title>              <style>                     <!--                     body{                     background-color:#ffdee0;              }                     #navigation{                     font-family:Arial;              }                     #navigationul{                     list-style-type:none;                     margin:0px;                     padding:0px;              }                     -->              </style>       </head>          <body>              <divid="navigation">                     <ul>                            <li><ahref="#">Home</a></li>                            <li><ahref="#">My Blog</a></li>                            <li><ahref="#">Friends</a></li>                            <li><ahref="#">Next Station</a></li>                            <li><ahref="#">Contact Me</a></li>                     </ul>              </div>       </body></html></span>

此时，是普通的项目列表，仅仅是取消了其中的项目符号。

设置<li>的float属性，使各个项目都水平显示，并且设置<a>的相关属性，代码如下：

<span style="font-size:24px;">#navigation li{                     float:left;              }                     #navigationli a{                     display:block;                     padding:3px6px 3px 6px;                     text-decotation:none;                     border:1pxsolid #711515;                     margin:2px;              }</span>

此时，通过设置<li>的浮动属性float之后，项目列表按水平方向排列到了一起。

最后，设置超链接<a>的伪类别属性，实现动态的菜单效果。

<span style="font-size:24px;"><html>       <head>              <title>                     菜单的横竖转换              </title>              <style>                     <!--                     body{                     background-color:#ffdee0;              }                     #navigation{                     font-family:Arial;              }                     #navigationul{                     list-style-type:none;                     margin:0px;                     padding:0px;              }                     #navigationli{                     float:left;              }                     #navigationli a{                     display:block;                     padding:3px6px 3px 6px;                     text-decotation:none;                     border:1pxsolid #711515;                     margin:2px;              }                     #navigationli a:link,#anvigation li a:visited{                     background-color:#c11136;                     color:#ffffff;              }                     #navigationli a:hover{                     background-color:#990020;                     color:#ffff00;              }                     -->              </style>       </head>          <body>              <divid="navigation">                     <ul>                            <li><ahref="#">Home</a></li>                            <li><ahref="#">My Blog</a></li>                            <li><ahref="#">Friends</a></li>                            <li><ahref="#">Next Station</a></li>                            <li><ahref="#">Contact Me</a></li>                     </ul>              </div>       </body></html></span>

注意，当没有设置<ul>标记，或者<ol>标记的宽度width属性时，当浏览器的宽度缩小，菜单会自动的换行，这是采用<table>标记制作菜单无法实现的，经常被加以灵活应用。

0 0