zoukankan      html  css  js  c++  java
  • 分享一个轻量级的简洁,清爽的Tab菜单

      平时项目用到菜单或者Tab,首先想到的是到网上找一个漂亮的插件来用,周末闲来无事,自己也写一个简洁,轻量的Tab菜单,分享如下:

    效果图:



    Common CSS部分:

     
           .nav{ list-style:none; 
    	    border-bottom:1px solid #11a3ff;
    		height:30px;
    	  	margin:0px;
    		padding-left:0px;
    		font-size:12px;
    		text-align:center;
    		}
    	.nav li{ float:left;
    	    border:1px solid #11a3ff;
    		80px; height:29px;
    		background:#a3dbff; margin:0px 4px 0px 0px;
     	}	
    	
    	.nav a:link,a:visited{
    		display:block;						/* 块元素 */
    		color:#006eb3;
    		text-decoration:none;
    		padding:8px 0px 8px 0px;
    	
    	}
    	
    	.nav a:hover{ background:#006eb3; color:#FFF; padding:8px 0px 8px 0px; }
    
    	.content{
    		border-left:1px solid #11a3ff;		/* 左边框 */
    		border-right:1px solid #11a3ff;		/* 右边框 */
    		border-bottom:1px solid #11a3ff;	/* 下边框 */	
    		
    	}
    

    HTML部分:

    <ul class="nav">
    	<li class="home"><a href="home.html">首页</a></li>
    	<li class="news"><a href="news.html">新闻</a></li>
        <li class="music"><a href="music.html">音乐</a></li>
    </ul>   
    <div class="content">
    	<span>
        	<a href="#"><img src="pic1.jpg" /></a><br/>
        	<a href="#"><center>追忆往事,展望未来</center></a>
        </span>
        <ul class="index"> 
    		<li><a href="#">[首页] 追忆往事,展望未来。新年寄语</a></li>
    		<li><a href="#">[新闻] 每年五一、十一长假,很多人不愿出门</a></li>
    		<li><a href="#">[新闻] 清华大学电子系研制成功新一代...</a></li>
    		<li><a href="#">[体育] 奥运火炬接力火热进行</a></li>
    		<li><a href="#">[音乐] 网民调查,你最喜欢的音乐类型</a></li>
    		<li><a href="#">[博客] 自由博客新版正式发布,网友...</a></li>
    	 
        </ul>
    </div>
    

    链接下载
  • 相关阅读:
    Ubuntu安装k8s
    SecureCRT连ubuntu
    硬盘安装ubuntu系统
    发布服务
    使用rancher2建k8s集群--个人学习记录
    spring boot 注解
    用STS构建spring boot
    使用js调用麦克风并录音
    全国省市区信息,mysql数据库记录
    ef core 3 migration
  • 原文地址:https://www.cnblogs.com/jackyfei/p/Tab.html
Copyright © 2011-2022 走看看