首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 爱情文章 > 正文

    div css横向导航菜单 div+css实现仿猪八戒首页导航菜单效果

    时间：2020-05-08来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    本文实例讲述了div+css实现仿猪八戒首页导航菜单效果。分享给大家供大家参考。具体如下：

    这是一款仿猪八戒2010年首页的网页导航菜单，蓝色风格，非常漂亮大气、简洁专业，在此推荐给大家。菜单上有一个标记，指引当前的位置，也是本菜单的亮点。用CSS究竟是如何实现的呢？那么就请一起看代码吧。

    先来看看运行效果截图：

    div+css实现仿猪八戒首页导航菜单效果1

    具体代码如下：
    代码如下:

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
    /TR/xhtml1/DTD/xhtml1-transitional.dtd
    html xmlns=/1999/xhtml

    meta http-equiv=Content-Type content=text/html; charset=gb2312
    title仿2010猪八戒首页导航菜单/title
    style type=text/css
    !--
    body{font:12px 微软雅黑,Verdana,Tahoma;}
    *{padding:0px;margin:0px;}
    * li{list-style:none;}
    a{text-decoration:none;color:#20537A;}
    a:hover{text-decoration:underline;}
    .clearfix:after {
    content: 020
    display: block;
    height: 0;
    clear: both;
    }
    .clearfix {
    _zoom: 1;
    }
    *+html .clearfix {
    overflow:auto;
    }
    .menu_navcc{width:970px; margin:0 auto;}
    .menu_nav{width:970px;height:48px;background:url(images/nav_bg.gif) repeat-x;float:left;margin-top:18px;}
    .menu_nav .nav_content{padding-left:25px;background:url(images/nav_l_bg.gif) no-repeat;float:left;}
    .menu_nav .nav_content li{width:88px;height:48px;padding-left:15px;padding-right:13px;background:url(images/nav_li_right.gif) no-repeat right center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}
    .menu_nav .nav_content li a{color:#fff;width:88px;height:48px;display:block;}
    .menu_nav .nav_content li.current{line-height:37px;}
    .menu_nav .nav_content li em{background:url(images/bid_new.gif) no-repeat;width:35px;height:21px;display:inline-block;position:absolute;top:-20px;left:40px;}
    .menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:88px;height:37px;background:url(images/nav_li_current.gif) no-repeat;display:block;color:#fff;}
    .menu_nav .nav_content li a:hover{background:url(images/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}
    .menu_nav_right{padding-right:20px;background:url(images/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}
    p{margin-bottom:15px}
    --
    /style
    /head
    body style=text-align:center
    div style=height:100px;
    div style=clear:both
    !--nav,start--
    div class=menu_navcc
    div class=menu_nav clearfix
    ul class=nav_content
    li class=currenta href=# title=首页网站首页/span/a/li
    a href=# title=广告代码广告代码/span/a/li
    a href=# title=CSS教程CSS教程/span/a/li
    li style=position:relative;a href=# title=导航菜单导航菜单/span/aem/em/li
    a href=# title=源码素材源码素材/span/a/li
    a href=# title=常用代码常用代码/span/a/li

    div class=menu_nav_right



    !--nav,end--


    /body
    /html

    希望本文所述对大家的div+css程序设计有所帮助。

    • div css横向导航菜单 div+css实现仿猪八戒首页导航菜单效果 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文div css横向导航菜单 div+css实现仿猪八戒首页导航菜单效果由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.