Yellow and Turquoise Vivid Professional Static Quote General News Instagram Post

前幾篇文章倉鼠有分享版型物件CSS樣式語法和頁頭、公告版位。而今天要分享右側區塊中熱門與最新文章加上排名圖案的CSS樣式語法

可以參考「倉鼠日常」右側區塊中熱門與最新文章使用到的CSS樣式語法，如果這個樣式你也喜歡，歡迎直接複製貼到你的後台唷~!

01

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

使用說明

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

02

小提示

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

01

熱門文章加小圖案(三則)

02

/*熱門文章加小圖案*/
#hot-article .box-text {
    padding: 0px 8px 0;
}
#hot-article li:before {
    content: "";
    display: block;
    float: left;
    width: 25px;
height:25px;
align-items: center;
    text-align: center;
    overflow: hidden;
}
#hot-article .box li a {
    display: block;
    float: left;
    width: calc(100% - 30px) !important;
    vertical-align: top;
    font-size: 16px;
    padding-left: 5px;
align-items: center;
}
#hot-article .box-text li {
    padding: 12px 0;
    display: block;
    float: none;
    overflow: hidden;
    border-bottom: 1px dashed #dfdfdf;
}
#hot-article li:before {
    background-size: 25px 25px;
    background-position: center;
}
#hot-article li:nth-child(1):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626701303-1312894215-g.png);
}
#hot-article li:nth-child(2):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626701303-4191185351-g.png);
}
#hot-article li:nth-child(3):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626701303-784699719-g.png);
}
#hot-article #hotArtUl span{
    display:none !important;
}

最新文章加小圖案(5則)

03

/*最新文章加小圖案*/
#recent-article .box-text {
    padding: 0px 8px 0;
}
#recent-article li:before {
    content: "";
    display: block;
    float: left;
    width: 25px;
height:25px;
align-items: center;
    text-align: center;
    overflow: hidden;
}
#recent-article .box li a {
    display: block;
    float: left;
    width: calc(100% - 30px) !important;
    vertical-align: top;
    font-size: 16px;
    padding-left: 5px;
align-items: center;
}
#recent-article .box-text li {
    padding: 12px 0;
    display: block;
    float: none;
    overflow: hidden;
    border-bottom: 1px dashed #dfdfdf;
}
#recent-article li:before {
    content: "";
    display: block;
    float: left;
    width: 25px;
height:25px;
    text-align: center;
    overflow: hidden;
align-items: center;
}
#recent-article li:before {
    background-size: 25px 25px;
    background-position: center;
}
#recent-article li:nth-child(1):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-1798447477-g.png);
}
#recent-article li:nth-child(2):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-3773712657-g.png);
}
#recent-article li:nth-child(3):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-2016358732-g.png);
}
#recent-article li:nth-child(4):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-556705557-g.png);
}
#recent-article li:nth-child(5):before {
    background-image: url(https://pic.pimg.tw/jacksonlife/1626704340-3334872432-g.png);
}

CSS相關文章

文章標籤
全站熱搜
創作者介紹
創作者 倉鼠 的頭像
倉鼠

倉鼠日常

倉鼠 發表在 痞客邦 留言(0) 人氣(88)