纯CSS+Div 的标签实现代码

纯CSS+Div 的标签实现代码,需要的朋友可以参考下。

CSS内容:

复制代码
代码如下:

@charset "utf-8";
/* CSS Document */
/*
author:JiYun_Lai
date:2011/01/11
desc:纯CSS+Div 的标签
*/
/*舌签鼠标样式*/
.tongue a:visited, a:active, a:link
{
color:#666666;
text-decoration: none;
}
.tongue a:hover
{color:#FF3399;
text-decoration:blink;
}
/*主容器样式*/
/*200*300 px*/
.tongue_main{
width:198px;
height:298px;
font-size:12px;
border-color:#FFFF00;
border-style:solid;
border-width:1px;}
/*舌签容器样式*/
/*200*25 px*/
.tongue{
border-bottom-color:#FFFF33;
border-bottom-style:solid;
border-bottom-width:1px;
height:24px;
background:#BCA7B0;
}
/*主舌签样式 默认舌签样式*/
/*25 * 60 px */
.tongue_M_title{
width:55px;
float:left;
height:17px;
background-color:#FFFFFF;
margin:0px 2px 0px 0px ;
padding:5px 3px 0px ;;
border-bottom-color:#FFFFFF;
border-bottom-style:solid;
border-bottom-width:1px;
font-weight:600;}
/*副舌签样式*/
/*25 * 60 px */
.tongue_title{
width:55px;
float:left;
height:17px;
background-color:#EFEFEF;
margin:0px 2px 0px 0px ;
padding:5px 3px 0px ;}
/*舌签内容样式*/
/*198 * 273 px*/
.tongue_content{
background-color:#FFFFFF;
width:180px;
height:255px;
float:left;
padding:9px 9px;
}
.tongue_clear{ clear:both;}

Html 内容:

复制代码
代码如下:






纯CSS+Div 的标签





新闻中心
广东新闻
深圳新闻

新闻中心








效果:

  

以上就是纯CSS+Div 的标签实现代码的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS 教程