请选择 进入手机版 | 继续访问电脑版

名廊网

 找回密码
 立即注册
QQ登录
搜索
热搜: 活动 交友 discuz
查看: 1493|回复: 2

CSS导航条实例:悬浮背景色效果

[复制链接]
  • TA的每日心情
    开心
    2016-5-19 00:19
  • 签到天数: 1 天

    [LV.1]初来乍到

    21

    主题

    24

    帖子

    253

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    253
    发表于 2016-3-3 18:39:26 | 显示全部楼层 |阅读模式

    可以看见鼠标放下去时,背景色变了。

    HTML代码:


    1. <div class="nav">
    2.         <ul>
    3.         <li><a href="http://www.zzarea.com">项目1</a></li>
    4.         <li><a href="#">项目2</a></li>
    5.         <li><a href="#">项目3</a></li>
    6.         <li><a href="#">项目4</a></li>
    7.         <li><a href="#">项目5</a></li>
    8.         <li><a href="http://bbs.zzarea.com">项目6</a></li>
    9.         <li><a href="#">项目7</a></li>
    10.         </ul>
    11.         </div>
    复制代码

    CSS代码:



    1. <style type="text/css">
    2.         *{
    3.         margin:0px;
    4.         padding:0px;
    5.         }
    6.         body{
    7.         font-size:14px;
    8.         font-family:"微软雅黑";
    9.         }
    10.         .nav{
    11.         width:1000px;
    12.         margin:30px auto 0px auto;
    13.         background-color:#0099FF;
    14.         height:40px;
    15.          
    16.         }
    17.         ul{
    18.         list-style:none;
    19.          
    20.         }
    21.         li{
    22.         float:left;
    23.         line-height:40px;
    24.         width:100px;
    25.         text-align:center;
    26.          
    27.         }
    28.         li a{
    29.         color:#FFFFFF;
    30.         text-decoration:none;
    31.         display:block; /*块状结构*/
    32.         width:100px;
    33.         height:40px;
    34.          
    35.          
    36.         }
    37.         li a:hover{
    38.         background-color:#000000;
    39.          
    40.         }
    41.          
    42.         </style>
    复制代码

    请注意红色地方,如果你直接在hover里写上背景颜色,只会把文字的背景变掉,而不会填充一定的宽高,所以直接用display:block 变成块状元素,再设置宽高,就搞定了。


    点评

    海!外直播 t.cn/RxBC0c2 禁闻视频 t.cn/RxkPOKp 倒的高官越来越多,一薄一厚难以满足大家胃口,都在翘首以盼下一只“大老虎”,大清只有一个和珅,而今遍地是和珅,个中何故?看这个就知道了..  发表于 2018-2-25 10:08

    相关帖子

    微信给打个赏呗
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|名廊网 ( 冀ICP备12024006号-2 )

    GMT+8, 2019-3-24 12:41 , Processed in 0.041708 second(s), 16 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表