其實是為了記錄寫這一篇,因為重做時,發現都忘光光了。有喜歡我這個版型的人也可以照著做喔^^
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%; }
-----------------------------------------------------------------------------------
祝大家一切順利^^
留言列表