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

    至此,本例就完成了。

  • 相关阅读:
    mysql中的round函数的使用
    mysql中日期函数的处理,datediff()函数 与 timestampdiff()函数的区别 及使用。
    easyui datagrid 自定义editor
    好的产品 跟 好的 设计师 很类似
    music
    gd库复制图片做水印
    用gd库画矩形和椭圆
    默认安装wamp修改MySQL密码
    中文验证码
    验证码
  • 原文地址:https://www.cnblogs.com/zfang/p/2209624.html
Copyright © 2011-2022 走看看