ELAX

痞客邦部落格樣式 - 簡單鬆餅 (按比例縮放)

此樣式有需要的人都可以拿去用喔！複製下面的CSS貼在自己的[後台>樣式管理>部落格 CSS 原始碼]就行了。

痞客邦樣式都沒在更新了，只好自立自強，尤其"寬度"，舊版的都好窄，這版是寬度按瀏覽器比例縮放的喔

有下面黃底字樣的都可以自己修改喔！

/*XXXXX*/

其他沒標得要自行研究XD，輔助連結：
【部落格實戰】10 | 部落格版型CSS的修改
【CSS】- PIXNET 痞客邦部落格 - 各區塊名稱|板面修改

body,div,dl,dt,dd,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; width: 100%; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,th,var { font-style: normal; font-weight: normal; }
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 ; }
ol,ul { margin-left: 2em; padding: 0; }
ol li { list-style: decimal outside; }
ul li { list-style: disc outside; }

/*input{ overflow: visible; }*/
.article-content { overflow: hidden ; }
.article-content p{ margin-bottom: 1em; }
.article-content img { max-width: 100%; }
.article-content ul, .article-content ol, .author { clear: both; }
.article-head, .article-head li,
.recommended-posts ul, .recommended-posts li,
.article-footer ul, .article-footer li,
.user-post-text ul, .user-post-text li,
.box-text ul, .box-text li { list-style: none; padding: 0; margin: 0; }
#toolbar-box ul, #toolbar-box li { list-style: none; margin: 0; }
/*reset-over*/

