这一个礼拜来一直在学习html和css的基础,感觉自己充满了知识哈!
说起来动力是bilibili的css自定义勾起了我的兴趣,发现css是个很奇妙的东西,就开始努力学习了,自学完css后想学习javascript,虽然自己主兴趣不是前端开发(当然也许以后也有可能去做)。
在这里贴一个修改别人的css的bilibili代码吧:)g+风格,居然还实现了图片轮播,图片轮播原代码创作者实在是太聪明了!
/*============================================================*/ /*============================================================*/ /* 设计者:osora酱 修改者:xingo 感谢osora酱的付出:) bilibili空间:http://space.bilibili.tv/350990 原文地址:http://space.bilibili.tv/350990/7885.html 欢迎使用(修改)此模板~ */ /*============================================================*/ /*============================================================*/ /*============================================================*/ /*==================全局样式==================*/ .header,.smallbox:after{ animation: my_images 24s linear 0s infinite normal; -moz-animation: my_images 24s linear 0s infinite normal; -webkit-animation: my_images 24s linear 0s infinite normal; -o-animation: my_images 24s linear 0s infinite normal; background:url("https://img-my.csdn.net/uploads/201406/23/1403530161_4251.jpg") no-repeat 0px 0px,url("https://img-my.csdn.net/uploads/201406/23/1403529851_9082.jpg") no-repeat 620px 0px,url("https://img-my.csdn.net/uploads/201406/23/1403529850_1916.jpg") no-repeat 1240px 0px,url("https://img-my.csdn.net/uploads/201406/23/1403529851_7395.jpg") no-repeat 1860px 0px; } /*整个页面*/ body { background-color: #E5E5E5; font-family:"Microsoft YaHei",微软雅黑,"Microsoft JhengHei",华文细黑,STHeiti,MingLiu; } body:after{ content:"\25ba Copyright 2014 bilibili.tv. All rights reserved. Stylesheet modified by xingo."; text-align: center; font-size: 10px; width: 100%; bottom: 5px; left: 0px; } /*所有超链接*/ a{ color:#FFF; text-decoration:none; padding-top:5px; } /*页面整体内容*/ .z{ margin:0 auto; text-align:left; width:900px; position:relative; } /*顶部空间名称*/ .spname { background-color: #F5F5F5; position: fixed; height: 34px; width: 100%; top: 0px; z-index: 30; padding-top: 9px; left: 0px; text-align: right; color: #999; } .spname:before { content: ""; position: fixed; background-image: url(data:image/png;base64,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); height: 31px; width: 88px; z-index: 31; 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; } .header:after { content:""; height: 3px; background-color: rgb(0,148,138); bottom: 0px; left: 0px; width: 100%; position: absolute; animation: my_images_bar 24s linear 0s infinite normal; -moz-animation: my_images_bar 24s linear 0s infinite normal; -webkit-animation: my_images_bar 24s linear 0s infinite normal; -o-animation: my_images_bar 24s linear 0s infinite normal; } .header:before { content:""; position: absolute; left: 20px; bottom: 20px; height: 16px; width: 64px; background:url("http://img.itc.cn/photo/oTaffnM1vg8") no-repeat 0px -16px,url("http://img.itc.cn/photo/oTaffnM1vg8") repeat-x 0px 0px; animation: my_images_dot 24s linear 0s infinite normal; -moz-animation: my_images_dot 24s linear 0s infinite normal; -webkit-animation: my_images_dot 24s linear 0s infinite normal; -o-animation: my_images_dot 24s linear 0s infinite normal; } @keyframes my_images { 0% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 24% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 25% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 49% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 50% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 74% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 75% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 99% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 100% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} } @-moz-keyframes my_images { 0% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 24% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 25% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 49% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 50% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 74% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 75% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 99% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 100% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} } @-webkit-keyframes my_images { 0% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 24% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 25% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 49% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 50% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 74% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 75% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 99% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 100% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} } @-o-keyframes my_images { 0% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 24% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} 25% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 49% {background-position:-620px 0px,0px 0px,620px 0px,1240px 0px;} 50% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 74% {background-position:-1240px 0px,-620px 0px,0px 0px,620px 0px;} 75% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 99% {background-position:-1860px 0px,-1240px 0px,-620px 0px,0px 0px;} 100% {background-position:0px 0px,620px 0px,1240px 0px,1860px 0px;} } @keyframes my_images_bar { 0% {width: 0%;} 24% {width: 100%;} 25% {width: 0%;} 49% {width: 100%;} 50% {width: 0%;} 74% {width: 100%;} 75% {width: 0%;} 99% {width: 100%;} 100% {width: 0%;} } @-moz-keyframes my_images_bar { 0% {width: 0%;} 24% {width: 100%;} 25% {width: 0%;} 49% {width: 100%;} 50% {width: 0%;} 74% {width: 100%;} 75% {width: 0%;} 99% {width: 100%;} 100% {width: 0%;} } @-webkit-keyframes my_images_bar { 0% {width: 0%;} 24% {width: 100%;} 25% {width: 0%;} 49% {width: 100%;} 50% {width: 0%;} 74% {width: 100%;} 75% {width: 0%;} 99% {width: 100%;} 100% {width: 0%;} } @-o-keyframes my_images_bar { 0% {width: 0%;} 24% {width: 100%;} 25% {width: 0%;} 49% {width: 100%;} 50% {width: 0%;} 74% {width: 100%;} 75% {width: 0%;} 99% {width: 100%;} 100% {width: 0%;} } @keyframes my_images_dot { 0% {background-position:0px -16px} 24% {background-position:0px -16px} 25% {background-position:16px -16px} 49% {background-position:16px -16px} 50% {background-position:32px -16px} 74% {background-position:32px -16px} 75% {background-position:48px -16px} 99% {background-position:48px -16px} 100% {background-position:0px -16px} } @-moz-keyframes my_images_dot { 0% {background-position:0px -16px} 24% {background-position:0px -16px} 25% {background-position:16px -16px} 49% {background-position:16px -16px} 50% {background-position:32px -16px} 74% {background-position:32px -16px} 75% {background-position:48px -16px} 99% {background-position:48px -16px} 100% {background-position:0px -16px} } @-webkit-keyframes my_images_dot { 0% {background-position:0px -16px} 24% {background-position:0px -16px} 25% {background-position:16px -16px} 49% {background-position:16px -16px} 50% {background-position:32px -16px} 74% {background-position:32px -16px} 75% {background-position:48px -16px} 99% {background-position:48px -16px} 100% {background-position:0px -16px} } @-o-keyframes my_images_dot { 0% {background-position:0px -16px} 24% {background-position:0px -16px} 25% {background-position:16px -16px} 49% {background-position:16px -16px} 50% {background-position:32px -16px} 74% {background-position:32px -16px} 75% {background-position:48px -16px} 99% {background-position:48px -16px} 100% {background-position:0px -16px} } /*头像框架*/ .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 { height: 100px; width: 100px; margin-top: 70px; border: 6px solid #FCFAF2; padding: 0px; background-color: #FFF; box-shadow: #534C4C 0px 1px; } /*借用某框架的伪元素达到模糊头部背景*/ .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; } /*用户名*/ .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{ 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{ 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{ line-height:140%; color:#FFF; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 8px; } /*发消息+加关注框架*/ .s_link { display:block; overflow:hidden; text-align: center; padding-left: 60px; } .s_link li{ float:left; width:60px; margin:2px; text-align:center; display:block; font-size:12px; overflow:hidden; color: #FFF; } /*发消息+加关注+回复留言 按钮*/ .button { -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: #00948A; font-weight: bold; } .button:hover{ background-color: #10979D; border-bottom-width: 2px; border-bottom-style: inset; border-bottom-color: #005F59; padding-bottom: 6px; } .button.ok,.button.ok:hover{ background: #f5f5f5; border: 1px solid #EEE;} .seedmsg { } .addfs { } /*等级积分*/ #s_info{ padding:0px 0 0 0px; color:#FFF; border-top:0px dotted #ccc; margin-top:8px; 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: "Microsoft YaHei Light",微软雅黑 Light,"Microsoft JhengHei", "helvetica neue", Arial,"Lucida Grande", Sans-serif; float:left; display:block; overflow:hidden; font-size: 14px; margin-right: 0px; margin-left: 55px; padding-top: 6px; padding-right: 0px; padding-bottom: 11px; 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: #00948A; 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{ color: #09C; } /