熱評
加載中...
當前位置:首頁技術館建站教學二開美化【B2】代碼塊添加一鍵複製和美化

【B2】代碼塊添加一鍵複製和美化

效果演示

【B2】代碼塊添加一鍵複製和美化

使用教學

CSS
/*為pre區域添加一鍵複製*/i.yellow-i {
content: '';
position: absolute;
top: 0;
left: 25px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #fdbc40;
z-index: 1;
}
i.green-i {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 15px 25px;
background: #35cd4b;
z-index: 1;
}i.red-i {
content: '';
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #fc625d;
margin: 15px 25px;
z-index: 1;
}.entry-content pre {
position: relative;
border-radius: 6px;
padding-top: 50px;
box-shadow: 0px 8px 20px -10px #000;
}/* 代碼塊容器樣式,用於包裝代碼塊和按鈕 */.code-container {
    position: relative;
}
/* 複製按鈕樣式 */.copy-button {
    background-color: #00000000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

放在你的css文件裡面只要能載入就可以比如style.css

總結

這個複製按鈕會一直固定在右上角,不會再跟著左右滾動了

修訂記錄

  1. 修復複製異常。
  2. 修復複製格式異常
  3. 修復手機瀏覽器無法複製

您已閱讀完《WordPress(共53篇)》專題的第 8 篇。請繼續閱讀該專題下面的文章:

AngelaL博客

       本文是原創文章,採用CC BY-NC-SA 4.0協議,完整轉載請註明來自AngelaL博客

給TA打賞
共{{data.count}}人
人已打賞
二開美化

【B2】問答模組新增OpenAI ChatGPT機器人自動回答功能

2025-2-23 2:36:09

二開美化

【B2】評論後自動刷新頁面

2025-2-24 10:32:27

0 條回复 A文章作者 M管理员
    
    暫無討論,說說你的看法吧
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索