跳到主要內容

CSS一隅 background-position 和 background-origin

CSSer 應該都會有遇用'圖像定位'的時候，雖然簡單但即然常用，學到了一招半式，還不趕快記下...^ ^

(1)background-position: bottom right; // 將圖像定位於右下方，邊緣沒有間隔，相對而言拙了點
background-position: bottom 10px right 10px;  // 如下但離右下方各多了 10px 間隔

(2)參考CSS秘密花園 http://www.w3cplus.com/css3/css-secrets/flexible-background-positioning.html
有些瀏覽器不支援此種寫法，需要寫成:
backgound: url(image.svg) no-repeat bottom right #fff;
backgound-position: right 10px bottom 10px;

(3)元件加邊距也可使用 padding 來做，CSS語法 ex: padding 10;


(4)花園小編提到 background-origin: (margin-box 、 padding box、border box、content box)之前很少用到，看到就趕快記起來，這個細節部份介紹也請多參考 CSS秘密花園並給個讚哦


(5) background-position: calc(100% - 20px) calc(100% - 20px) 的用法可視其在右上角減10px，下方減10px，透過 calc( )又是一招，記得減號左右皆有空白。

出處參考皆來自 CSS秘密花園，此為個人擷取部份內容，做為個人工作記錄，若有錯誤或侵犯他人權利，還請告之刪除



標籤：

留言

張貼留言

這個網誌中的熱門文章

C# 中 List 複製內容到另一個 List 的幾種方法

簡單又實用 ^ ^ * 第一種透過 .ToList( ) 方法:  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2 = List1.ToList( ); * 第二種方式在建立物件時複製前一個 List  List<string> List1 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List<string> List2 = new List<string>(List1); * 第三種方法新的List 中使用 AddRange( ) 方法  List<string> List1 = new List<string>();  List<string> List2 = new List<string>();  List1.Add("A");  List1.Add("B");  List1.Add("C");  List1.Add("D"); List2.AddRange(List1); 另可使用 List1.GetRange(Start, End) 來複製不固定大小(但不包含End)的內容
張貼留言
閱讀完整內容

無效的回傳或回呼引數。已在組態中使用 或在網頁中使用 <%@ Page EnableEventValidation="true" %> 啟用事件驗證

寫手機網頁 使用 Client 端的 jquery mobile 時 button 都會比較長，但改用 asp::Button 時發現按鈕大小卻變了，W3C 建議使用 jquery mobile Button 時，儘量使用<a href="#" data-role="button" > ，因此改用 asp::LinkButton 後果然解決了 Button 長度問題，只可惜按下去後，依然有點淚流滿面如下。後來拜求 google 大大，找到了原因及解法如下: 開啓了資料回傳安全驗證功能(EnableEventValidation 為 true)，導致錯誤訊息產生。如果必須要驗證資料，則必須使用 ClientScriptManager.RegisterForEventValidation 註冊控制項或直接在頁面.aspx上端 <%Page ... EnableEventValidation = "false"> ，那如果全部頁面都不想驗證，那請在 web.config 下找到 <configuration>      <system.web>       <pages  enableEventValidation ="false" >        ....       </page>       .... </configuration> 嗯  博大精深  ^^ 收工回家去............................
張貼留言
閱讀完整內容

JQUERY 中使用 val( ) 或 text( ) 來改變內容

就字眼看來兩者差別不太... 簡單的說 TextBox 利用 val( )，而其它的控制項元件則用 text( ) 底下範例可跑跑看或ID 對調實驗，很快就看出差別了... HTML: <input type="text" id="txtinupt" value="TEXTBOX"/> <label id="lblid">LABEL</label> <button onclick="TestFunc()">OK</button> JS: function TestFunc(){   $('#lblid').text("12345")   $('#txtinput').val("99999");   $('#lblid').focus();   console.log('Function End') }
張貼留言
閱讀完整內容