PHP基础学习第十一篇（CSS垂直导航栏、水平导航栏、下拉菜单、提示工具）

一、垂直导航栏

1、它相较与简单的HTML菜单更加直观、美观并节省空间，简单来说，导航栏就是一个链接列表。

<ul>

        <li><a href="#home">主页</a></li>

        <li><a href="#news">新闻</a></li>

        <li><a href="contact">联系</a></li>

        <li><a href="about">关于</a></li>

</u>

2、去除不必要元素

list-style-type:none   -移除列表前小标志。

移除浏览器的默认设置将边距和填充设置为0。

ul{

        list-style-type:none;

        margin:0;

        padding:0;

}

3、范围可选

display:block   -显示块元素的链接，让整体变为可点击链接区域，不仅仅是文本。

a{

        display:block;

        width:60px;

}

4、全屏高度的固定垂直导航栏

ul{

        list-style-type:none;               <!--移除列表前小标志-->

        margin:0;

        padding:0;

        width:25%;

        background-color:#f1f1f1;

        height:100%;                     <!--全屏高度-->

        position:fixed;                        <!--固定定位-->

        overflow:auto;                     <!--如果导航栏选项过多，允许滚动-->

}

例子如下：