HTML
文章平均质量分 72
Learn-Share_HY
https://www.youtube.com/@HY_main
展开
-
[Html]如何使滑鼠點擊資料行後,維持被點選樣式?
在Html前端頁面的操作攸關使用者體驗(UX)的優劣性,滑鼠在html前端網頁的相關操作會輔以Javascript和CSS來進行,其中在樣式屬於CSS可以發揮的部分,常見有五種偽類選擇狀態。本文範例期望呈現兩種滑鼠選擇狀態的功能,如下:功能1.當滑鼠在資料行之間移動時,資料行顯示不同背景色,讓使用者明確滑鼠和資料行的交互位置。 如上述參考文章,該功能可用 hover來處理。原创 2023-05-02 23:41:31 · 232 阅读 · 0 评论 -
[Blogger]如何使行動版面的縮圖呈現完整?
若以行動裝置瀏覽Blogspot文章,往往會發現文章的縮圖呈現截圖狀態,如上圖紅框所示。 如何使文章的縮圖呈現完整,可依照下列步驟將HTML程式碼進行置換。 1.搜尋mobile-index-thumbnail <b:if cond='data:post.thumbnailUrl'> <div class='mobile-index-thumbnail'...原创 2019-01-03 22:50:32 · 172 阅读 · 0 评论 -
[Blogger]如何調整網頁選單的背景尺寸?
請在Blogger的 html程式碼視窗中,依造下列步驟操作。 1.搜尋下列字串 ]]></b:skin> 2.新增下列程式碼在上述]]></b:skin>之上 .PageList { margin: auto 20% auto 20%; } -----如果文章對您有幫助,打開微信掃一掃,請作者喝杯咖啡。----- ...原创 2018-12-21 12:07:15 · 103 阅读 · 0 评论 -
[Blogger]如何調整網頁選單按鈕的位置?
請在Blogger的 html程式碼視窗中,依造下列步驟操作。 1.搜尋下列字串 ]]></b:skin> 2.新增下列程式碼在上述]]></b:skin>之上 .PageList {text-align:center !important;} .PageList li {float:none !important; d...原创 2018-12-21 11:50:50 · 142 阅读 · 0 评论 -
[Blogger]如何提高行動版面的封面圖解析度?
考慮到行動版面的加載速度與記憶體,往往設定會自動將行動版面的封面圖解析度降低。若需提高行動版面的封面圖解析度,可參考下列步驟,將Html置入欄位中。其原理是將在電腦版的圖面網址複製給行動版面使用,同時針對解析度可進一步調整。 1.搜尋<img expr:alt='data:title',將會看到下列程式碼,並將該段程式碼刪除。 <img expr:alt='data:t...原创 2019-01-03 23:13:01 · 231 阅读 · 0 评论 -
[Blogger]如何變更行動版的文章縮圖尺寸?
針對Blogger的行動裝置版面,若要重新調整文章縮圖的大小,可參考下列步驟: 1.搜尋</head> 2.在</head>上一行,貼上下列程式碼。其中下列兩個參數可自行利用%或px調整,使縮圖尺寸有所變化。 width: 300px height: 150px <script language='javascript' src='https://a...翻译 2019-01-20 11:10:12 · 186 阅读 · 0 评论 -
[Blogger]如何製作下拉式選單?
在Blogger中以下拉式選單呈現,除了擴增文章分類的維度之外,使用者也將藉由清晰的分類文章快速取得所需資訊,完成愉快的使用者體驗。 關於下拉式選單的製作方式,個人所知有兩種,一種是利用既有的小工具(widget),另一種則是利用Html和Css程式碼。利用小工具製作的步驟如下,而Html和Css程式碼的製作方式請參考本文底部的參考資料。 a.在版面配置的跨欄區中,新增網頁小工具,如下圖所...原创 2019-01-20 17:19:13 · 705 阅读 · 0 评论 -
[Blogger]如何調整行動版文章內圖片的尺寸?
若要更改行動版文章內的圖片,原理是使電腦版的圖片為行動版圖片所用,一併保有原圖的尺寸和解析度,建議步驟如下: 1.利用修圖軟體變更圖片尺寸。 2.將圖片上傳至Blogger後,將其設定為"原始大小",如下圖所示。 3.切換至HTML程式碼欄位,檢查是否有控制圖片的width=" " 和height=" "程式碼,若有,請將其刪除。並保留data-original-width=" " 和 ...原创 2019-01-15 23:12:56 · 315 阅读 · 0 评论 -
[Blogger]如何調整各款分享按鈕的間距?
若要調整Blogger調整各款分享按鈕的間距,如上圖所示的效果,建議參考步驟如下。 1.搜尋下列程式碼 <b:includable id='shareButtons' var='post'> 2.在各款分享按鈕前的程式碼,新增下列程式碼 <span style='margin-left:20px'></span> 3.變更後的完整程式碼如下: ...原创 2019-01-15 23:19:37 · 184 阅读 · 0 评论