曉風中的晴天日記

因為有不少朋友說喜歡我之前的網誌版型
在此謝謝大家對於晴兒網誌設計的垂青啦

所以在獨樂樂不如眾樂樂的想法下
決定把之前的二個版型分享出來
有需要的朋友歡迎抱走
讓帥帥的速水(速水茂虎道)攻佔無名吧!!(大笑)

當然抱走的、有問題的、純哈拉的朋友
也歡迎留言唷~~



這二個版型事實上是同一個,只是背景和版面不盡相同而已
所以喜歡那一版的 就把下方的Css碼Copy回去貼上就好了。
我假設大家都會貼了唷....真的不知道怎麼做的人再留言問我好囉!!

第一版 時裝版的MOCO(這個版頭的MOOC是12/21 見面會上販售的滑鼠墊裡的生寫真,在別的地方是見不到的唷)
喜歡的朋友只要把版型示意圖下方 橘色的程式碼Copy就可以了



/*將所有樣式預先標準化
------------------------------------------------------------------------------------------*/
/*margin 及 padding 的標準化*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, em, pre, form, fieldset, input, p, blockquote, th, tr, td{
padding:0;
margin:0;
font-family:"新細明體", "細明體", Arial, Helvetica, sans-serif;
}
/*標題 font-size 的標準化 */
h1, h2, h3, h4, h5, h6{font-size:100%;}

/*移除清單的 list-style 樣式*/
ol, ul{list-style:none;}

/*將 font-style 及 font-weight 標準化成 normal */
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal;}

/*移除 table 的外框*/
table{
border-collapse:collapse;
border-spacing:0;
clear:both;
}

/*移除 fieldset 和 img 的外框*/
fieldset, img{
border:0;
}

/*caption 和 th 的文字要向左對齊*/
caption, th{text-align:left;}

/*移除 q 的引號*/
q:before, q:after{}

body {
margin:0px;
font:.8em Arial;
background-image:url(http://f8.wretch.yimg.com/sunny989/32764/o1007786050.jpg);
background-repeat:repeat-y;
background-position:center top;
}
a:link{
text-decoration:none;
}
#main2{
}
/* container
--------------------------*/

#container1 {
margin:0px auto;
width:950px;
}
/* banner
--------------------------*/
#banner {
margin-bottom:20px;
height:600px;
background-image:url(http://f8.wretch.yimg.com/sunny989/32764/o1007793597.jpg);
background-repeat:no-repeat;
background-position:left top;
}
#pageheader {
padding:550px 0 0 450px;
font-style:normal;

}
#banner h1 {
margin-top:0px;
}
#banner h1 a {
color:#777;
}
#banner h1 a:hover {
color:#333;
text-decoration:none;
}
/* content
--------------------------*/
#content {
width:720px;
float:left;
margin:0 0 0 5px;
}
#content a {
color:#547F8F;
}
#content a:hover {
color:#2B5D70;
text-decoration:none;
}
.date {
font-size:20px;
letter-spacing:-1px;
text-align:right;
padding-top:1em;
padding-right:1em;
background-image:url(http://f8.wretch.yimg.com/sunny989/32764/1007780432.jpg);
background-repeat:no-repeat;
background-position:left top;
height:100px;
}
.datediv{
FONT-FAMILY:georgia, Arial, taipei, Helvetica, sans-serif;
}
.blogbody {
padding-bottom:20px;
margin-bottom:20px;
}
.blogbody2 {

}
.articletext {
padding:5px 20px 0px 20px;
}
.posted {
text-align:center;
}
.title {
margin-top:0px;
}
/* comments
--------------------------*/
.total-comments-div {
width:300px;
margin-left:30px;
}
.comments-head {
border-bottom:1px solid black;
font-weight:bold;
margin-top:15px;
}
.comments-body {
}
.comments-post {
font-size:11px;
color:#777;
text-align:right;
}
.total-comments-div form {
margin:0px;
}
#text {
width:80%;
}

/* links
--------------------------*/
#links {
float:right;
width:210px;
margin:0 0.5em 0 0;
}
#links a {
display:block;
color:#728A3E;
text-decoration:none;
border-bottom:1px solid #eee;
font-size:12px;
padding:2px 5px 2px 10px;
}
#links a:hover {
color:#4381A1;
}
#links br {display:none;}

