• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏幻天博客吧
  • 欢迎来到铃音的私人博客! QQ群

[风格]哔哩哔哩清晰风格模板

兴趣 天空の铃音 5年前 (2015-01-06) 4038次浏览 已收录 1个评论 扫描二维码
文章目录[隐藏]

QQ 截图 20150106193902

前言

下面有演示自己看!很好看的哟!

演示

打开铃音的哔哩哔哩主页

代码

/*
设计者:osora 酱
优化、重开发:TG 桑
图片优化:铃音
*/




/*==================全局样式==================*/
/*头部图片*/
/*要替换头部图片请把下面的图片网址改为自己的图片网址*/
.header,.smallbox:after{
	background-image: url(http://ww2.sinaimg.cn/large/68f834efgw1eo010coeang20pu0el4qu.gif);
	background-size:620px 350px

}
/*整个页面*/
body {
        -ms-behavior: url(http://bcs.duapp.com/ttns-1/ie-css3.htc);
	background-image: url(http://ww4.sinaimg.cn/large/68f834efgw1eo00yhxgp6j21ik113e26.jpg);
        background-size:cover; 
	background-repeat:no-repeat;
        background-attachment:fixed;
	background-position:left top
	background-color: #E5E5E5;
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	z-index:0;
	font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
}
/*所有超链接*/
a{
	color:#FFF;
	text-decoration:none;
	padding-top:5px;
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
}
/*页面整体内容*/
.z{
	margin:0 auto;
	text-align:left; 
	width:900px; 
	position:relative;
}
/*顶部空间名称*/
.spname {
	background-color: #F5F5F5;
	position: fixed;
	height: 35px;
	width: 100%;
	top: 0px;
	padding-top: 9px;
	left: 0px;
	text-align: right;
	color: #999;
	z-index:9998;
}
.spname:before {
	content: "";
	position: fixed;
	background-image: url(data:image/png;base64,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);
	height: 31px;
	width: 88px;
	z-index:9999;
	left: 10px;
	top: 6px;
}
.spname:after {
	content: " ";
}

/*头部+顶部空间名*/
.header .spname{
	margin-top: 0px;
	font-size: 18px;
	font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
}
/*头部*/
.header {
	height: 350px;
	width: 620px;
	background-color: #666;
	margin-top: 44px;
	right: 0px;
	margin-left: 280px;
	z-index: 3;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	margin-bottom: 65px;
}
/*头像框架*/
.facebox{
	text-align:center;
	position: absolute;
	height: 350px;
	width: 280px;
	top: 44px;
	left: 0px;
	z-index: 2;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAA1JREFUGFdjYGBg8AUAAFIATrqmYLsAAAAASUVORK5CYII=);
	background-repeat: repeat;
}
/*头像*/
.facebox img {
	-webkit-border-radius: 86px;
	-moz-border-radius: 86px;
	height: 120px;
	width: 120px;
	margin-top: 50px;
	border:0px solid #eee;
	padding:0px;
	background-color: #FFF;
}
/*借用某框架的伪元素达到模糊头部背景*/
.smallbox:after {
	content: "";
	position: absolute;
	top: 44px;
	left: 0px;
	background-color: #333;
	height: 350px;
	width: 380px;
	-webkit-filter: blur(15px);
	-moz-filter: blur(15px);
	-o-filter: blur(15px);
	-ms-filter: blur(15px);
	filter: blur(15px);
	background-position: -175px;
	z-index: 1;
	clip: rect(0px,380px,380px,0px);
	overflow: hidden;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #E5E5E5;
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #E5E5E5;
}
/*用户信息框架*/
.s_box {
	padding: 0px;
	position: absolute;
	width: 280px;
	top: 240px;
	left: 0px;
	z-index: 2;
	color: #FFF;
	height: 154px;
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
}
/*用户名*/
.uname{
	font-weight: normal;
	font-size:18px;
	line-height:18px;
	color: #FFF;
	text-align:center;
	margin:0 0 5px 0;
}
/*认证用户*/
h4 img {
	position: absolute;
	top: 0px;
	right: 0px;
}
/*认证框*/
.verinfobox{
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	position: absolute;
	border: 0px solid #DDD;
	background: none;
	padding: 0px;
	margin-bottom: 5px;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	-webkit-border-radius: 0px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAA1JREFUGFdjYGBg8AUAAFIATrqmYLsAAAAASUVORK5CYII=);
	background-repeat: repeat;
	height: 50px;
	width: 280px;
	top: 104px;
}
.verinfobox b{
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	display: block;
	background: none;
	width: 280px;
	text-align: center;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	-webkit-border-radius: 0px;
	border: 0px solid white;
	margin-bottom:0px;
	font-weight: normal;
	color: #FF0;
	padding-top: 4px;
	padding-right: 0px;
	padding-bottom: 4px;
	padding-left: 0px;
}
.verinfobox p{
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	line-height:140%;
	color:#FFF;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 8px;
}
/*发消息+加关注框架*/
.s_link {
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	display:block;
	overflow:hidden;
	text-align: center;
	padding-left: 60px;
}
.s_link li{
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	float:left;
	width:60px;
	margin:2px;
	text-align:center;
	display:block;
	font-size:12px;
	overflow:hidden;
	color: #FFF;
}
/*发消息+加关注+回复留言 按钮*/
.button {
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-color: #BBB #BBB #999;
	border-style: solid;
	border-width: 0px;
	cursor: pointer;
	display: inline-block;
	margin: 0;
	overflow: hidden;
	padding: 8px;
	text-shadow: 0 0px #F0F0F0;
	color: #FFF!important;
	-moz-box-shadow: 0 0px 0 #f8f8f8;
	-wekbit-box-shadow: 0 0px 0 #f8f8f8;
	box-shadow: 0 0px 0 #f8f8f8;
	font-family: "Helvetica Neue", Arial, "Lucida Grande", Sans-serif;
	font-size: 12px;
	line-height: 15px;
	background-image: none;
	background-repeat: repeat;
	background-position: 0 0;
	background-color: #53A93F;
	font-weight: bold;
}
.button:hover{
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	background-color: #59B443;
	border-bottom-width: 2px;
	border-bottom-style: inset;
	border-bottom-color: #479135;
	padding-bottom: 6px;
}
.button.ok,.button.ok:hover{ background: #f5f5f5;
cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
border: 1px solid #EEE;}
.seedmsg {
}
.addfs {
}
/*等级积分*/
#s_info{
	padding:0px 0 0 0px;
	color:#FFF;
	border-top:0px dotted #ccc;
	margin-top:0px;
	text-align: center;
}
/*导航栏*/
.num {
	left: 0px;
	top: 394px;
	background-color: #FFF;
	width: 100%;
	height: 40px;
	z-index: 2;
	float:right;
	position:absolute;
	right:0px;
	text-align: center;
	padding-left: 225px;
	color: #999;
	padding-top: 5px;
}
/*导航栏-链接*/
.num a{
	font-family: "Helvetica Neue", Arial, "Lucida Grande", Sans-serif;
	float:left;
	display:block;
	overflow:hidden;
	font-size: 14px;
	margin-right: 15px;
	margin-left: 15px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 12px;
	padding-left: 0px;
	color: #999;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	/*动画*/
	transition:0.2s;
	-moz-transition:0.2s;
	-webkit-transition:0.2s;
	-o-transition:0.2s;

}
/*导航栏-链接-鼠标经过*/
.num a:hover {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 2px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #06F;
	border-left-color: #FFF;
	color: #666;
}
/*导航栏-链接-激活状态*/
.num a.on{
	-moz-border-radius: 0px 0px 0 0;
	-khtml-border-radius: 0px 0px 0 0;
	-webkit-border-radius: 0px 0px 0 0;
	background-image: none;
	background-repeat: repeat-x;
	background-position: 0 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 2px;
	border-left-width: 0px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FFF;
	border-right-color: #FFF;
	border-bottom-color: #06F;
	border-left-color: #FFF;
	color: #333;
	font-weight: bolder;
}
/*右侧关注用户框*/
.smallbox{
	float:right;
	width:320px;
	padding-top: 2px;
	padding-right: 15px;
}
/*视频、右侧关注框、日志、留言框架样式*/
.n_box,.main_list ul li,.arc_list li,.w_info{
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #DBDBDB;
	border-right-color: #CCC;
	border-bottom-color: #C3C3C3;
	border-left-color: #CCC;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 15px;
}
/*关注粉丝数量*/
.f-r{
	float: right;
	color: #F33;
	text-shadow: 1px 1px 1px #fff;
	padding-right: 3px;
}
/*小框架标题(关注框标题,日志评论标题等)*/
.ceTitle {
	color: #bbb;
	text-shadow: 1px 1px 1px #fff;
	margin: 0px;
	font-family: ;
	background-color: #FFF;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
}
/*关注、被关注用户头像框*/
.mini-tx {
	padding: 5px 5px 5px 5px;
}
.mini-tx img {
/*	-webkit-border-radius: 34px;
	-moz-border-radius: 34px;*/
	margin: 8px;
	width: 48px;
	height: 48px;
	padding: 2px;
	border: 1px solid #CCC;
	
	transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-webkit-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
}
.mini-tx img:hover {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity:0.5;
}

/*全局框架(视频、日志、留言等)*/
.largebox {
	width: 530px;
	padding-left: 15px;
	margin-top: 0px;
}

/*页数框架*/
.page{
	display:block;
	width:100%;
	text-align:center;
	height: 50%;
	margin-bottom: 0px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
/*页数按钮*/
.page li{
	font-size:14px;
	display:inline;
	line-height:26px;
	height:26px;
}
/*未激活的页数*/
.page li a{
	margin-right:0px;
	color:#999;
	width: 26px;
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	-webkit-border-radius: 0px;
	background-color: #CDCDCD;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #BBB;
	transition:0.2s;
	-moz-transition:0.2s;
	-webkit-transition:0.2s;
	-o-transition:0.2s;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
	margin-top: 10px;
}
.page li a:hover {
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #999;
	color: #666;
}
/*当前页数*/
.page li.current{
	-moz-border-radius: 0px;
	-khtml-border-radius: 0px;
	-webkit-border-radius: 0px;
	color:#FFF;
	font-weight: bold;
	background-color: #428DFF;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #06F;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
}



/*====================视频区域====================*/

/*视频列表*/
.main_list ul li{
	height: 160px;
	display:block;
	word-break:keep-all;
	overflow:hidden;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis; 	
	padding-left: 20px;
}
.main_list ul li:hover{
}
.main_list ul li a img{
	height: 90px;
	width: 120px;
	margin-top: 40px;
}


/*视频标题*/
.main_list ul li a.title{
	font-size: 18px;
	position: absolute;
	left: 20px;
	top: 5px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	width: 480px;
	padding-bottom: 5px;
	padding-left: 2px;
	height: 23px;
	overflow: hidden;
	color: #333;
	
	transition: color 0.2s;
	-moz-transition: color 0.2s; /* Firefox 4 */
	-webkit-transition: color 0.2s; /* Safari 和 Chrome */
	-o-transition: color 0.2s; /* Opera *//
}
.main_list ul li a.title:hover{
	color: #999;
}
/*视频说明*/
.main_list ul li .q{
	
	padding-left:3px;
	width:350px;
	padding-top:42px;
	color:#888;
	height: 86px;
}
/*视频分类*/
.main_list ul li .l{
	background-color: #000;
	padding-top: 3px;
	padding-bottom: 3px;
	color: #FFF;
	position: absolute;
	top: 116px;
	overflow: visible;
	height: 20px;
	width: 120px;
	left: 22px;
	text-align: center;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}
/*投稿日期*/
.main_list ul li .c{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#999;
	display:block;
	position:absolute;
	bottom:0px;
	left: 0px;
	padding-top: 3px;
	text-align: center;
	background-color: #EEE;
	width: 100%;
	padding-bottom: 3px;
}
/*unknow*/
.main_list ul li .c b{
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
	font-weight:100; 
	color:#F93; 
	margin-right:10px;
}

/*=======================日志========================*/
/*文章框架*/
.arc_list{}
/*文章列表*/
.arc_list li{
	display:block;
	word-break:keep-all;
	overflow:hidden;
	padding:15px;
	position:relative;
	background-image: none;
	background-repeat: no-repeat;
	background-position: left bottom;
}
.arc_list li:hover{
	background-image: none;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #FFF;
}
/*文章标题*/
.arc_list li h1{
	font-size:18px;
	padding: 0 0 4px 0;
	font-family:"微软雅黑";
	margin: 0;
	width: 350px;
}
/*文章标题链接*/
.arc_list li h1 a{
	font-size: 18px;
	left: 20px;
	top: 5px;
	padding-bottom: 5px;
	padding-left: 2px;
	height: 23px;
	overflow: hidden;
	color: #666;
	transition: color 0.2s;
	-moz-transition: color 0.2s;
	-webkit-transition: color 0.2s;
	-o-transition: color 0.2s;
}
.arc_list li h1 a:hover{
	color: #999;
}
/*文章点击量*/
.a_click b{
	font-size: 36px;
	top: 5px;
	right: 10px;
}
.a_click b:before{
	content:"+";
}
/*与发布时间*/
.a_date b{
	color: #06C;
	left: 20px;
}
/*隐藏点击日期前缀*/
.a_click,.a_date{
	color: #FFF;
}

.arc_list li span{
	margin-left:5px;
	margin-right:5px;
}
.arc_list li span b{
	color:#CCC;
	position: absolute;
	font-family:Georgia, "Times New Roman", Times, serif;
}

/*文章概要内容*/
.a_po{
	margin: 5px;
	line-height: none;
	color: #777;
}
/*查看全文*/
.a_more a{
	text-align: right;
	color: #099;
}
.a_more a:hover{
	text-align: right;
	color: #00C4C4;
}

.arc_list li:hover .arc_del{
	display:block;
}
.arc_list li:hover .arc_edit{
	display:block;
}

/*==========日志内容==========*/

.w_info{
	padding: 15px;	
}
.w_info table{
	margin-bottom:10px;
}
.w_info td{ background:#f9f9f9;}
/*文章标题*/
.arc-title {
	line-height: normal;
	margin-bottom: 5px;
	font-size: 24px;
	color: #333;
	text-shadow: 0px 0px black;
	padding-left: 0px;
	background-color: #FFF;
	text-align: center;
	width: 100%;
	font-weight: bold;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding-bottom: 10px;
}
/*统计发布时间框架*/
.ets{
	text-align:center;
}
/*点击量、日期 数据*/
.ets .date {
	color: #F36;
	font-family: Arial;
}
/*“日志点击”文本*/
.ets .date b.pr {
	color: #666;
}
/*“日志发布时间”文本*/
.ets .date b {
	color: #666;
	font-weight: normal;
	margin-left: 5px;
}

/*文章内容*/
.txt-box {
	line-height: 180%;
	color: #555;
	padding-bottom: 15px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	overflow: hidden;
	margin-bottom: 15px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	margin-top: 15px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #CCC;
}
.txt-box p a {
	color: #09C;
	text-decoration: underline;
}
.txt-box p a:hover {
	color: #00B9F7;
	text-decoration: underline;
}

/*评论框架*/
.commons{
	
}
/*评论列表*/
.commons li {
	padding: 5px;
	margin: 0 3px 0 3px;
	display: block;
	overflow: hidden;
	border-bottom:1px solid #eee;
	position:relative;
}

/*偶数楼层属性*/
.commons li:nth-of-type(2n){
	background:#f9f9f9;
}
/*评论者头像*/
.commons li img{
	border: 1px solid #CCC;
	width: 80px;
	padding: 1px;
	float: left;
	margin-right: 7px;
}
/*unknow*/
.commons li b{
	font-weight:normal;
}
/*评论内容*/
.commons li p{
	color:#666;
	padding:3px;
	line-height:150%;
}
/*楼层数*/
.commons li b.louceng{
	margin: 0 5px 0 0;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #D33;
	font-size: 24px;
}
/*用户名*/
.commons b.com-name{
	margin-right: 10px;
	color: #555;
	font-weight: normal;
	font-size: 18px;
}
/*评论时间*/
.commons b.com-date{
	color:#aaa;
}
/*评论文本框架*/
.seedmsg {
	width:100%;
	padding-left: 5px;
}
/*小三角形*/
.seedmsg_text_bg{
	background:none;
	width:0px;
	height:0px;
	float:left;
	margin-top:0px;
}
/*本人头像*/
.seedmsg img {
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	display: block;
	float: left;
	width: 23px;
	height: 23px;
	border: 1px solid #DDD;
	padding: 1px;
	margin-left: 4px;
	margin-top:13px;
	margin-right: 0px;
	float:left;
	position: absolute;
	
	transition:0.2s;
	-moz-transition:0.2s;
	-webkit-transition:0.2s;
	-o-transition:0.2s;
}
/*鼠标经过本人头像*/
.seedmsg img:hover {
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	width: 46px;
	height: 46px;
}
/*文本框*/
#text{
 	display:block;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	width: 100%;
	margin-bottom: 10px;
	background: none; 
	border: 1px solid #848484; 
	padding-left: 35px; 
	/*resize:none;*//*定义文本框能否拉大*/
}



/*编辑、删除文章按钮*/
/*删除按钮*/
.arc_del{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAE1JREFUOE9jYKAFUFZW/o+OSbKHZAOwaSAkhuIiQopJdhFJ/oUphtkC4hPDxrCEGE3IakYNwBJPeAMIqp6oQCQmUWFNJ8RoJMaVJCdCAM8GmrHmfW1cAAAAAElFTkSuQmCC);
	width:16px;
	height:16px;
	position:absolute;
	right:7px;
	top:7px;
	display: block;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	
	transition: 0.8s;
	-moz-transition: 0.8s;
	-webkit-transition: 0.8s;
	-o-transition: 0.8s;
}
/*鼠标经过删除按钮*/
.arc_del:hover{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAFZJREFUOE9jZMAClJWV/6ML3717lxGbWqxiIAPQMV7N2DQQEkMxkJBikl1EtF+pqhDmTJChxLAxLCdGE7KaUQNwpH9seQBZKVGBSEyqJDoD4TKMqgkQAKxLl6qJz4BoAAAAAElFTkSuQmCC);
}
/*编辑按钮*/
.arc_edit{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAHRJREFUOE+tk1EOwCAIQ70L9z/jFpNhEFrslpn4YYDXCjrGH8vMrm67xsyBemqx5xUIDTyZSGCDdAC33UIYIBZNxXxeLhCAKcJGZoDaVOhALd6cRAcMELternwC5Lm/AqCX1wKUr0EBpz+R42UKnwGKbZZzAwgRttHZABeEAAAAAElFTkSuQmCC);
	width:16px;
	height:16px;
	position:absolute;
	display:block;
	right:27px;
	top:8px;
	filter:alpha(opacity=0);
	-moz-opacity:0;
	opacity:0;
	
	transition: 0.8s;
	-moz-transition: 0.8s;
	-webkit-transition: 0.8s;
	-o-transition: 0.8s;
}
/*鼠标经过编辑按钮*/
.arc_edit:hover{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAHBJREFUOE+1U0EOwCAI8y/8/40zLmGRQq0cZuIFaSkFx2geM3sSZAVP1wF7TiDpgj3/I0kB0Oiyq0Jv6okAZZdtMAJWMRlZEdz4Qj24AQcVqIAR4DhbCvbByDGiAtw8SaC2+z8C9Sdoa12gWn1lQXifzN+20cSrXNoAAAAASUVORK5CYII=);
}
/*鼠标经过文章列表显示删除按钮*/
.arc_list li:hover .arc_del{
	display:block;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}
