zoukankan      html  css  js  c++  java
  • CSS绿色小矩形水平导航菜单

    演示效果截图

     CSS绿色小矩形水平导航菜单

    用到的图片

     

    CSS代码

    /* CSS Document */
    *{
    	margin:0;
    	padding:0;
    }
    #menu{
    	90%;
    	margin:25px auto;
    }
    #menu ul{
    	list-style:none;
    }
    #menu li{
    	display:block;
    	float:left;
    }
    #menu li a{
    	background:#749b10 url(menu_bg.gif) repeat-x;
    	border:2px solid #80a225;
    	margin:0 1px;
    	padding:15px 15px 15px 15px;
    	display:block;
    	float:left;
    	color:#fff;
    	text-transform:uppercase;
    	text-decoration:none;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:13px;
    	font-weight:bold;
    	height: 50px;
    }
    #menu li a span{
    	color:#52651f;
    	font-size:10px;
    	text-transform:lowercase;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-weight:normal;
    }
    #menu li a:hover{
    	background:#e46825 url(menu_hover.gif) repeat-x;
    	border:2px solid #c04118;
    	text-decoration:none;
    }
    #menu li a:hover span{
    	color:#ffd9c7;
    }
    .current{
    	background:#e46825 url(menu_hover.gif) repeat-x;
    	border:2px solid #c04118;
    	margin:0 1px;
    	padding:15px 15px 15px 15px;
    	display:block;
    	float:left;
    	color:#fff;
    	text-transform:uppercase;
    	text-decoration:none;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:13px;
    	cursor:pointer;
    	font-weight:bold;
    	height: 50px;
    }
    .current span{
    	color:#ffd9c7;
    	font-size:10px;
    	text-transform:lowercase;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-weight:normal;
    }

    HTML代码

    <div id="menu">
    <ul>
    <li class="current">www.865171.cn
    <br /><span>takes you to<br /> home page</span></li>
    <li><a href="http://www.865171.cn">www.865171.cn
    <br /><span>takes you to<br />about us page</span></a></li>		
    <li><a href="http://www.865171.cn">www.865171.cn
    <br /><span>takes you to<br />products page</span></a></li>
    </ul>
    </div>
  • 相关阅读:
    DRF小结
    js中BOM与DOM的概念与区别
    css单位分析、颜色设置与调色板
    css中伪类与伪元素的区别
    flexbox与grid layout的区别
    grid的简单使用
    position属性的总结
    html,css
    homework
    aboutme and my goal
  • 原文地址:https://www.cnblogs.com/luluping/p/1542072.html
Copyright © 2011-2022 走看看