装饰了一下博客

时间:2022-11-06 17:58:37

     本来呢,选了一种博客园的博客模板,这几天看着看着,觉得没有特点,而且老是和别人的重复。

     嘿嘿,年轻人嘛总是喜欢特别一点,所以这两天就禁用了模板css,抽空自己写几个样式。我发觉博客园是不是不可以用图片来装饰自己的博客?反正我是没找到方法,刚开博客嘛,没办法。

    刚刚搞完,觉得蛮简洁的,现在把代码发出来共享一下~

 

装饰了一下博客装饰了一下博客代码
   
   
   
* {
margin
: 0 ;
padding
: 0 ;
text-decoration
: none ;
}
body, ui, li
{
font-family
: 'Microsoft YaHei','微软雅黑',Tahoma ;
font-size
: 14px ;
}
body
{
background
: none repeat scroll 0 0 #C8E7F1 ;
}
ul
{
list-style
: none outside none ;
}
.post h2
{
border-bottom
: 1px dotted #33CCFF ;
}
.post h2 a
{
color
: #33CCCC ;
font-size
: 30px ;
}
#EntryTag a
{
color
: Cyan ;
font-size
: 20px ;
}
.post p
{
}
.postTitle
{
}
.postFoot
{
border-bottom
: 3px dashed #3399FF ;
font-family
: Comic Sans MS ;
padding
: 10px ;
margin-bottom
: 5px ;
}
.postTitle a
{
color
: #339999 ;
font-size
: large ;
}
.date
{
border-bottom
: 1px dotted ;
color
: #33CCFF ;
font-family
: inherit ;
font-size
: 30px ;
font-weight
: bold ;
}
#tagline
{
color
: #CCCC00 ;
font-family
: Comic Sans MS ;
font-size
: 20px ;
left
: 481px ;
position
: relative ;
top
: -64px ;
}
#Pola_Name
{
color
: #99CC66 ;
font-size
: 30px ;
}
#header
{
border
: 1px hidden SeaGreen ;
height
: 230px ;
margin
: 0 185px ;
width
: 900px ;
}
#Pola_BigName
{
color
: #CCCC99 ;
font-family
: Trebuchet MS ;
font-size
: 80px ;
left
: 82px ;
position
: relative ;
top
: 70px ;
}
#wrapper
{
background
: none repeat scroll 0 0 white ;
border
: 5px solid PaleTurquoise ;
float
: left ;
margin
: 0 185px ;
width
: 900px ;
}
#main
{
float
: left ;
padding
: 10px ;
width
: 600px ;
}
#rightmenu
{
border-left
: 1px dashed SeaGreen ;
float
: right ;
padding
: 8px ;
position
: relative ;
width
: 260px ;
}
#footer
{
font-family
: 'Microsoft YaHei','微软雅黑',Tahoma ;
text-align
: center ;
}

 

 

     因为布局问题,main左浮动,rightmenu右浮动,不过这样他们脱离了文档流了,为了wrapper能够高度自适应,把wrapper也给左浮动了。

     本来,多一个DIV也许就可以解决此时wrapper的居中的问题,不过貌似在这里没办法让博客园给我在页面里面加个div,所以没办法,我做了件违反表现与行为分离法则的事。。

装饰了一下博客装饰了一下博客代码
   
   
   
var windowidth = parseInt(window.screen.width);
var wrapper = document.getElementById( " wrapper " );
var header = document.getElementById( " header " );
wrapper.style.marginLeft
= (windowidth - 900 ) / 2-5+"px";
header.style.marginLeft = (windowidth - 900 ) / 2+"px";

 

希望前端强的朋友可以帮帮我,找出个不用JS的方案。。