/*鼠标经过文章列表显示编辑按钮*/
.arc_list li:hover .arc_edit{
	display:block;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}
/*鼠标经过评论列表显示删除按钮*/
.commons li:hover .arc_del{
	display:block;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	opacity:0.8;
}

/*=======================个人资料========================*/
/*表头*/
.beTitle {
	font-size:14px;
	font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu;
	font-weight:normal;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border:1px solid #FFF;
	text-decoration:none;
	display:inline-block;
	text-shadow:1px 1px 0px #ffffff;
	width:458px;
	margin: 0px;
	padding-top: 9px;
	padding-right: 10px;
	padding-bottom: 9px;
	padding-left: 10px;
	background-color: #FFF;
	text-align: center;
	color: #666;
}

/*表格*/
.tList {
	font-family:Arial, Helvetica, sans-serif;
	color:#666;
	font-size:12px;
	text-shadow: 1px 1px 0px #fff;
	background:#eaebec;
	border:#ccc 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
	width: 480px;
	margin-left: 10px;
}
.tList a:link {
	color: #666;
	font-weight: bold;
	text-decoration:none;
}
.tList a:visited {
	color: #999999;
	font-weight:bold;
	text-decoration:none;
}
.tList a:active,
.tList a:hover {
	color: #bd5a35;
	text-decoration:underline;
}
.tList tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
.tList tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
.tList tr {
	text-align: left;
	padding-left:20px;
}
.tList td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
.tList td {
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #e0e0e0;
	border-bottom-color: #e0e0e0;
	border-left-color: #e0e0e0;
}
.tList tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.tList tr:last-child td {
	border-bottom:0;
}
.tList tr:last-child td:first-child {
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
.tList tr:last-child td:last-child {
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}
.tList tr:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}