.sidetitle {
padding:0.5em 1em;
font-weight:bold;
letter-spacing:2px;
margin:0.5em 0;
text-align:center;
}
#boxProfile, #boxSlideShow, #boxNewArticle, #boxCategory, #boxDate, #boxSearch, #scupioSearch, #boxNewComment, #boxRssList, #boxNewTrackback, #boxFolder, #boxCounter {
margin-bottom:30px;
background-image:url(http://l.yimg.com/e/style/10/1006/1110951586.jpg);
background-repeat:repeat-y;
background-position:center top;
}
.boxProfile0, .boxSlideShow0, .boxNewArticle0, .boxCategory0, .boxDate0, .boxSearch0, .scupioSearch0, .boxNewComment0, .boxRssList0, .boxNewTrackback0, .boxFolder0, .boxCounter0{
background-image:url(http://l.yimg.com/e/style/10/1006/1110951588.jpg);
background-repeat:no-repeat;
background-position:center top;
padding:20px 0 0 0;
display:block;
}
.boxProfile1, .boxSlideShow1, .boxNewArticle1, .boxCategory1, .boxDate1, .boxSearch1, .scupioSearch1, .boxNewComment1, .boxRssList1, .boxNewTrackback1, .boxFolder1, .boxCounter1{
background-image:url(http://l.yimg.com/e/style/10/1006/1110951587.jpg);
background-repeat:no-repeat;
background-position:center bottom;
padding:0 0 50px 0;
display:block;
}
.side {
background:transparent;
border:6px solid #fff;
border-bottom:0px;
border-top:2px solid #fff;
padding:0 0.5em;
}
#boxSearch form {
margin-bottom:0px;
}

/* links detail
--------------------------*/
#links .calendar a,
#links #boxSlideShow a,
#links .syndicate a ,
#links .powered a ,
#links .sidetitle a {
display:inline;
background:transparent;
border:0px;
}
.calendar {
font-size:12px;
width:210px;
height:200px;
margin-bottom:20px;
}
.calendar .calendar {
background:transparent;
width:auto;
height:auto;
margin-bottom:0px;
}
.boxCategory1,
.boxProfile1 {
font-size:0px;
letter-spacing:-2px;
color:#eee;
}
#links .boxCategory1 a,
#links .boxProfile1 a {
font-size:12px;
letter-spacing:0px;

}
#links .boxSearch1 br {display:block;}
#links .sidetitle a img {
height:13px;

}
.boxNewComment1 {
text-align:right;
color:#666;
font-size:11px;
}
#links .boxNewComment1 a {
text-align:left;
font-size:12px;
}

.boxRssList1 {
color:#666;
font-size:11px;
}
#links .boxRssList1 a {
text-align:right;
font-size:12px;
}

.boxNewTrackback1 {
text-align:right;
color:#666;
font-size:11px;
}
#links .boxNewTrackback1 a {
text-align:left;
font-size:12px;
}
#links .boxNewTrackback1 span a {
font-size:12px;
color:#666;
background:transparent;
display:inline;
margin:0px;
padding:0px;
cursor:default;
}
#links .boxNewTrackback1 span a:hover {
background:transparent;
color:#666;
}
#links .boxCounter1 br {
display:inline;
}
#links .boxCounter1 .side {
padding-left:20px;
}
#links .powered br {
display:block;
}
#links #whowrapper a{width:50px;}
#links2{
}





第二版是奈特啦~也是晴兒的前一個版型,比較特別的是背景全都填滿了絕對彼氏的字樣
喜歡的朋友也只要把版型示意圖下方紫色的程式碼Copy走就OK囉~~



/*將所有樣式預先標準化
------------------------------------------------------------------------------------------*/
/*margin 及 padding 的標準化*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, em, pre, form, fieldset, input, p, blockquote, th, tr, td{
padding:0;
margin:0;
font-family:"新細明體", "細明體", Arial, Helvetica, sans-serif;
}
/*標題 font-size 的標準化 */
h1, h2, h3, h4, h5, h6{font-size:100%;}

/*移除清單的 list-style 樣式*/
ol, ul{list-style:none;}

/*將 font-style 及 font-weight 標準化成 normal */
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal;}

/*移除 table 的外框*/
table{
border-collapse:collapse;
border-spacing:0;
clear:both;
}

/*移除 fieldset 和 img 的外框*/
fieldset, img{
border:0;
}

/*caption 和 th 的文字要向左對齊*/
caption, th{text-align:left;}

/*移除 q 的引號*/
q:before, q:after{}

body {
margin:0px;
font:.8em Arial;
background-image:url(http://f8.wretch.yimg.com/sunny989/32764/o1007760542.jpg);
background-repeat:repeat-y;
background-position:center top;
}
a:link{
text-decoration:none;
}
#main2{
}
/* container
--------------------------*/

