WordPress美化 – 怎么美化blockquote塊引用?

    使用后會給選定的段落添加blockquote標簽,用以調用某些引用的語句或者強調,默認的不好看,通過這次的wordpress美化教程來美化下

    在WordPress文章編輯中有一個較為常用的按鈕“塊引用”,使用后會給選定的段落添加<blockquote>標簽,用以調用某些引用的語句或者強調。這一次的wordpress美化教程就教大家如何美化。

    WordPress美化 - 怎么美化blockquote塊引用?
    WordPress美化 – 怎么美化blockquote塊引用位置

    blockquote標簽簡述:

    <blockquote> 與 </blockquote> 之間的所有文本都會從常規文本中分離出來,經常會在左、右兩邊進行縮進(增加外邊距),而且有時會使用斜體。也就是說,塊引用擁有它們自己的空間。

    <blockquote> 標簽定義塊引用。

    通俗的來說,就是HTML標簽語義化的體現,意思是該標簽內的內容是引用的(如名言警句、軟件介紹等等)而通常會有特定的前端樣式。如W3C里面介紹的那樣,經常會在左右兩邊增加外邊距,還會用斜體。

    WordPress美化 - 怎么美化blockquote塊引用?
    背景圖片

    飛鳥的主題之前采用的就是這種風格的blockquote樣式,看久了有點審美疲勞了,于是乎重新定義了一些塊引用的樣式,如下所示。

    WordPress美化 - 怎么美化blockquote塊引用?
    WordPress美化 – 怎么美化blockquote塊引用效果直角版

    將css代碼貼出

    /* 雅兮網自用塊引用樣式樣式 https://www.yaxi.net */
    .post blockquote {
    font: 14px/20px italic Times, serif;
    color: #888;
    padding: 18px;
    background-color: #dddddd;
    border-left: 15px solid #666666;
    margin: 5px;
    background-image: url(img/quote_open.png);
    background-position: 15px 10px;
    background-repeat: no-repeat;
    text-indent: 23px;
    line-height: 1.8;
    }
    .post blockquote p {
    text-indent:23px;
    }
    .post blockquote p:last-child{
    background-image: url(img/quote_close.png);
    background-repeat: no-repeat;
    background-position: bottom right;
    }

    非常容易看出,只是給blockquote標簽增加了一個背景圖(開頭引號),然后給最后一個p標簽加了一個背景圖(結尾引號);當然也可以通過偽元素::before、::after來輸出這一對引號,可個人喜好了,此處暫且不貼。

    當然你也可以自行調整顏色以適配你的主題,兩個素材小標地址如下,請自行保存至你的主題模板根目錄的img文件夾下面。

    WordPress美化 - 怎么美化blockquote塊引用?
    quote_close
    WordPress美化 - 怎么美化blockquote塊引用?
    quote_open

    另外之前的小綠標樣式也是個非常優秀的樣式,可以重新定義一個類,在寫文章的時候可以因勢調用,讓網站更具風格化!

    2018.11.7重新調整blockquote引用塊樣式,使其更加圓潤,簡潔。新樣式代碼如下,只修改了blockquote標簽的樣式,其他的不變。

    WordPress美化 - 怎么美化blockquote塊引用?
    WordPress美化 – 怎么美化blockquote塊引用效果圓潤版
    blockquote {
    font: 16px/20px italic Times, serif;
    color: #333;
    padding: 18px;
    background-color: #f5f5f5;
    border-left: 15px solid #666666;
    border-radius: 5px;
    margin: 5px;
    background-image: url(../img/quote_open.png);
    background-position: 15px 10px;
    background-repeat: no-repeat;
    text-indent: 23px;
    line-height: 1.8;
    }
    ?

    如果你也喜歡折騰這些花里胡哨的的東西,那么還可以看看這個wordpress美化教程:

    精致的鼠標點擊煙花效果 – WordPress美化

    給TA贊賞
    共{{data.count}}人
    人已贊賞
    ??
    Npcink上的部份代碼及教程來源于互聯網,僅供網友學習交流,若您喜歡本文可附上原文鏈接隨意轉載。
    無意侵害您的權益,請發送郵件至 1355471563#qq.com 或點擊右側 私信:Muze 反饋,我們將盡快處理。
    ?
    購物車
    優惠劵
    搜索
    主站蜘蛛池模板: 亚洲视频一区二区三区| 精品一区二区三区波多野结衣| 中文字幕av日韩精品一区二区| 97人妻无码一区二区精品免费| 亚洲视频免费一区| 亚洲乱码一区二区三区国产精品| 国精产品一区一区三区有限在线| 国产第一区二区三区在线观看| 精品成人一区二区三区四区| 日韩人妻精品无码一区二区三区 | 天海翼一区二区三区高清视频| 日本一区高清视频| 一区五十路在线中出| 国产色情一区二区三区在线播放 | 精彩视频一区二区| 一本色道久久综合一区| 99久久精品国产一区二区成人| 国产成人久久一区二区不卡三区| 一区二区三区四区精品| 五月婷婷一区二区| 亚洲一区日韩高清中文字幕亚洲| 免费无码VA一区二区三区| 亚洲爆乳精品无码一区二区| 不卡一区二区在线| 人妻视频一区二区三区免费| 久久一区二区免费播放| 亚洲AV无码一区二区三区牛牛| 日本韩国黄色一区二区三区| 少妇一夜三次一区二区| 国产日韩高清一区二区三区| 亚洲av综合av一区二区三区| 伊人久久精品无码av一区| 怡红院一区二区三区| 无码乱人伦一区二区亚洲一| 日本在线视频一区| 亚洲性色精品一区二区在线| 精品福利一区二区三| 丝袜美腿高跟呻吟高潮一区| 亚洲性色精品一区二区在线| 久久一区二区三区免费播放| 亚洲日韩国产一区二区三区 |