CSS设置菜单的横竖转换

最新推荐文章于 2024-05-24 17:17:32 发布

量变决定质变

最新推荐文章于 2024-05-24 17:17:32 发布

阅读量2.6k

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/53056200

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS设置菜单的横竖转换

CSS设置菜单的横竖转换导航条不仅仅可以是竖直排列，还可以在水平方向上显示，通过CSS可以实现导航条的横竖转换。首先，建立HTML结构，菜单的各个项目列表使用表示，设置页面的背景颜色，接着设置项目列表的属性，将项目符号设置不显示，在标记中设置字体。菜
复制链接

扫一扫

专栏目录