容容幸福MAP

其實是為了記錄寫這一篇，因為重做時，發現都忘光光了。有喜歡我這個版型的人也可以照著做喔^^

   

 

1.首先在「管理後台」選擇「部落格」，再選擇「自定樣式」，選擇「CSS 原始碼編輯」，按「前往」。

 

 

2.將以下css碼複製貼上，記得把圖片網址換成自己大圖的圖片（900*350），然後按「預覽」看樣貌，沒問題再按下「儲存」鍵。

 

  

css碼

可以把圖片放在flickr，複製圖片的連結，貼上？的位置

------------------------------------------------------------------------------

/*主視覺在此更換*/

#banner{background: url(？) left top no-repeat;}

 

/*--------------------------reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0;}

table {border-collapse:collapse;border-spacing:0;}

fieldset,img {border:0;}

address,caption,cite,code,dfn,em,th,var {font-style:normal;font-weight:normal;}

ol,ul {list-style:none;}

caption,th {text-align:left;}

h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}

q:before,q:after {content:'';}

abbr,acronym {border:0;}

pre{font-size: 1em ;}

.article-content{ _height: 1% ; overflow: hidden ; _overflow: none;}

.article-content p{margin-bottom: 1em;}

a { text-decoration: none; }

br{letter-spacing: normal;}

 

/*--------------------------all setting*/

 

body {

font-size: 12px;

font-family: arial, verdana;

color: #555;

line-height: 160%;

background:#fff;}

 

a { color: #333; }

a:hover { color: #ccc; }

 

#body-div { }

 

/*--------------------------authority*/

#authority {

background: #eee;

border-bottom: 1px dotted #ddd;

text-align: center;

line-height: 25px; }

#authority a{margin:0px 5px}

/*--------------------------container*/

 

#container2 {

width: 900px;

margin: 10px auto; }

 

/*--------------------------header*/

#header {

position: relative;

padding-top: 50px;

height: 390px;

background: #f6f6f6; }

 

#login-bar {

color: #666;

position: absolute;

right: 10px;

top: 415px;

text-align: right; }

 

#login-bar .separator { color: #ccc; }

 

#banner {

height: 350px;

border-top: 5px solid #fff;

border-bottom: 5px solid #fff;

}

 

#banner h1 {

position: absolute;

left: 10px;

top: 5px;

height: 25px; }

 

#banner h1 a { font: bold 15px arial; }

 

#banner h2 {

position: absolute;

left: 10px;

top: 25px;

height: 20px;

line-height: 20px;

width: 900px;

overflow: hidden; }

 

#banner .skiplink { display: none; }

 

#banner #blog-category {

position: absolute;

left: 10px;

top: 415px;

width: 150px;

height: 20px;

line-height: 20px; }

 

/*--------------------------navigation*/

#navigation {

position: absolute;

left: 165px;

top: 415px;

*top: 416px;

width: 200px;

height: 20px; }

 

#navigation li {

float: left;

height: 20px; }

 

#navigation a {

display: block;

line-height: 20px;

padding: 0px 3px; }

 

#navigation a:hover {

background: #aaa;

color: #fff; }

 

/*--------------------------main*/

#main {

overflow: hidden;

_overflow: none;

_height: 1%;

padding-top: 20px; }

 

/*--------------------------content*/

#content {

overflow: hidden;

float: left;

width: 650px; }

 

#spotlight {

background: #eee;

margin: 0 0 10px 0;

padding: 10px;

border-bottom: 2px solid #ccc; }

 

#view-mode { margin-bottom: 20px; }

 

.article { margin-bottom: 20px; }

 

.publish {

text-transform: uppercase;

font-size: 11px;

color: #333;

height: 12px;

line-height: 12px;

margin-bottom: 5px;

border-left: 12px solid #aaa;

padding-left: 5px; }

 

