BY 莎白: https://www.plurk.com/karta1862025

直接先看實際效果:

( 實際網頁可點選 Z51 參考,此為幫親友撰寫的版面 : https://v4724.github.io/nice-0816/)

image.png


以下教學,只需兩步驟 :

<aside> 💡

基於S71大大的版面作撰寫

</aside>

版面原始來源文件:

https://docs.google.com/document/d/1mDv5BX8DUwrmlQmUhzfRvgrXW-7sW7g78av9hMNxX98/edit?tab=t.0

1. 在大大標題h5的上上層div裡面,style裡面加上 :

position: relative; overflow: hidden;

不知道在哪裡 ? 點我三角展開。( 附上可直接貼上程式

2. 加上標籤

<aside> 💡

這邊要注意放對位置,下面會講

</aside>

標籤程式碼 :

 <div style="
    position: absolute;
    top: 10px;
    left: -25px;
    background-color: rgb(255, 255, 0);
    color: black;
    transform: rotate(-45deg);
    width: 100px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  ">新刊</div>

可以改標示顏色( background-color )、文字顏色( color )、文字內容(新刊、既刊、無料等)