html {}
body {
color: #666;
font-size: 13px;
font-family: Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
line-height: 154%;

margin: 0;
}
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; }
input, textarea {
vertical-align: middle;
font-family: Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
font-size: 1.0em;
color: #000;
border: 1px solid #ddd;
background: #f5f5f5;
padding: 2px 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
select {
font-family: Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
font-size: 1.0em;
color: #333;
border: 1px solid #ddd;
background: #f5f5f5;
padding: 2px;
}
#body-div {}
#authority {
width: 1150px;
text-align: center;
font-size: 12px;
background: #ddd;
padding: 8px 0;
margin: 0 auto;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
-moz-box-shadow: 1px 1px 2px #aaa; /* FF3.5+ */
-webkit-box-shadow: 1px 1px 2px #aaa; /* Saf3.0+, Chrome */
box-shadow: 1px 1px 2px #aaa; /* Opera 10.5, IE 9 */
}
#authority a {
color: #999;
background: #f5f5f5;
padding: 2px 5px;
margin: 0 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#container {}
#container2 {}
#container3 {
overflow: hidden;
position: relative;
width: 70%;/*版面的總寬度*/
padding: 0 0 10px;
background: #fff;
padding: 25px 0 10px;
margin: 15px auto 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 1px 1px 2px #aaa; /* FF3.5+ */
-webkit-box-shadow: 1px 1px 2px #aaa; /* Saf3.0+, Chrome */
box-shadow: 1px 1px 2px #aaa; /* Opera 10.5, IE 9 */
}
#header {
position: relative;
height: 300px;
padding: 50px 0 0;
}
#login-bar {
color: #aaa;
position: absolute;
top: -20px;
right: 1px;
text-align: right;
width: 928px;
font-size: 11px;
border-bottom: 1px dotted #ccc;
padding: 0 10px;
}
#login-bar  a { color: #999; }
#login-bar  a:hover { color: #000; }
#banner {
height: 300px;
background: url() no-repeat;
}
#banner h1 {
position: absolute;
top: 10px;
left: 0;
width: 10%;/*部落格標題寬度*/
text-align: center;
line-height: 30px;
height: 30px;
overflow: hidden;
font-size: 15px;
border-right: 1px solid #ccc;
padding: 0 20px;
}
#banner h2 {
position: absolute;
top: 10px;
padding-left: 18%; /*部落格描述內距*/
width: 100%;/*部落格描述寬度*/
text-align: left;
height: 30px;
line-height: 30px;
overflow: hidden;
}
.skiplink {
position: absolute;
top: -20px;
left: 10px;
font-size: 11px;
}
.skiplink a { color: #999; }
#blog-category {
position: absolute;
top: -20px;
left: 65px;
font-size: 11px;
color: #aaa;
}
#blog-category a { color: #999; }
#navigation {
position: absolute;
top: 315px;
right: 40px;
width: 270px;
height: 35px;
background: #fff url(https://pic.pimg.tw/pixnetvisual/7b50563db8d70081580c27a1f139cdc8.gif);
padding: 0 0 0 10px;
margin: 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#navigation li {
float: left;
list-style: none;
margin: 0;
}
#navigation li a {
display: block;
width: 100%;
height: 35px;
font-size: 0;
text-indent: -5000px;
}
#navigation li#link-album { width: 60px; }
#navigation li#link-blog { width: 50px; }
#navigation li#link-guestbook { width: 85px; }
#navigation li#link-profile { width: 65px; }
#main {
overflow: hidden;
padding: 25px;
}
#content {
float: left;
width: 70%;/*文章區域的寬度*/
}
#spotlight {
margin: 0 auto 20px;
}
#spotlight h5 {
color: #000;
font-size: 15px;
border-bottom: 1px dashed #bbb;
padding: 5px;
}
#spotlight-text {
padding: 5px;
}
.article {
clear: both;
position: relative;
margin: 0 auto 20px;
}
.article-head {
overflow: hidden;
height: 35px;
line-height: 35px;
padding: 0;
box-sizing: border-box;
}
.publish {
float: left;
width: 110px;
text-align: right;
font-size: 11px;
}
.time { display: none; }
.date { font-size: 13px; }
.title {
float: left;
width: 70%;/*文章標題寬度*/
font-size: 15px;
line-height: 34px;
}
.title a {
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
display: block;
margin-left: 20px;/*文章標題與日期間隔距離*/
}
.title img { vertical-align: middle; }
.title img[alt="置頂"],
.title img[alt="隱藏"],
.title img[alt="密碼文章"],
.title img[alt="共同作者"],
.title img[alt="好友文章"] {
position: absolute;
left: 0;
}
.article-body {
padding: 10px 10px 0;
}
.bookmark {
font-size: 11px;
color: #aaa;
margin: 5px auto;
}
.bookmark span {}
.article-content {
width: 90%;/*文章內文寬度*/
overflow: hidden;
line-height: 200%;
padding: 0 0 20px;
word-break: break-all;
}
.article-content a { text-decoration: underline; }
#content .recommended-posts1 { margin: 1em 0 1em 1.5em; }
#content .recommended-posts3 { margin: 1em 0 1em 2em; }
#content .recommended-posts1 h5 span ,
#content .recommended-posts3 h5 span { font-size: 1.1em; font-weight: normal; margin-top: 10px; }
#content .recommended-posts1 .recommended-post-image { border: 1px solid #ccc; }
#content .recommended-posts1 ul { top: 35px; }
#content .recommended-posts3 ul { border: none; border-left: 1px solid #ddd; }
#content .recommended-posts3 ul li { border: 0; border-right: 1px solid #ddd; }
#content .recommended-posts1 ul li a ,
#content .recommended-posts3 ul li a { color: #999; text-decoration: none; }
#content .recommended-posts3 ul li a:hover { color: #333; background: #f5f5f5; }
#content .recommended-posts1 ul li a.selected { background: none; }
#content .recommended-posts3 ul li a img { border-color: #ccc; }
#content .recommended-posts3 ul li a:hover img { background: #fff; }
.author, .forward {
font-size: 11px;
color: #999;
}
.author a, .forward a { color: #666; }
.forward img { vertical-align: middle; }
.article-footer {
font-size: 11px;
color: #999;
border-top: 1px dashed #bbb;
padding: 5px 10px;
margin: 10px 0 0;
}
.article-footer a {
color: #888;
word-break: break-all;
}
.refer, .history {
float: left;
width: 50%;
}
.back-to-top {
clear: both;
text-align: right;
}
.back-to-top a {
color: #aaa;
text-decoration: underline;
}
.user-post-title {
height: 25px;
line-height: 25px;
background: url(https://pic.pimg.tw/pixnetvisual/92032e3d3dcabdb7bc9d6a769184f8a4.jpg?v=1288345368) no-repeat 15px 0;
}
.user-post-title span { display: none; }
.user-post-title img { margin: 7px 0 0; }
#comment-title { background-position: 15px -25px; }
#trackback-url { margin: 10px auto; }
#trackback-url input { margin-right: 3px; }
#trackback-url input#trackback-input { width: 50%; }
.post-comment { text-align: right; }
.post-comment a {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
background: #eee;
padding: 5px 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.post-comment a:hover {
color: #fff;
border: 1px solid #ccc;
background: #ccc;
text-decoration: none;
}
ul.single-post {
position: relative;
min-height: 90px;
line-height: 20px;
background: #eee;
padding: 10px 10px 10px 110px;
margin: 20px auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#trackback-text ul.single-post {
min-height: auto;
padding: 10px;
}
ul.secret {
min-height: 20px;
padding: 10px;
}
li.post-photo {
position: absolute;
top: 10px;
left: 10px;
}
li.post-photo img {
width: 80px;
height: 80px;
border: 1px solid #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #fff;
padding: 4px;
}
li.post-info {
height: 20px;
overflow: hidden;
font-size: 11px;
color: #999;
padding-right: 30px;
}
.floor {
position: absolute;
top: 10px;
right: 10px;
width: auto;
display: block;
font-size: 1.4em;
color: #ccc;
}
.post-info a {}
li.post-text {
border-bottom: 1px solid #ddd;
padding: 5px;
}
li.post-text p, li.post-text a { color: #aaa; font-weight: bold; }
li.post-text img { vertical-align: middle; }
li.reply-text {
color: #000;
border-top: 1px solid #fff;
padding: 5px;
}
li.reply-text textarea {
display: block;
margin: 0 0 3px;
}
li.reply-text p {
text-align: right;
font-size: 11px;
color: #aaa;
}
li.reply-text p a { color: #999; text-decoration: underline; }
.article-area-title,
#view-mode {
float: left;
width: 68%;
height: 20px;
overflow: hidden;
font-size: 12px;
color: #999;
border-bottom: 1px solid #ddd;
padding: 0 1% 5px;
margin: 0 0 15px;
}
#view-mode  {
width: 28%;
text-align: right;
font-size: 11px;
}
#view-mode a {
background: #e5e5e5;
padding: 1px 4px;
margin: 0 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.main-list { clear: both; }
.main-list th,
.main-list td {
background: #e5e5e5;
padding: 7px 10px;
}
.main-list td {
border-bottom: 1px dashed #bbb;
background: none;
}
td.list-date { width: 15%; font-size: 11px; }
.list-visit,
.list-comment { text-align: center; }
td.list-visit,
td.list-comment { width: 10%; font-size: 11px; color: #aaa; }
.page {
font-size: 11px;
text-align: center;
padding: 5px 0;
margin: 20px auto;
}
.page a, .page span {
color: #999;
padding: 1px 5px;
margin: 0 3px 0 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.page a:hover { background: #f5f5f5; }
.page span {
color: #000;
background: #e5e5e5;
}
#links {
float: right;
width: 29%;/*側欄寬度*/
overflow: hidden;
}

#links-row-1 .box:nth-child(1){display: none !important;}刪除側欄廣告
.box {
margin: 0 auto 10px;
}
.box-title {
height: 35px;
line-height: 35px;
overflow: hidden;
color: #333;
background: url(https://pic.pimg.tw/pixnetvisual/1568713758-1927716757.jpg);
padding: 0 0 0 10px;
box-sizing: border-box;
}
.box-text {
color: #999;
font-size: 12px;
padding: 10px 5px;
}
.box-text ul {
overflow: hidden;
}
.box-text a { color: #777; }
.box-text a:hover { color: #444; }
.box-text audio,
.box-text iframe,
.box-text object,
.box-text embed {
position: relative;
display: block;
width: 100%;
max-width: 100%;
}
.inner-box {}
.inner-box ul {
margin: 0 0 0 1.3em;
}
.box-more {
text-align: center;
margin: 5px auto;
}
.box-more a {
font-size: 11px;
color: #999;
background: #eee;
border: 1px solid #fff;
padding: 1px 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.box-more a:hover {
color: #444;
text-decoration: none;
background: #f5f5f5;
border: 1px solid #ccc;
}
#friendbox .friends-all a,
body #newsfeed a.show-all-newsfeed,
body #followed-murmurs a.show-all-murmurs { font-size: 11px; color: #999; }
#friendbox ul.friendlist li img { width: 36px; height: 36px; }
#user-info {}
#user-info .box-text { padding: 10px; }
#user-info dl {
padding: 10px 0 0;
margin: 10px 0 0;
}
#user-info dl dd { margin: 0; }
#recent-article {}
#recent-article li img { vertical-align: middle; }
#search .box-text { text-align: center; }
#search li { display: inline; }
#search input#search-target { width: 110px; }
#latest-comment {}
#latest-comment li {}
#latest-comment li span {
color: #bbb;
font-size: 0.9em;
border-right: 1px solid #ddd;
padding: 0 5px 0 0;
margin: 0 5px 0 0;
}
#latest-comment li a {
display: block;
height: 20px;
overflow: hidden;
}
#newsfeed {}
body #newsfeed ul li,
body #followed-murmurs ul li {
font-family: Helvetica, Arial, "LiHei Pro", PMingLiU, sans-serif;
border-bottom: 1px dashed #bbb;
}
body #newsfeed ul li .newsfeed-photo a,
body #followed-murmurs ul li .murmurs-photo a { color: #ccc; }
body #followed-murmurs .murmurs-photo img {
height:30px;
width:30px;
border:1px solid;
background:none repeat scroll 0 0 white;
padding:1px;
}
body #newsfeed ul li .newsfeed-content .newsfeed-author a,
body #followed-murmurs .murmurs-content a.murmurs-author { color: #444; font-weight: normal; }
body #followed-murmurs .murmurs-content { text-align: left; }
#friendbox ul.friendlist li a { color: #ccc; }
#visitor ul,
#crumb ul {
overflow: hidden;
}
#visitor ul li,
#crumb ul li {
float: left;
margin: 0 5px 5px 0;
}
#visitor ul li a,
#crumb ul li a { color: #ccc; }
#visitor ul li a img,
#crumb ul li a img {
width: 36px;
height: 36px;
background: white;
border: 1px solid;
padding: 1px;
vertical-align: top;
}
#calendar {}
.weekday { display: none; }
#calendar table {}
#calendar th,
#calendar td {
text-align: center;
font-size: 11px;
line-height: 24px;
border: 1px solid #eee;
}
#calendar th a {
display: block;
text-decoration: underline;
}
#calendar td a {
display: block;
color: #444;
background: #eee;
}
#footer {
text-align: center;
font-size: 11px;
color: #999;
background: #eee;
padding: 5px;
margin: 0 10px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
#footer a { color: #666; }
#comment-form td, #comment-form th { vertical-align: top; padding: 2px; }
#comment-form th { width: 100px; text-align: right; }
#comment-form input { width: 98%; }
#comment-form input.radio { width: auto; background: none; border: none; }
input#blogcommenttext_name { width: 50%; }
input#send-comment { width: 10%; }
#comment-form textarea { width: 98%; }

.article-head{background-image: url(https://pic.pimg.tw/elax/1603218337-1470655486-g.png)}/*文章標題底圖*/
.box-title{background-image: url(https://pic.pimg.tw/elax/1603218337-3042298039-g.png)}/*側欄標題底圖*/
#footer {background-image: url(https://pic.pimg.tw/elax/1603260924-4272269504-g.png)}/*文章標題底圖*/

#header { background-image: url(https://pic.pimg.tw/elax/1603257342-2818852340-g.png);}/*頂端橫幅圖片*/
#header { background-position: center; }
#header { background-repeat: no-repeat; }
#header { background-position: bottom; }

body { background-attachment: fixed; }
body { background-color: #FFF4C1; }/*背景底色*/
body { background-image: none; }/*背景圖片*/