CSS 分享

原来的那个淘汰了,贴出来一下,有兴趣可以参考,原型是Metro

改了很多次~

面码大法好!!!

  1 /*测试区域*/
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11 /*标题备份*/
 12 h7   {
 13         background: #2B6695;
 14         border-radius: 6px 6px 6px 6px;
 15         box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
 16         color: #FFFFFF;
 17         font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 18         font-size: 17px;
 19         font-weight: bold;
 20         height: 25px;
 21         line-height: 25px;
 22         margin: 18px 0 !important;
 23         padding: 8px 0 5px 5px;
 24         text-shadow: 2px 2px 3px #222222;
 25     }
 26  h5{
 27         background: #2B6600;
 28         border-radius: 6px 6px 6px 6px;
 29         box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
 30         color: #FFFFFF;
 31         font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 32         font-size: 13px;
 33         font-weight: bold;
 34         height: 24px;
 35         line-height: 23px;
 36         margin: 12px 0 !important;
 37         padding: 5px 0 5px 10px;
 38         text-shadow: 2px 2px 3px #222222;
 39     }
 40 h3{
 41    text-align:left;
 42    box-shadow:3px 3px 2px #888888;
 43    width:100%;
 44    background-color:#46A3FF;
 45    color:#000000;
 46    max-width: 700px;
 47 }
 48 h2{
 49    text-align:left;
 50    box-shadow:3px 3px 2px #888888;
 51    width:100%;
 52    background-color:#BEBEBE;
 53    color:#000000;
 54 }
 55
 56
 57
 58 /*悬浮的那两个玩意儿*/
 59 #div_digg {
 60     position: fixed;
 61     bottom: 10px;
 62     width: 50px;
 63     right: 420px;
 64     filter: alpha(opacity=20);
 65     opacity: 0.60;
 66     -moz-opacity: 0.80;
 67     border: 2px solid #6FA833;
 68     padding: 3px;
 69     background-color: #FFF;
 70     border-radius: 5px 5px 5px 5px !important;
 71     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
 72 }
 73 #comment_nav {
 74     width: 203px;
 75     right: 990px;
 76     filter: alpha(opacity=20);
 77     opacity: 0.60;
 78     -moz-opacity: 0.80;
 79     margin-right: 0;
 80     margin-bottom: 10px;
 81     text-align: center;
 82     padding-top: 3px;
 83     position: fixed;
 84     bottom: 10px;
 85     padding: 3px;
 86     border-radius: 5px 5px 5px 5px !important;
 87     box-shadow: 0 0 0 1px #77E0C3, 1px 1px 6px 1px rgba(0, 0, 0, 0.5);
 88     padding-bottom: 3px;
 89     padding-left: 6px;
 90     padding-right: 15px;
 91     background-color: green;
 92 }
 93
 94
 95
 96 /*自制侧边栏*/
 97
 98 #cnblogs_post_body {
 99     word-break: break-word;
