zoukankan      html  css  js  c++  java
  • CSS导航菜单—自适应水平菜单

      这一教材最主要是实现一个简单的水平菜单,效果如图1.1所示。这个菜单可以随着浏览器窗口宽度的变化而改变排列方式。当浏览器宽度不足以容纳所有菜单项的时候,会自动折行,如图1.1所示。

    1.1 自动适用水平菜单效果

    它的HTML代码依然是多次使用过的最基本HTML结构,如下所示。

    <div id="menu">

    <a href="#">Home</a>

    <a href="#">Contact Us</a>

    <a href="#">Web Dev</a>

    <a href="#">Web Design</a>

    <a href="#">Map</a>

    </div>

      接下来设置#menu容器。由于宽度自动水平适用,所以不用设置。代码如下:

    #menu {

           font-family:Arial, Helvetica, sans-serif;

           font-size:14px;

    下面对菜单项进行设置。代码如下:

    #menu a,#menu a:visited {

        display:block;

        float:left;

        color:#000;

        text-decoration:none;

        padding:5px;

        margin:5px;

        border-top:8px solid #9ab;

        border-bottom:8px solid #9ab;

        white-space:nowrap;

    }

    最后设置鼠标经过后的效果,代码如下:

    #menu a:hover{

        color:#F00;

        border-bottom:solid 8px #000;

        border-top:solid 8px #000;

    }

    此时在浏览器中的效果如图1.2所示。

                                          1.2  鼠标经过效果完成

    最后,如果读者慢慢地把窗口由宽变窄,会在某个位置出现图1.3所示左图这个效果,这并不是我们想要得效果,而解决办法是

    #menu a#menu avisited 的样式中曾加如下CSS规则:

    这条规则的含义是,单词在空白处不换行,这时效果就如图所示。

    1.3  禁止在菜单项内部折行

    至此,本例就完成了。

  • 相关阅读:
    PHP无限极分类
    MySQL批量插入测试数据
    MySQL常见面试知识点汇总
    小程序交易组件-自定义交易组件相关知识
    Matplotlib
    sklearn之计算回归模型的四大评价指标(explained_variance_score、mean_absolute_error、mean_squared_error、r2_score)
    pandas.core.frame.DataFrame 切片技巧
    Pyspider all 出现的坑
    mysql 问题
    爬虫遇到HTTP Error 403的问题
  • 原文地址:https://www.cnblogs.com/zfang/p/2209624.html
Copyright © 2011-2022 走看看