痞客邦|頁頭、公告版位|免費CSS樣式語法，直接複製貼上

Yellow and Turquoise Vivid Professional Static Quote General News Instagram Post

上次倉鼠已經分享過有關版型物件CSS樣式語法，特別是首頁的布局，還沒看過的朋友歡迎看一下。而今天要分享的2個地方CSS語法的地方是頁頭(網頁最上方顯示網頁名稱的地方)、公告版位(可以在後台側欄管理開啟的區塊)

今天同樣也是公開分享「倉鼠日常」使用到的CSS樣式語法，如果這個樣式你也喜歡，歡迎直接複製貼到你的後台唷~!

一、頁頭

CSS樣式項目(點選以下項目可以快速跳頁)

最上方快速連結(相簿部落格留言名片)
背景改大一些，而且讓背景圖案無條件滿版/不留白
頁頭加上LOGO圖片
標題字改大，且文字對齊位置調整
頁頭底下加上半圓相連的背景

你可以參考Before ->

After->

使用說明

看到喜歡的樣式，選取並複製相關的CSS語法
到「我的部落格後台」->「樣式管理」->「部落格CSS原始碼」
在最下面語法的最後貼上剛剛複製的CSS語法

小提示

如果你想要確保所有的樣式套用都可以相同(取得最大的相容性)，你可以在「樣式管理」選擇「七月預設主題水淺聰」

1. 最上方快速連結(相簿部落格留言名片)

/*快速連結*/
#navigation { width: 50px; height:initial; margin: 0 auto; display: block; /* align-items: center; */ /* justify-content: flex-end; */ order: 1; right: 40px; position: absolute; } #navigation li { height: 48px; width: 48px; line-height: 48px; border: 1px solid #ccc; border-radius: 100%; float: none; overflow: hidden; display: block; margin-top: 10px; background: #ffffff9c; } #navigation a { border-right: initial; padding:0 0 !important; text-align: center; display: block; }

2. 背景改大一些，而且讓背景圖案無條件滿版/不留白

/*頁頭與背景設定*/
#header{ height: 340px; margin-bottom: 50px; background-size: cover; background-position: center; background-image: url(這裡要貼上背景圖片的連結網址唷); }

3. 頁頭加上LOGO圖片

/*頁頭LOGO*/
#header:before { content: ""; position: absolute; display: block; overflow: hidden; width: 200px; height: 200px; top: 130px; outline-offset: 5px; outline: 12px solid #fdec1d; left: calc((100% - 1190px)/2); margin-left: 80px; background-size: cover; background-image: url(這裡要貼上背景圖片的連結網址唷); }

4. 標題字改大，且文字對齊位置調整

/*頁頭文字*/
#banner { padding-left: calc((100% - 1190px) / 2 + 320px) !important; } #banner h1 { font-size: 4.4rem; font-weight: 700; margin-top:30px; } #banner h2{ background: transparent; } #banner, #banner h1, #banner h2 { text-align:left !important; }

5. 頁頭底下加上半圓相連的背景

/*頁頭底下圓*/
#header:after { content: ""; background-image: radial-gradient(#aad49c 70%, transparent 0%); background-position: 0px -40px, 0px 0px; background-size: 80px 80px; width: 100%; height: 40px; display: block; overflow: hidden; float: none; position: absolute; top: 385px; }

二、公告版位

這個公告版位經過好好利用後可以成為一個好的入口歡迎。原本網站是沒有開啟這個功能的，所以文字偏多、也和大多數部落格文章形式差異化不大。開啟這個功能之後發現頁面就會變得比較活潑

請事先準備好底圖、小物件的圖片連結網址(你可以先上傳到痞客邦的相簿，然後再複製圖片連結，可以點此跳頁看詳細說明)

到「我的部落格後台」->「側欄管理」->就會看到「公告版位」

因為這個版位開放CSS和HTML的編寫

所以等一下這些程式編碼直接修改複製貼上到裡面即可(標題可以不用打，也記得要按開啟唷)

公告版位html和css程式語法

<section id="cus_box">
Welcome 選擇你想要看的文章主題

#cus_box img {
width: 100% !important;
height: initial !important;
display: block;
}
#cus_box small {
display: block;
background-color: #fff;
border: 5px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to left, #58b2dc, #523ad5);
background-color: #365899;
color: #fff;
text-align: center;
width: 90px;
position: absolute;
transform-origin: right bottom;
transform: rotate(
-7deg
);
}
#cus_box .cus_title01 small, #cus_box .cus_title03 small{
bottom: 3px;
left: 81px;
}
#cus_box p:nth-child(2), #cus_box p:nth-child(4){
margin-top: 60px;
}

#cus_box .cus_title02 small:first-child{
top: 38px;
right: -87px;
}
#cus_box .cus_title02 small:nth-child(2){
left: 10px;
bottom: -19px;
}
#cus_box a:hover img{
width:95% !important;
}
#cus_box a small:hover{
background-color: #fff;
color:#365899;
}
@-webkit-keyframes bounce-down {
   25% {
       -webkit-transform: translateY(-10px);
   }
   50%,
   100% {
       -webkit-transform: translateY(0);
   }
   75% {
       -webkit-transform: translateY(10px);
   }
}

@keyframes bounce-down {
   25% {
       transform: translateY(-10px);
   }
   50%,
   100% {
       transform: translateY(0);
   }
   75% {
       transform: translateY(10px);
   }
}

/*只有在首頁看得到*/
body#category-main #spotlight,body#article-main #spotlight{
display:none;
}
body#blog-main #spotlight{
display:block;}

</style>

如果你不知道背景或小物件圖片要上傳到哪裡，你可以先上傳到痞客邦的相簿，然後再複製圖片連結

可以到「我的部落格後台」->「相簿管理/上傳」->找到「上傳照片」按鈕