第25個冬天

發表文章

目前顯示的是有「HTML5_Javascript_CSS」標籤的文章

整頁載入時候增加Loading效果

- 9月 25, 2022

書局網站優化配置一個loading效果載入的css檔案 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 body { margin : 0 ; padding : 0 ; width : 100 vw; height : 100 vh; background-color : #eee ; } .content { display : flex; justify - content : center ; align-items: center ; width : 100 %; height : 100 %; } .loader-wrapper { z-index : 500 ; width : 100 %; height : 100 %; position : absolute ; top : 0 ; left : 0 ; background-color : #242f3f ; display :flex; justify - content : center ; align-items: center ; } .loader { z-index : 500 ; display : inline - block ; width : 30px ; height : 30px ; position : relative ; border : 4px solid #Fff ; animation: loader 2s infinite ease; } .loader-inner { vertical-align : top ; display : inline - block ; width : 100 %; background-color : #fff ; animation: loader-inner 2s inf...

閱讀完整內容

Blazor日常開發異常_子畫面為何每次都直接整頁刷新不會局部更新

- 8月 19, 2022

如題同事來問我他遇到的這個異常第一眼就先確認應該是透過button開啟的一個子視窗原件問題真因在於默認button 的type會被渲染為submit導致整頁表單提交因而導致 blazor會Reload一整頁 Ref: https://stackoverflow.com/questions/1878264/how-do-i-make-an-html-button-not-reload-the-page

閱讀完整內容

HTML書信空格( 和和 )

- 11月 28, 2021

在進行SMTP發信時候預設通常會採用HTML格式在排版分段空格通常會空兩格而在HTML中空格較常使用的分為如下3種不換行空格   一個中文字(一個全形空格) 要打四組  半形空格 &ensp; 一個中文字(一個全形空格) 要打兩組&ensp; 全形空格 &emsp; 一個中文字(一個全形空格) 要打一組&emsp; Ref: https://note.charlestw.com/html-space/

閱讀完整內容

.net webform input type為submit吃不到樣式的窘境

- 10月 04, 2021

以往頁面視覺提供了雛型後有些css樣式會用html5標準的tag在layout 而在套用到.net webform後有些樣式就無法正確套用 = =||| 由於weform中 Button控件被render到client後為input type為submit的 tag 視覺預設可能只有針對a tag , button tag等等做套版這裡將Button 控制項改透過LinkButton取代即可原先css 全域樣式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .Ochi-btnset .itemcell a .btnlink , .Ochi-btnset .itemcell input .btnlink , .Ochi-btnset .itemcell button .btnlink { border : 1px solid rgba( 0 , 15 , 55 , 0 . 5 ); color : #333333 ; font-size : 12px ; font-weight : bold ; /*background-color:#fafafa;text-shadow: 1px 1px 1px #fff;*/ background-image : -webkit-linear-gradient( 180 deg, #ffffff 0 %, rgba( 255 , 255 , 255 , 0 . 6 ) 100 %); background-image : -moz-linear-gradient( 180 deg, #ffffff 0 %, rgba( 255 , 255 , 255 , 0 . 6 ) 100 %); background-image : -ms-linear-gradient( 180 deg, #ffffff 0 %, rgba( 255 , 255 , 255 , 0 . 6 ) 100 %); background-image : -o-linear-gradient( 180 deg, #ffffff 0 %, rgba( 255 , 255 , 255...

閱讀完整內容

網頁跑馬燈Marquee的替代方案使用css動畫達成

- 3月 08, 2021

由於marquee tag 已經過時此物在一些主流瀏覽器上也常遇到怎麼沒有跑馬燈效果所以這裡筆記一下解決替代方案 marquee在之後瀏覽器html tag語法中已算過時了 https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/marquee 因此這裡建議使用最新css3 animation方案在開始style 定義css樣式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 < style > .news_marquee { animation : slide 7s linear infinite ; color : white ; } @keyframes slide { 0 % { transform: translatex( 0 %) } 100 % { transform: translatex( 100 %) } } </ style > 在要顯示跑馬燈效果的地方div包覆(class name記得套用樣式才吃的到) 這裡假設是在使用bootstrap container row 的情境建議要在最外層再包一個div且這個div的style要設定overflow:hidden; padding就隨意 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class= "container" > <div class= "row" > <div class= "col-12" style= "padding: 0.5rem;overflow: hidden;" > < % marquee_data[0].forEach(item=>{%> ...

閱讀完整內容

CSS使用上的初步認識和目的(內部樣式/class/id)

- 2月 27, 2016

今天來探討一下 CSS style 有何方便之處??? 還有簡單套用法介紹如果我們需要分開呢????? 應該說要區隔呢比方說第一段為綠色第二段為橘色這時我們可以使用 ID 來指定對應的區塊樣式【使用 ID 】【使用 Class 】【使用對應的屬性設置 / 層疊次序概念】優先級最高的是 "行內" 的樣式 (inline style sheet) 行內樣式 : 直接用 style 屬性寫在 <p> 標籤內部的樣式此樣式優先級最高喔~~~~~ 內部樣式 : 位於 <head>標籤內部行內樣式雖可享有CSS本身豐富的版面設定功能，但無法重複利用這個樣式設定，缺點與單單指定font標籤一樣，建議減少使用。 CSS 可以高效定義 HTML 元素之外觀及樣式這樣就不需要在每個 <p>標籤都指定一個 <font> 而且 < font > 根本做不到　圓角、陰影的效果 ========================================================= 還有一種是寫在外部文件裏頭的又叫做外部樣式 (PS: 優先級排第三) 優先級最低的是瀏覽器的默認樣式喔~~ 排第四本次文章介紹到此希望有幫助 XDD

閱讀完整內容

使用Snap.svg外掛來建立SVG 動畫效果(結合hover)

- 2月 27, 2016

SVG(Scalable Vector Graphics ) 可縮放式向量圖形這項外掛技術常被用於網頁動態效果展示及互動功能用於描述二維向量圖形的一種圖形格式。 SVG和其他向量圖形相比，好處有: 1. 可在任何的分辨率下被高質量地打印 SVG 有向量圖形的優點，比方可以保持圖像清晰度，不會隨放大與縮小而有所失真，也不會大幅增加檔案的大小。向量VS點陣-------->放大後會不會失真喔!!!!! 向量不失真 2. SVG 最大的優勢是與其他標準（比如XSL 和DOM）相兼容，是開放的標準屬開源前端技術，就如HTML、CSS一樣，我們可以讀取源代碼。 SVG可以被搜尋。SVG以XML寫成，而搜索引擎可以讀取XML內容。一般來說，搜索引擎無法搜索圖片，現在可以依圖片的特性搜索SVG圖檔。 SVG Tiny可適用於在手機上。 SVG有向量圖形的優點，比方可以保持圖像清晰度，不會隨放大與縮小而有所失真，也不會大幅增加檔案的大小。所有瀏覽器均支持SVG文件，不過需要安裝插件的Internet Explorer除外 =============================== 去官網載 Snap.svg 函式庫 http://snapsvg.io/ 按下右上角 Download 做下載下拉一下可看他強大的地方複製它貼移置網站Folder 這是很常用的一個添加外掛函式包流程在body中開始要撰寫了 svg標籤 SVG 開啟標籤<svg> SVG關閉標籤</svg> 最乾淨俐落寫法這裡我們把它放到 div盒子裡並且利用 class 給這些箱子做命名以利於之後我們指定CSS樣式(以選擇器來指派) 選擇器主要分三種類型: 1.「Type」 ...

閱讀完整內容