.title {

background: #eee;

margin: 0 0 10px 0;

padding: 5px 10px ;

border-bottom: 2px solid #ccc; }

 

.article-body { text-align: right; }

 

.article-content {

font-size: 13px;

line-height: 180%;

letter-spacing: 0.05em;

text-align: left;

margin: 10px 0;

color: #444; }

 

.article-content a { border-bottom: 1px dotted #aaa; }

.more a { border: 0; }

.bookmark,.author,.forward { color: #999; }

 

.article-footer {

border: 1px dashed #ddd;

padding: 5px 10px;

_height: 1%;

color: #666;

margin: 10px 0; }

 

.article-footer a { color: #999; }

.article-footer a:hover { color: #636363; }

 

.back-to-top {

text-transform: uppercase;

text-align: right; }

 

.back-to-top a {

padding: 0px 3px;

background: #aaa;

color: #fff;

font: 11px verdana; }

 

/*--------------------------list*/

.main-list table {

width: 100%;

margin: 10px 0; }

 

.main-list th {

background: #eee;

color: #333;

padding: 3px; }

 

.list-num { width: 30px; }

.list-date { width: 120px; }

.list-comment {

width: 50px;

background: #ccc; }

.list-visit {

width: 70px;

background: #ddd; }

.main-list td {

padding: 3px;

border-bottom: 1px solid #fff; }

 

/*--------------------------post-box*/

.user-post-box { margin: 20px 0; }

 

.user-post-title {

margin: 10px 0;

background: #999;

color: #fff;

padding: 5px 10px; }

 

.post-comment {

width: 100px;

text-align: center;

height: 25px;

line-height: 25px;

margin: 10px auto;

background: #ccc; }

 

#content .post-comment a {

display: block;

width: 100%;

height: 100%; }

 

.single-post {

overflow: hidden;

_overflow: none;

_height: 1%;

border: 1px dashed #ccc;

padding: 5px;

margin: 10px 0;

position: relative; }

 

.post-info {

background: #eee;

height: 50px;

margin-bottom: 5px;

padding-left: 60px;

line-height: 25px; }

 

.post-time {

position: absolute;

left: 80px;

top: 25px; }

 

.post-photo {

position: absolute;

left: 5px;

top: 5px;

width: 50px;

height: 50px; }

 

.post-photo img {

width: 50px;

height: 50px; }

 

.post-text { padding: 5px; }

 

.reply-text {

border-top: 1px dashed #ccc;

text-align: right;

color: #999;

padding: 5px; }

 

.single-post.secret .post-text {

float: none;

width: auto; }

 

#trackback-box #trackback-url {

margin:10px 0;}

#trackback-text .post-info {

padding: 5px;

height: 25px; }

#trackback-box .post-text {

width: auto ;

float: none ; }

 

/*--------------------------comment-form */

#comment-form {

background: #eee;

padding: 5px;

width: 640px;

margin: 10px auto; }

 

#comment-form p {

color: #aaa;

text-align: right;

margin: 0px 10px 5px; }

 

#comment-form table {

width: 100%;

border: none; }

 

#comment-form table tr.comment-form-title { display: none; }

 

#comment-form table td {

color: #999;

vertical-align: top;

border: none;

padding: 2px 5px; }

 

#comment-form table th {

color: #666;

vertical-align: top;

width: 80px;

border: none;

padding: 2px 5px;

text-align: right; }

#comment-form input {

height: 17px;

font-family: Arial;

font-size: 11px;

color: #000;

border: none;

border-bottom: 1px solid #ccc;

background: none;

width: 90%; }

 

#comment-form input.radio {

border: none;

width: auto;

background: none;

margin: 0;

padding: 0; }

 

#comment-form input#blogcommenttext_name { width: 87%; }

#comment-form input#send-comment {

border: 0;

width: 80px;

background: #999;

color: #fff; }

#comment-form textarea {

width: 99%;

height: 90px;

font-family: Arial;

font-size: 11px;

