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

    菜单设计手绘_DIV+CSS实现的绿色水平一级菜单代码

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

    本文实例讲述了DIV+CSS实现的绿色水平一级菜单代码。分享给大家供大家参考。具体如下：

    这是一款基于DIV+CSS实现的绿色水平网站菜单，相信是你喜欢的一种CSS菜单，绿色风格，用到了几张背景图片，大家顺着路径把图片下载下来吧。这款菜单整体感觉效果不错，兼容性又好，不管是用在你的网站或是学习研究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绿色水平CSS菜单/title
    style
    body{font-size:12px;font-family:Arial,Helvetica,"宋体",sans-serif;color:#333;background:#fff;margin:0;}
    a:link{color:#0041D9;text-decoration:none;outline:none;}
    a:visited{color:#0041D9;text-decoration:none;outline:none;}
    a:hover{color:#f60;text-decoration:underline;outline:none;}
    a:active{color:#0041D9;text-decoration:none;outline:none;}
    #header{position:relative;width:100%;}
    div.bar{position:relative;height:42px;background:url(images/mainmenu.bg14_6x42.gif) repeat-x;}
    #header div.tabbar{width:900px;}
    #header .tabbar div.tabs{left:266px;position:absolute;top:41px;font-size:14px;font-weight:bold;}
    #header .tabbar .tabs a{float:left;width:80px;height:24px;line-height:24px;padding-top:7px;text-align:center;color:#000;font-weight:lighter;font-size:14px;background:transparent;}
    #header .tabbar .tabs a:hover{background:#fff url(images/nav_hover_80x31.gif) no-repeat;text-decoration:none;margin-left:-1px;padding-left:1px;}
    #header .tabbar .tabs a.actived{background:#fff url(images/nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;margin-left:-1px;padding-left:1px;}
    #header .tabbar .tabs a.actived:hover{background:#fff url(images/nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;text-decoration:underline;}
    #header .tabbar .bg{position:absolute;left:266px;top:41px;width:560px;height:31px;z-index:-1;}
    #header .tabbar .bg .nw{float:left;width:80px;height:31px;background:transparent url(images/navleft2_80x31.gif) no-repeat;}
    #header .tabbar .bg .cen{float:left;width:80px;height:31px;background:transparent url(images/navlcenter_80x31.gif) no-repeat;}
    #header .tabbar .bg .ne{float:left;width:80px;height:31px;background:transparent url(images/navright_80x31.gif) no-repeat;}
    #header .tabbar .float_icon{background:transparent url(images/new01_18x19.gif) no-repeat;font-size:0;height:19px;line-height:0;position:absolute;right:403px;text-indent:-999px;top:-4px;width:18px;}
    #header{z-index:20;min-width:970px;}
    #header div.banner{position:relative;height:72px;z-index:10;}
    div.bar{height:7px;background:url(images/mainmenu.bg11_6x7.gif) repeat-x;}
    /style
    /head

    div id=header
    div class=banner
    div class=tabbar
    div class=tabs
    div class=float_icon新
    a href=# title=首 页 class=actived style=margin-left:0;padding-left:0;首 页
    a href=# title=ASP源码ASP源码
    a href=# title=PHP源码PHP源码
    a href=# title=.NET源码.NET源码
    a href=# title=JSP源码JSP源码
    a href=# title=HTM源码HTM源码
    a href=# title=网页菜单网页菜单

    div class=bg
    div class=nw
    div class=cen
    div class=cen
    div class=cen
    div class=cen
    div class=cen
    div class=ne



    div class=bar

    /body
    /html

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

    • 菜单设计手绘_DIV+CSS实现的绿色水平一级菜单代码 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

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

    本文菜单设计手绘_DIV+CSS实现的绿色水平一级菜单代码由山茶花美文网整理提供，版权归原作者、原出处所有。

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