本来呢,选了一种博客园的博客模板,这几天看着看着,觉得没有特点,而且老是和别人的重复。
嘿嘿,年轻人嘛总是喜欢特别一点,所以这两天就禁用了模板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的方案。。