line-height: 18px;

color: #000;

border: 1px solid #ccc;

background: #fff; }

 

/*--------------------------pages*/

.page { margin: 10px 0; }

.page a {

padding:0px 5px;}

.page SPAN {

background:#aaa;

padding:0px 5px;

color:#fff;}

 

/*--------------------------links*/

#links {

overflow: hidden;

float: right;

width: 230px; }

 

.box {

background: #ccc;

margin-bottom: 15px; }

 

.box-title {

background: #ddd;

padding: 10px;

font: bold 13px arial;

color: #333;

border-bottom: 1px dashed #aaa; }

 

.box-text { padding: 10px; }

 

.box-more { text-align: right; }

 

.box-more a {

padding: 2px 5px;

background: #ddd;

border: 1px solid #bbb; }

 

#visitor ul, #crumb ul {

overflow: hidden;

_overflow: none;

_height: 1%; }

 

#visitor li, #crumb li {

float: left;

line-height: 0; }

 

#visitor li a, #crumb li a { border: 0; }

 

#visitor li img, #crumb li img {

margin: 0 2px 2px 0;

display: inline;

width: 50px;

height: 50px; }

 

#broadcast ul {

overflow: hidden;

_overflow: none;

_height: 1%;

margin-bottom: 10px; }

 

#broadcast .broadcast-photo {

float: left;

width: 40px;

margin-right: 5px;

display: inline;

line-height: 20px; }

 

#broadcast .broadcast-time,

#broadcast .broadcast-text {

float: right;

width: 160px;

line-height: 20px !important; }

#broadcast .broadcast-text a { color:#767676; line-height: 20px }

#broadcast .broadcast-time a {

color: #fff;

padding: 2px 3px;

background: #999;

font: 10px verdana;

line-height: 20px; }

#broadcast .broadcast-time span { display: none; }

 

#headshot ul {

overflow: hidden;

_overflow: none;

_height: 1%; }

#headshot li {

width: 100px;

float: right; }

#headshot li a { padding: 2px; }

 

#headshot-img {

float: left !important;

width: 110px !important; }

#headshot-img img { border: 3px solid #eee; }

 

#search ul {

overflow: hidden;

_overflow: none;

_height: 1%; }

#search li { float: left; }

#search li input {

border: 1px solid #ddd;

border-left: 1px solid #999;

border-top: 1px solid #999;

background: none;

margin-right: 5px;

height: 20px;

width: 120px; }

 

#search li input#search-submit {

border: 1px solid #ddd;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

height: 22px;

width: 50px;

padding: 0;

color: #666; }

 

#feed a {

margin-bottom: 5px;

padding: 5px;

width: 90%; }

 

#calendar table {

width: 80%;

margin: 0 auto; }

 

#calendar table th { text-align: center; }

 

#calendar table td {

font-size: 10px;

text-align: center;

border: 2px solid #ccc;

line-height: 20px; }

 

#calendar table td a {

background: #999;

display: block;

color: #fff;

border: 0;

-khtml-border-radius: 7px;

-moz-border-radius: 7px;

-webkit-border-radius: 7px; }

 

#category li { margin-left: 15px; }

 

#archive select {

width: 200px;

margin-bottom: 5px;

background: #fff;

border: 1px solid #ccc;

font: 11px arial; }

 

#murmur .murmur-time {

color: #666;

font: 11px Century Gothic; }

#murmur .murmur-text { padding: 5px 0; }

 

#latest-comment li,

#subscription li,

#latest-trackback li {

margin-bottom: 2px;

color: #666;

font-size: 12px; }

 

#latest-comment a,

#subscription a,

#latest-trackback a {

display: block;

width: 99%; }

 

/*--------------------------footer*/

#footer {

clear: both;

background: #f6f6f6;

padding: 20px 0;

text-align: center;

_height: 1%; }

-----------------------------------------------------------------------------------

 

祝大家一切順利^^