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  禁止在菜单项内部折行

    至此,本例就完成了。

  • 相关阅读:
    单元测试之block
    (转)CBCentralManager Class 的相关分析
    (转)iOS蓝牙调用的一般流程
    facebook pop 学习笔记
    GitHub 上值得关注学习的 iOS 开源项目
    关于block以及__bridge的一些笔记
    你的iOS静态库该减肥了
    iOS--消息推送后方法回调情况(简)
    UINavgation日常小bug-有兴趣的朋友可以看看
    UIDynamic(一)
  • 原文地址:https://www.cnblogs.com/zfang/p/2209624.html
Copyright © 2011-2022 走看看