码农熊的博客样式 灰色调
前言
原设计来自于李宝亨 共享一下我的自定义CSS博客皮肤
看到李宝亨共享的CSS样式时,我是眼前一亮的,真的非常好看。
但对于我的1024×768的小屏而言,好像不太兼容。
所以就根据个人的调子将李宝亨的样式进行了一些修改
1.改成了灰色调
2.没有使用图片
3.全部采用圆角风格
4.细节部分采用默认样式
色彩
#ccc
#999999
#888888
#777777
#666666
#555555
效果展示
代码
页面设置
/*公用*/
body {
color:#333;background:#FFF;font-family:"verdana","宋体","Arial";font-size:10pt;line-height:1.8em; background:#888888;
}
#home {
background:#fff;
overflow:auto;
border:solid 1px #fff;
}
/*段落*/
.postBody p,.postCon p {
margin:7px 0;
line-height:24px;
}
h1 {
margin:0;
}
h3 {
font-size:15px;
font-weight:bold;
}
/*超链接*/
a {
color:#464646;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited,a:hover {
color:#464646;
}
ul {
list-style:none;
margin:0;
padding:0;
}
image {
border:none;
}
#header {
padding:20px;
}
/*博客标题*/
#blogTitle,#blogTitle a {
font-weight:bold;
color:#888888;
}
/*子标题*/
.subtitle {
padding-left:30px;
font-size:14px;
color:#999;
font-weight:normal;
margin:10px 0;
}
/*导航栏*/
#navigator {
border-radius: 4px;
font-size:16px;
height:48px;
background:#888888;
text-align:center;
margin-top:20px;
margin-bottom:20px;
}
#navList li {
/*border:solid 1px #80BB01;
*/
margin:0;
line-height:48px;
display:inline-block;
float:left;
}
#navList li:hover {
/*border:solid 1px #BFE866;
*/
background:#999999;
}
#navList li a {
padding:0 30px;
text-decoration:none;
line-height:48px;
border:0;
color:#fff;
display:-moz-inline-box;
display:inline-block;
}
.blogStats {
margin:0;
line-height:48px;
display:inline-block;
float:right;
}
#main {
padding:20px;
}
/*左边*/
#sideBarMain {
width:200px;float:left;border-right:1px solid #666;margin-right:20px;
}
#sideBarMain a {
color:#666;
}
#leftcontentcontainer {
color:#666;
}
.newsItem {
color:#666;
}
/*公告*/
#profile_block {
margin-top:0px;
line-height:24px;
text-align:left;
}
/*主面板*/
#mainContent{float:right;margin-left:-250px;width:100%;}
/*每日文章列表*/
.day {
background:#fff;
padding:0;
/*border-bottom:solid 5px #489BF0;
*/
margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
color:#464646;
}
.postTitle {
padding-bottom:10px;
font-size:20px;
font-weight:bold;
color:#464646;
}
.dayTitle {
display:none;
}
/*摘要*/
.c_b_p_desc {
padding:10px;
line-height:24px;
color:#888;
}
.c_b_p_desc a {
color:#888;
}
.c_b_p_desc a:hover {
text-decoration:none;
border-bottom-width:1px;
border-bottom-style:dotted;
}
/*右侧图片*/
.desc_img {
margin-left:10px;
border:solid 1px #fff;
box-shadow:0 0 10px #aaa;
}
.forFlow{margin:0 16px 0 220px;}
/*博文页*/
#topics .post {
background:#fff;
}
.postCon {
padding:10px 20px 0 20px;
}
.postDesc {
margin:0 30px;
margin-bottom:2px;
padding:8px 0px;
font-size:12px;
color:#aaa;
background:#fff;
text-align:right;
}
.postDesc a {
color:#AAA;
}
.postBody {
padding:0;
}
/*google搜索框*/
#google_q,#q {
height:26px;
width:120px;
border:solid 1px #aaa;
box-shadow:inset 0 0 5px #aaa;
}
/*按钮*/
.btn_my_zzk {
border:none;
height:30px;
width:80px;
padding:1px;
font-size:14px;
font-weight:bold;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#888888;
color:#fff;
border-radius: 4px;
}
.btn_my_zzk:hover {
background:#999999;
}
/*评论按钮*/
#btn_comment_submit {
border:none;
height:48px;
width:120px;
border-radius: 4px;
}
/*评论按钮*/
.comment_btn {
font-family:'Microsoft Yahei';
border:none;
height:48px;
width:120px;
font-size:18px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#888888;
color:#fff;
border-radius: 4px;
}
#btn_comment_submit:hover {
background:#999999;
border-radius: 4px;
}
/*评论标题*/
.postTitle,.entrylistPosttitle,.feedback_area_title{border-bottom:1px solid #ddd;font-size:14px;font-weight:bold;margin:20px 0 10px;}
.feedbackListSubtitle {
font-size:12px;
color:#888;
}
.feedbackListSubtitle a {
color:#888;
}
div.commentform textarea { width:450px;height:300px;ont-size:13px;}
/*评论条目*/
.feedbackItem{padding:8px;border-bottom:1px dotted #ccc;}
/************************************分类页****************************************/
.entrylist {
padding:10px 20px;
background:#fff;
}
.entrylistItem {
margin:10px 0;
padding:10px;
}
.entrylistPosttitle {
font-size:18px;
font-weight:bold;
padding-left:30px;
}
.entrylistPostSummary {
padding:10px;
}
.entrylistItemPostDesc {
font-size:12px;
color:#999;
padding-left:40px;
}
/*尾部*/
#footer {
font-size:12px;
margin:20px;
padding:12px;
text-align:center;
background:#999999;
color:#DDD;
font-size:14px;
border-radius: 4px;
}
文章设置
<style type="text/css">
.First
{
margin: 10px 0;
font-family: 'Microsoft Yahei';
text-align: left;
padding: 6px 20px;
color:#fff;
background: #888888;
font-size: 20px;
border-radius: 4px;
clear: both;
}
.Second
{
margin: 10px 0;
font-family: 'Microsoft Yahei';
padding: 6px 20px;
background: #999999;
color: #fff;
font-size: 18px;
border-radius: 4px;
clear: both;
}
.Third
{
margin: 10px 0;
padding: 6px 20px;
font-family: 'Microsoft Yahei';
margin: 15px 0;
font-size: 16px;
color: fff;
background: #CCCCCC;
border-radius: 4px;
clear: both;
}
.note
{
margin: 10px 0;
padding: 15px 20px 15px 60px;
font-size: 15px;
font-family: 'Microsoft Yahei';
box-shadow: 0 0 8px #aaa;
clear: both;
}
</style>
使用方法
点击“管理”-“设置”
页面设置
文章设置
最后请记得按“保存”
如果在你那边不兼容的话,请告诉我,谢谢。
后续
1.关于圆角:
用的是CSS3中的border-radius border-radius只有在以下版本的浏览器:Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式 对于老版的浏览器,border-radius需要根据不同的浏览器内核添加不同的前缀,比说Mozilla内核需要加上“-moz”,而Webkit内核需要加上“-webkit”等
关于兼容的问题,接下来我会修改的。
资料:
http://lwl0606.cmszs.com/?p=1004
http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html
2.灰色调确实有些沉闷,以后我会尝试采用不同的配色方案。
资料来源
作者:唐小熊
出处:http://www.cnblogs.com/IT-Bear/
关于作者:一头写代码的熊
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
如有问题,可以通过kumat@foxmail.com 联系我,非常感谢。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