/*========================留言板========================*/
/*整体框架*/
.public_message_box{

}
/*留言列表*/
.public_message_box li{
	-webkit-border-radius: 9px 9px 9px 9px;
	-moz-border-radius: 9px 9px 9px 9px;
	border-radius: 9px 9px 9px 9px;
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #DBDBDB;
	border-right-color: #CCC;
	border-bottom-color: #C3C3C3;
	border-left-color: #CCC;
	margin-bottom: 15px;
	list-style-type:none;
	padding:10px;
	border-bottom:0px solid #f2f2f2;
	display:block;
	overflow:hidden;
	width: 505px;
}
/*留言者头像*/
.public_message_box li img{
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	display:block;
	float:left;
	width:80px;
	height:80px;
	border:1px solid #ddd;
	padding:1px;
	margin-right:10px;
	margin-top: -2px;
	margin-left: 0px;
}
/*留言内容框架*/
.public_message_box .r-info{
}
/*链接*/
.public_message_box .r-info a{
	cursor: url(http://www.ffsky.net/img/mouse.cur),pointer;
	color: #09C;
}
/*留言时间*/
.public_message_box .r-info b.time{
	float:none;
	color:#ccc;
	font-weight:normal;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	position: absolute;
	display: block;
}
/*留言者用户名*/
.r-info b a{
	color: #09C;
	font-size: 18px;
}
/*留言内容*/
.public_message_box .r-info p{
	color:#666;
	line-height:130%;
	width: 100%;
	margin-top: 18px;
}

/*=========================关注========================*/

/*选项卡*/
.minmun{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position:relative;
	text-align:left;
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #DBDBDB;
	border-right-color: #CCC;
	border-bottom-color: #999;
	border-left-color: #CCC;
	list-style-type:none;
	display:inline-block;
	overflow:hidden;
	width: 506px;
	height: 35px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	margin-left: 15px;
}
.minmun a{
	padding: 8px 9px 8px 10px;
	vertical-align: middle;
	height: 14px;
	line-height: 14px;
	display: inline-block;
	margin: 0 -2px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	color: #09C;
}
.minmun a.on{
	color:#666;
	font-weight: 700;
}

/*列表框架*/
.fanslist {

}
/*用户列表*/
.fanslist li{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position:relative;
	text-align:left;
	background-color: #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 2px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #DBDBDB;
	border-right-color: #CCC;
	border-bottom-color: #999;
	border-left-color: #CCC;
	margin-bottom: 15px;
	list-style-type:none;
	display:block;
	overflow:hidden;
	width: 497px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 30px;
}
.fanslist li a{
	font-size:12px;
	color: #69C;
}
/*加关注框*/
.fanslist li .W_addbtn_even{
	margin-right: 10px;
}
.fanslist li .W_addbtn_even a{
}
.fanslist li .W_addbtn_even a img{
	display: block;
}
/*取消关注*/
.fanslist li .W_linkb{
	display:none;
}
.fanslist li:hover .W_linkb{
	display:block;
}
/*用户头像*/
.fanslist li .face{
	width:60px;
	height:60px;
}
/*个人信息框*/
.fanslist li .t{
	float:none;
	height:60px;
	width:360px;
	margin-top: 4px;
	margin-left: 70px;
}
/*用户名*/
.fanslist li .t a{
	float:left;
	height:22px;
	color: #39C;
	font-size: 16px;
	padding-top: 0px;
	overflow: hidden;
}
/*地址*/
.fanslist li .address{
	float:left;
	padding-left:0px;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0px;
	display: block;
	width: 370px;
}
/*用户关注粉丝投稿数据*/
.fanslist li .connect{
	float:left;
	text-align: center;
	position: absolute;
	width: 100%;
	left: 0px;
	bottom: 0px;
	background-color: #EEE;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 0px;
}
.fanslist li .connect a{
	color: #0078B6;
}
.W_vline{
	margin: 0 5px;
	color: #E1E4E5;
	font-style: normal;
	font-weight: normal;
}
/*用户简介*/
.fanslist li .info{
}
.fanslist li .msg{
	float:left;
}

/*更多资料*/
.more-info{
	float:none;
	clear:none;
	position: absolute;
	right: 10px;
	top: 60px;
}
.more-info .more{
	background: url("http://static.hdslb.com/images/common/ico.png") no-repeat 0 -389px;
	display:block;
	float:left;
	width:14px;
	height:14px;
	margin-top:0px;
}
/*更多资料激活状态*/
.more-info .more.on{
	background-position: 0 -417px;
}
/*更多资料框*/
.more-info-box{
	display:block;
	border-radius: 3px;
	clear:both;
	border:1px solid #eee;
	background:#f9f9f9;
	width:450px;
	float:right;
	padding:10px;
	margin:0px 10px 5px 20px;
	line-height:22px;
	color:#444;
}
/*共同关注*/
.connect_ico{
	width:39px;
	height:14px;
	background:url("http://static.hdslb.com/images/common/ico.png") no-repeat 0 -455px;
}

/*用户名片(鼠标经过用户名弹出)*/
.a_layer{
	position: absolute;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	z-index: 997;
	color: #666;
	left:0px;
	top:0px;
}
.a_layer .bg{
	padding: 4px;
	position:relative;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	background: url("http://static.hdslb.com/images/newcss/layer_bg.png") repeat;
}
.a_layer .content{
	background: white;
	width:360px;
	text-align:left;
	border: 1px solid #C6C6C6;
	border-radius: 3px;
}
.a_layer .content .msg{
	padding:15px;
	text-align:center;
	color:#999;
}
.a_layer .card{
	padding: 15px 15px 10px;
	display:block;
	overflow:hidden;
}
.a_layer .card .face{
	width:48px;
	height:48px;
	background:#fff;
	padding:2px;
	margin:0 5px 0 0;
	float: left;
}
.a_layer .card .t{
	float:left;
	width:210px;
	float:left;
	padding:2px 0 0 0;
}
.a_layer .card .t a{
	color: #0078B6;
}
.a_layer .card .t .approve {
	margin-right:3px;
	background: url("http://static.hdslb.com/images/newcss/vertified-Ico.png") no-repeat 3px -1px;
	padding: 0px 8px 1px 8px;
}
.a_layer .card .address{
	word-wrap: break-word;
	float:left;
	line-height:12px;
	width:260px;
	padding:7px 0 5px 0;
}.a_layer .card .address img{
	float:left;
	padding:3px 4px 3px 2px;
}
.a_layer .card .male{
	background:url("http://static.hdslb.com/images/common/z.png") no-repeat -963px -183px;
}
.a_layer .card .female {
	background: url("http://static.hdslb.com/images/common/z.png") no-repeat -963px -208px;
}
.a_layer .card .userdata{
	display:block;
	float:left;
	width: 210px;
}
.a_layer .card .userdata li{
	float:left;
}
/*名片框关注粉丝投稿链接*/
.a_layer .card .userdata li a{
	color: #399;
}
.a_layer .card .userdata li.W_vline {
	margin: 0 8px;
}
.a_layer .cardinfo{
	margin: 0 15px 8px;
	line-height: 18px;
	width: 330px;
}
.a_layer .cardinfo .approve{
	background: #FC3;
	float: left;
	border-radius: 10px 0;
	padding: 0 5px 0 5px;
	color: white;
	margin: 0 5px 0 0;
}
.a_layer .links{
	margin: 0;
	background: whiteSmoke;
	padding: 6px 15px 5px;
	_padding-left: 16px;
	overflow: hidden;
}
.a_layer .links a {
	color: #09C;
}
.a_layer .links p{
	float: left;
	display: inline-block;
	margin-top: 4px;
}
.a_layer .links .W_addbtn_even{
	float:right;
}




/*========================滚动条========================*/


/*背景*/
::-webkit-scrollbar-track
{
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #CCC;
	border-left-color: #CCC;
	background-color: #FFF;
}

/*滑块*/
::-webkit-scrollbar
{
	width: 12px;
}
::-webkit-scrollbar-thumb
{
	background-color: #BFBFBF;
	border: 1px solid #8F8F8F;
}
::-webkit-scrollbar-thumb:hover
{
	background-color: #737373;
	border: 1px solid #7D7D7D;
}
::-webkit-scrollbar-thumb:active
{
	background-color: #616161;
	border: 1px solid #7D7D7D;
}

/*====================文本选择颜色效果===================*/
/*Webkit,Opera9.5+,Ie9+*/
::selection {
	background: #F36;
	color:#FFF;
}
/*Mozilla Firefox*/
::-moz-selection {
	background: #F36;
	color:#FFF;
}

下载

文件下载

  文件名称:哔哩哔哩清晰风格模板  文件大小:未知
  下载声明:本站作品均有会员提供,如有侵犯您的版权请联系我们及时处理!
  下载地址:本地下载

转载请注明 - [风格]哔哩哔哩清晰风格模板 - 幻想天空 - 魔王殿 - 铃音の小屋
喜欢 (3)
[不公开]
分享 (0)
关于作者:
美国服务器正在努力恢复中!目前系统升级完善,功能可以使用!现在来申请免费空间无需填表哟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. QAQ这是铃音自己写的么QAQ不管怎样,好厉害的说...
    帅帅2015-01-06 22:07 回复 Windows 7 | Chrome 31.0.1650.63