#container1 {
margin:0px auto;
width:950px;
}
/* banner
--------------------------*/
#banner {
margin-bottom:20px;
height:600px;
background-image:url(http://f8.wretch.yimg.com/sunny989/32764/o1007760543.jpg);
background-repeat:no-repeat;
background-position:left top;
}
#pageheader {
padding:570px 0 0 450px;
font-style:normal;

}
#banner h1 {
margin-top:0px;
}
#banner h1 a {
color:#777;
}
#banner h1 a:hover {
color:#333;
text-decoration:none;
}
/* content
--------------------------*/
#content {
width:720px;
float:left;
margin:0 0 0 5px;
}
#content a {
color:#547F8F;
}
#content a:hover {
color:#2B5D70;
text-decoration:none;
}
.date {
font-size:20px;
letter-spacing:-1px;
text-align:right;
padding-top:1em;
padding-right:1em;
background-image:url(http://f8.wretch.yimg.com/sunny989/32764/1007780432.jpg);
background-repeat:no-repeat;
background-position:left top;
height:100px;
}
.datediv{
FONT-FAMILY:georgia, Arial, taipei, Helvetica, sans-serif;
}
.blogbody {
padding-bottom:20px;
margin-bottom:20px;
}
.blogbody2 {

}
.articletext {
padding:5px 20px 0px 20px;
}
.posted {
text-align:center;
}
.title {
margin-top:0px;
}
/* comments
--------------------------*/
.total-comments-div {
width:300px;
margin-left:30px;
}
.comments-head {
border-bottom:1px solid black;
font-weight:bold;
margin-top:15px;
}
.comments-body {
}
.comments-post {
font-size:11px;
color:#777;
text-align:right;
}
.total-comments-div form {
margin:0px;
}
#text {
width:80%;
}

/* links
--------------------------*/
#links {
float:right;
width:210px;
margin:0 0.5em 0 0;
}
#links a {
display:block;
color:#728A3E;
text-decoration:none;
border-bottom:1px solid #eee;
font-size:12px;
padding:2px 5px 2px 10px;
}
#links a:hover {
color:#4381A1;
}
#links br {display:none;}

.sidetitle {
padding:0.5em 1em;
font-weight:bold;
letter-spacing:2px;
margin:0.5em 0;
text-align:center;
}
#boxProfile, #boxSlideShow, #boxNewArticle, #boxCategory, #boxDate, #boxSearch, #scupioSearch, #boxNewComment, #boxRssList, #boxNewTrackback, #boxFolder, #boxCounter {
margin-bottom:30px;
background-image:url(http://l.yimg.com/e/style/10/1006/1110951586.jpg);
background-repeat:repeat-y;
background-position:center top;
}
.boxProfile0, .boxSlideShow0, .boxNewArticle0, .boxCategory0, .boxDate0, .boxSearch0, .scupioSearch0, .boxNewComment0, .boxRssList0, .boxNewTrackback0, .boxFolder0, .boxCounter0{
background-image:url(http://l.yimg.com/e/style/10/1006/1110951588.jpg);
background-repeat:no-repeat;
background-position:center top;
padding:20px 0 0 0;
display:block;
}
.boxProfile1, .boxSlideShow1, .boxNewArticle1, .boxCategory1, .boxDate1, .boxSearch1, .scupioSearch1, .boxNewComment1, .boxRssList1, .boxNewTrackback1, .boxFolder1, .boxCounter1{
background-image:url(http://l.yimg.com/e/style/10/1006/1110951587.jpg);
background-repeat:no-repeat;
background-position:center bottom;
padding:0 0 50px 0;
display:block;
}
.side {
background:transparent;
border:6px solid #fff;
border-bottom:0px;
border-top:2px solid #fff;
padding:0 0.5em;
}
#boxSearch form {
margin-bottom:0px;
}

/* links detail
--------------------------*/
#links .calendar a,
#links #boxSlideShow a,
#links .syndicate a ,
#links .powered a ,
#links .sidetitle a {
display:inline;
background:transparent;
border:0px;
}
.calendar {
font-size:12px;
width:210px;
height:200px;
margin-bottom:20px;
}
.calendar .calendar {
background:transparent;
width:auto;
height:auto;
margin-bottom:0px;
}
.boxCategory1,
.boxProfile1 {
font-size:0px;
letter-spacing:-2px;
color:#eee;
}
#links .boxCategory1 a,
#links .boxProfile1 a {
font-size:12px;
letter-spacing:0px;

}
#links .boxSearch1 br {display:block;}
#links .sidetitle a img {
height:13px;

}
.boxNewComment1 {
text-align:right;
color:#666;
font-size:11px;
}
#links .boxNewComment1 a {
text-align:left;
font-size:12px;
}

.boxRssList1 {
color:#666;
font-size:11px;
}
#links .boxRssList1 a {
text-align:right;
font-size:12px;
}

.boxNewTrackback1 {
text-align:right;
color:#666;
font-size:11px;
}
#links .boxNewTrackback1 a {
text-align:left;
font-size:12px;
}
#links .boxNewTrackback1 span a {
font-size:12px;
color:#666;
background:transparent;
display:inline;
margin:0px;
padding:0px;
cursor:default;
}
#links .boxNewTrackback1 span a:hover {
background:transparent;
color:#666;
}
#links .boxCounter1 br {
display:inline;
}
#links .boxCounter1 .side {
padding-left:20px;
}
#links .powered br {
display:block;
}
#links #whowrapper a{width:50px;}
#links2{
}