自己写的CSDN博客css样式
2011-01-18 21:04
363 查看
突然觉得自己的博客样式过于单调,于是动手修改之,css代码如下:
/*页面body块样式*/
body{
background:#DBDBDB;
text-align:center;
}
/*整体页面样式*/
#csdnblog_allwrap{
width:900px;
height:auto;
}
/*页面边栏*/
#csdnblog_sidebar{
width:280px;
position:absolute;
left:1000px;
top:115px;
}
/*页面正文*/
#csdnblog_content{
width:1000px;
position:absolute;
left:0px;
top:112px;
background:#FFFFFF;
}
/*页面头部块*/
#csdnblog_header{
width:1245px;
height:120px;
background:#8F8F8F;
position:absolute;
left:0px;
top:0px;
}
/*页面查询块*/
#csdnblog_header ul#blogsearchsty{
float:left;
position:absolute;
top:50px;
right:0px;
float:right;
}
/*页面菜单块*/
#csdnblog_header ul#menu{
height:25px;
float:left;
top:90px;
position:absolute;
width:auto;
left:923px;
font-size:12px;
background:#DBC160;
border:1px solid black;
}
#csdnblog_header ul#menu li{
float:left;
width:80px;
text-align:center;
color:#FFFFFF;
}
#csdnblog_header ul#menu li a{
float:left;
color:#FFFFFF;
padding:0 0 0 0;
margin:0 0 0 0;
width:80px;
}
#csdnblog_header ul#menu li a:hover{
color:#7AD67D;
text-decoration:underline;
}
/*页面尾部块*/
#pubfooter{
position:absolute;
left:0px;
}
/*右侧个人blog资料信息块(外)*/
#csdnblog_sidebar {
DISPLAY: inline;
FLOAT: left;
MARGIN: 2px 0px 0px;
TEXT-ALIGN: left;
background-color:#96B0ED;
width:245px;
}
/*右侧个人blog资料信息块(内)*/
#csdnblog_sidebar DIV.gutter {
DISPLAY: inline;
FLOAT: left;
MARGIN: 5px 6px;
OVERFLOW: hidden;
WIDTH:234;
FONT-FAMILY: "Microsoft yahei",verdana,sans-serif;
background-color:#CDD8FA;
}
.aboutauthor dl dt{
border:0px;
width:212px;
height:30px;
padding-top:5px;
}
/*登录,注册菜单选项或已登录用户的菜单项*/
/*页面个人blog菜单管理块*/
#csdnblog_header ul#personalnav{
float:right;
margin:0 1em;
position:absolute;
top:1px;
right:0px;
}
#csdnblog_header UL#personalnav LI A#a_register {
background-color:#c8db4a ;
border:2px dashed #c8db4a;
text-align:center;
color:#fff;
}
#csdnblog_header UL#personalnav LI A#a_register:hover {
background-color:#8CB5F2;
border:2px dashed #8CB5F2;
text-align:center;
color:#000;
text-decoration:underline;
}
#csdnblog_header UL#personalnav LI A {
background-color:#8CB5F2;
border:2px dashed #8CB5F2;
text-align:center;
color:#fff;
}
#csdnblog_header UL#personalnav LI A:hover {
background-color:#c8db4a ;
border:2px dashed #c8db4a;
text-align:center;
color:#000;
text-decoration:underline;
}
.new {
position: absolute;
top: 0px;
right: 0px;
z-index: 200;
height:auto;
}
.default_contents{
border:1px dashed ;
}
注:该css样式将个人信息栏放到了右侧!我将页面头部、边侧栏和正文部分设置为绝对路径,发现顶部的导航条和最下方的版权声明被覆盖了...暂时先不修改,若涉及到CSDN官方的利益问题我再做处理~
/*页面body块样式*/
body{
background:#DBDBDB;
text-align:center;
}
/*整体页面样式*/
#csdnblog_allwrap{
width:900px;
height:auto;
}
/*页面边栏*/
#csdnblog_sidebar{
width:280px;
position:absolute;
left:1000px;
top:115px;
}
/*页面正文*/
#csdnblog_content{
width:1000px;
position:absolute;
left:0px;
top:112px;
background:#FFFFFF;
}
/*页面头部块*/
#csdnblog_header{
width:1245px;
height:120px;
background:#8F8F8F;
position:absolute;
left:0px;
top:0px;
}
/*页面查询块*/
#csdnblog_header ul#blogsearchsty{
float:left;
position:absolute;
top:50px;
right:0px;
float:right;
}
/*页面菜单块*/
#csdnblog_header ul#menu{
height:25px;
float:left;
top:90px;
position:absolute;
width:auto;
left:923px;
font-size:12px;
background:#DBC160;
border:1px solid black;
}
#csdnblog_header ul#menu li{
float:left;
width:80px;
text-align:center;
color:#FFFFFF;
}
#csdnblog_header ul#menu li a{
float:left;
color:#FFFFFF;
padding:0 0 0 0;
margin:0 0 0 0;
width:80px;
}
#csdnblog_header ul#menu li a:hover{
color:#7AD67D;
text-decoration:underline;
}
/*页面尾部块*/
#pubfooter{
position:absolute;
left:0px;
}
/*右侧个人blog资料信息块(外)*/
#csdnblog_sidebar {
DISPLAY: inline;
FLOAT: left;
MARGIN: 2px 0px 0px;
TEXT-ALIGN: left;
background-color:#96B0ED;
width:245px;
}
/*右侧个人blog资料信息块(内)*/
#csdnblog_sidebar DIV.gutter {
DISPLAY: inline;
FLOAT: left;
MARGIN: 5px 6px;
OVERFLOW: hidden;
WIDTH:234;
FONT-FAMILY: "Microsoft yahei",verdana,sans-serif;
background-color:#CDD8FA;
}
.aboutauthor dl dt{
border:0px;
width:212px;
height:30px;
padding-top:5px;
}
/*登录,注册菜单选项或已登录用户的菜单项*/
/*页面个人blog菜单管理块*/
#csdnblog_header ul#personalnav{
float:right;
margin:0 1em;
position:absolute;
top:1px;
right:0px;
}
#csdnblog_header UL#personalnav LI A#a_register {
background-color:#c8db4a ;
border:2px dashed #c8db4a;
text-align:center;
color:#fff;
}
#csdnblog_header UL#personalnav LI A#a_register:hover {
background-color:#8CB5F2;
border:2px dashed #8CB5F2;
text-align:center;
color:#000;
text-decoration:underline;
}
#csdnblog_header UL#personalnav LI A {
background-color:#8CB5F2;
border:2px dashed #8CB5F2;
text-align:center;
color:#fff;
}
#csdnblog_header UL#personalnav LI A:hover {
background-color:#c8db4a ;
border:2px dashed #c8db4a;
text-align:center;
color:#000;
text-decoration:underline;
}
.new {
position: absolute;
top: 0px;
right: 0px;
z-index: 200;
height:auto;
}
.default_contents{
border:1px dashed ;
}
注:该css样式将个人信息栏放到了右侧!我将页面头部、边侧栏和正文部分设置为绝对路径,发现顶部的导航条和最下方的版权声明被覆盖了...暂时先不修改,若涉及到CSDN官方的利益问题我再做处理~
相关文章推荐
- 图久网在csdn开通了自己的博客
- 自己动手编写CSDN博客备份工具-blogspider
- 自己动手编写CSDN博客备份工具-blogspider之源码分析(1)
- 自己动手编写CSDN博客备份工具-blogspider之源码分析(2)
- 利用Scrapy爬取自己的CSDN博客
- 恭喜自己成为CSDN博客专家
- 在CSDN自己的博客栏新增一个友情链接
- 如何快速获得自己的所有csdn博客地址
- csdn博客利用github打造自己的专属域名
- 我为何放弃在CSDN博客记录自己的学习
- 恭喜自己获得CSDN博客颁发“准专家”勋章
- csdn设置自己的博客栏目
- 在CSDN上开通博客,是自己的一个开始
- 如何在自己的CSDN博客中增添【高大上】的博客栏目?
- 祝贺自己CSDN博客上的博文《软件开发高手须掌握的4大SQL精髓语句(一)》浏览量突破1000次
- 祝贺自己在CSDN的博客当选为“专家博客”
- 自己动手编写CSDN博客备份工具-blogspider之源码分析(2)
- 自己动手编写CSDN博客备份工具-blogspider之源码分析(3)
- 自己动手编写CSDN博客备份工具-blogspider源码下载(4)
- csdn博客利用github打造自己的专属域名