自己写的CSDN博客css样式

    技术2023-03-19  40

    突然觉得自己的博客样式过于单调,于是动手修改之,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样式将个人信息栏放到了右侧!我将页面头部、边侧栏和正文部分设置为绝对路径,发现顶部的导航条和最下方的版权声明被覆盖了...暂时先不修改,若涉及到官方的利益问题我再做处理~

    最新回复(0)