100     width: 750px;
101 }
102
103 #leftcontentcontainer>div {
104     border: 1px solid #aaaaaa;
105     padding: 15px;
106     margin-bottom: 15px;
107 }
108
109 #MySignature {
110     background-color: #f8f8ee;
111     border: solid 1px #e8e7d0;
112     box-shadow: 0 0 15px #aaa;
113     padding: 10px;
114     margin-bottom: 10px;
115     color: gray;
116     width: 725px;
117 }
118
119 .newsItem {
120     border: 1px solid #AAAAAA;
121     padding: 15px;
122     margin-bottom: 15px;
123 }
124
125 #mainContent .forFlow {
126     width: 750px;
127 }
128
129 /*透明*/
130 #home{
131 width:1050px;
132 height:auto;
133 min-height:250px;/* 必需 */
134 _height:250px;/* 必需 */
135 overflow:hidden;
136 background-color:#FF0000;/* 背景色 */
137 }
138 #home{
139 filter:alpha(opacity=20); /* IE 透明度20% */
140 }
141 #home{
142 background-color:#FFFFFF;
143 -moz-opacity:0.80; /* Moz FF 透明度20%*/
144 opacity: 0.80; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
145 }
146 #home{
147 position:absolute;
148 }
149 /*背景图片*/
150 body {
151 margin-top: 0px;
152 margin-right: auto;
153 margin-bottom: 0px;
154 margin-left: auto;
155 width: 1100px;
156 font-size: 12px;
157 color: #8F8F8F;
158 -moz-opacity:0.8;filter:alpha(opacity=80);
159 background-image:url(http://images.cnblogs.com/cnblogs_com/radiumlrb/871769/o_6c224f4a20a44623a7931a289b22720e0cf3d71b.jpg);}
160
161
162 /*评论按钮*/
163 .comment_btn {
164     font-family:‘Microsoft Yahei‘;
165     border:none;
166     height:48px;
167     width:120px;
168     font-size:18px;
169     cursor:pointer;
170     position:relative;
171     vertical-align:middle;
172     display:inline-block;
173     background:#55895B;
174     color:#fff;
175 }
176
177 /*踩一下隐藏*/
178 .buryit {
179     display:none;
180 }
181 .diggword {
182     display:none;
183 }
184 #btn_comment_submit:hover {
185     background:#6DA47D;
186 }
187
188
189 /*广告隐藏*/
190 .c_ad_block{
191    display:none;
192 }
193
194
195 /*评论标题*/
196 .feedback_area_title {
197     padding:10px;
198     font-size:24px;
199     font-weight:bold;
200     color:#ffffff;
201     border-bottom:solid 6px #ffffff;
202 }
203 .feedbackListSubtitle {
204     font-size:12px;
205     color:#888;
206 }
207 .feedbackListSubtitle a {
208     color:#888;
209 }
210 .comment_quote {
211     background:#FCFAAC;
212     padding:15px;
213     border:1px solid #CCC;
214 }
215 #commentform_title {
216     color:#55895B;
217     background-image:none;
218     background-repeat:no-repeat;
219     margin-bottom:10px;
220     padding:10px 20px 10px 10px;
221     font-size:24px;
222     font-weight:bold;
223     border-bottom:solid 6px #55895B;
224 }
225 /*评论框*/
226 #comment_form {
227     margin:10px 0;
228     padding:0;
229 }
230 .commentform {
231     margin:10px 0;
232     padding:10px 20px;
233     background:#fff;
234 }
235 /*评论输入域*/
236 #tbCommentBody {
237     font-family:‘MIcrosoft Yahei‘;
238     margin-top:10px;
239     width:730px;
240     max-width:940px;
241     min-width:640px;
242     background:white;
243     color:#333;
244     border:2px solid #fff;
245     box-shadow:inset 0 0 8px #aaa;
246     padding:10px;
247     height:120px;
248     font-size:14px;
249     min-height:120px;
250 }
251 /*评论条目*/
252 .feedbackItem {
253     font-size:14px;
254     line-height:24px;
255     margin:10px 0;
256     padding:20px;
257     background:#F2F2F2;
258     box-shadow:0 0 5px #aaa;
259 }
260 .feedbackListSubtitle {
261     font-weight:normal;
262 }

现在这个主题是抄来的,特别鸣谢@WABoss,由于不是自己的,不能分享~

时间: 2024-10-12 19:28:37

CSS 分享的相关文章

jquery实现分享到侧边栏原理

几乎每一个网站,都有一个分享到侧边栏的功能, 我写的这个是固定在网页窗口的左侧, html: <!--------------分享到侧边栏----------------------> <div id="share"> <span>分享</span> </div> css: /*******************************分享到侧边栏**************************************/

如何处理CSS3属性前缀(转载)总结

今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin. 姐姐的一句话让我汗颜,我还在思考着如何让Sass来写Gradient,或者类似这样需要带前缀的CSS3属性.也这样让我在思考,那么有了Autoprefixer这样的后处理,Sass中有关于CSS3的mixins是不是

一段备份的代码

<!DOCTYPE html><html lang="en"> <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <meta http-equiv="keywo

兄弟连教育分享:用CSS实现鼠标悬停提示的方法

本文,兄弟连HTML5培训 ,分享了纯CSS实现鼠标悬停提示的方法.给大家供大家参考.具体分析如下: 这是一款比较漂亮的鼠标悬停提示效果,用纯CSS代码实现,鼠标放到图片上会显示一个层,也就是悬停时的提示,在这个提示框内你还可以加入图片或是一个列表,这就靠你的发挥了,提示框的背景颜色和文字颜色你都可以自己调. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3

html css 前端基础 学习方法及经验分享

前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于基础语法 对于基础语法,此处不做讲解,有需要的同学可以在w3cschool.w3school.慕课网等等进行学习.如果是刚开始接触前端,不建议通过书籍进行学习,第一是因为书籍里面有的知识可能过于陈旧,已经在新版本中被废弃,第二是因为书籍里面知识体系十分全面,很多知识可能比较难理解,且平时做项目会很少

【源码分享】jquery+css实现侧边导航栏

jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2css代码 这里是css代码,详情请看注释 1 <style>

验分享:CSS浮动(float,clear)通俗讲解

经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素

分享一款jQuery创意字体特效 js+css+html5 qhttl.com

分享一款jQuery创意字体特效,字体超级棒 共八种效果,下面先上图: 预览地址:http://www.qhttl.com/content/view/2014/07/19/jiaoben71/jiaoben71/index.html 下载地址:jQuery创意字体特效 分享一款jQuery创意字体特效 js+css+html5 qhttl.com,布布扣,bubuko.com

经验分享:CSS浮动(float,clear)通俗讲解

很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家. 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解. 如果读者理解CSS盒子模型,但对于浮动不理解,那么这篇文章可以帮助你. 小菜水平有限,本文仅仅是入门教程,不当之处请谅解! 本文以div元素布局为例. 教程开始: 首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下