Time of Update: 2016-11-03
標籤:set upper brew tin gre ide char ext lower <html><head><meta charset="utf-8">
Time of Update: 2016-11-03
標籤:har pre pat ssi 比較 XML asc mave 升級 WebJars是將這些通用的Web前端資源打包成Java的Jar包,然後藉助Maven工具對其管理,保證這些Web資源
Time of Update: 2016-10-30
標籤:hover bre 大小 put 迴圈 設定 樣式表 ace 取值 span 一個沒有語義的行內標籤base這個標籤可以設定超連結的預設跳轉方式title
Time of Update: 2016-10-29
標籤:tee 運行 tag send 路徑 分享 輸入 com 簡單 預先載入圖片是提高使用者體驗的一個很好方法。圖片積極式載入到瀏覽器中,訪問者便可順利地在你的網站上衝浪,並享受到極快的載入速
Time of Update: 2016-11-03
static:靜態定位是position的預設值,元素框正常產生,也就是沒有定位時的正常顯示。 relative:相對定位用法一:元素相對自身的原位置位移某個距離,但是原本的空間依舊保留,表現為空白。用法二:把一個元素設定為position: relative; 可以使該元素的子項目相對該元素絕對位置。 absolute:絕對位置 元素從文檔流刪除,並相對於包含塊定位。元素在原本的空間關閉。元素定位後產生一個塊級框,不論它原來是行內元素還是區塊層級元素。
Time of Update: 2016-11-03
針對不同的瀏覽器寫不同的CSS code的過程,就是CSS hack。樣本如下:#test { width:300px; height:300px; background-color:blue; /*firefox*/ background-color:red\9; /*all ie*/ background-color:yellow; /*ie8*/
Time of Update: 2016-11-03
使用animation動畫實現一個簡單的投影片效果。/**HTML**/ div.ani /**css**/ .ani{ width:480px; height:320px; margin:50px auto; overflow: hidden; box-shadow:0 0 5px rgba(0,0,0,1); background-size:
Time of Update: 2016-11-03
CSS屬性圖01文字屬性 文字屬性 02字型屬性補充 字型屬性補充 03-文字屬性的縮寫 文字屬性的縮寫 04-文字屬性 文字屬性 05-顏色屬性 顏色屬性
Time of Update: 2016-11-01
float 取值看一個栗子紅色線框代表父元素脫離文檔流,其實也沒有完全脫離,會被父元素的邊界擋住。 float的元素在同一文檔流看一個栗子:紅線框代表父元素三個子項目『向左浮動』之後, 父元素就沒有內容了,所以父元素沒有高度了。 float元素半脫離文檔流對元素,脫離文檔流;對內容,在文檔流。元素時會重疊,但是內容不會重疊。舉個栗子: float元素半脫離文檔流 float : left A float is a box that is shifted to the
Time of Update: 2016-11-01
剛開始接觸web的時候是在大學的時候,寫的第一個網頁就是登陸頁面,當時採用表格的布局方式,中規中矩的。接觸到css之後,都是採用div+css的方式進行布局,實現了表現與結構的分離,非常的靈活。雖然早已經接觸了css的布局方式,但是不經常使用,導致很多東西都已經忘記了。而最近又在搗鼓css的布局,就想在這裡進行記錄一下,就當做自己的學習筆記了。css盒子模型是css中一個比較核心的概念。在網頁中我們可以把所有的網頁元素都看成是一個盒子,一個盒子包括外邊距、邊框、內邊距,和內容四個部分組成的,如。
Time of Update: 2016-11-01
寫這篇文章的目的其實就是為了安利一下我的表徵圖庫:iconoo,所以,開門見山,star吧少年少婦們!(這樣的我是不是應該要加個github互粉的團夥了?)主題說完了,下面進入正題。在web開發中,我們經常要用到一些小表徵圖(加減勾叉等)。通常做法就兩種:直接使用圖片;使用css/svg直接在瀏覽器中繪製表徵圖。方案1:由於表徵圖圖片比較多,而且體積很小,為了減少請求所以很多時候我們會用雪碧圖這種技術來將表徵圖拼湊在同一張圖片裡面。你也能想到,一堆表徵圖的雪碧圖,修改維護會相當麻煩!現在比較好的
Time of Update: 2016-10-29
本文章來給大家介紹在css3定義required,focus,valid和invalid樣式的方法,此方法目前只支援ie9+及ff,gg瀏覽器哦。css3 提示只適用於進階瀏覽器:ChromeFirefoxSafariIE9+valid、invalid、required的定義input:required, input:valid , input:invalid{ border:0 none; outline: 0 none;
Time of Update: 2016-10-29
1.水平置中設定 行內元素置中設定:如果被設定元素為文本、圖片等行內元素時,水平置中是通過給父元素設定 text-align:center 來實現的。程式碼範例如下:HTML代碼 我想要在父容器中水平置中顯示。CSS代碼定寬塊狀元素置中設定:滿足定寬和塊狀兩個條件的元素是可以通過設定“左右margin”值為“auto”來實現置中的。程式碼範例如下:HTML代碼 我是定寬塊狀元素,哈哈,我要水平置中顯示。CSS代碼不定寬塊狀元素置中設定:加入 table
Time of Update: 2016-10-29
偽類選擇符E:hover的定義和用法:設定元素在其滑鼠移至上方時的樣式。E元素可以通過其他選取器進行選擇,比如使用類選擇符、id選擇符、類型選擇符等等。特別說明:IE6並非不支援此選擇符,但能夠支援a元素的:hover ,也就是只支援通過類型選擇符選擇的a元素的:hover 。文法結構:E:hover{ Rules } 瀏覽器支援:IE瀏覽器支援此選擇符。Firefox瀏覽器支援此選擇符。Google瀏覽器支援此選擇符。opera瀏覽器支援此選擇符。執行個體代碼: CSS教程
Time of Update: 2016-10-20
準備工作1:設定Meta標籤這段代碼的幾個參數解釋:width = device-width:寬度等於當前裝置的寬度initial-scale:初始的縮放比例(預設設定為1.0) minimum-scale:允許使用者縮放到的最小比例(預設設定為1.0) maximum-scale:允許使用者縮放到的最大比例(預設設定為1.0) user-scalable:使用者是否可以手動縮放(預設設定為no,因為我們不希望使用者放大縮小頁面)
Time of Update: 2016-10-20
優先順序: 外部樣式 優先順序,即:同名的選取器右邊的會覆蓋左邊1.內部樣式表 2.使用link標籤,在文檔中聲明使用外接資源,最常用的一種方式。css外部樣式表指定編碼的@CHARSET="utf-8"; 需要放在第一行。 3.@方式,引入css,注意這個是非同步載入的,在整個html載入之後才載入,會導致頁面閃爍。不推薦使用。 4.內聯樣式表,優先順序最高最直白,但不能複用不容易維護。
Time of Update: 2016-10-19
方法一:首先固定表格寬度,即給表格一個寬度值(數值,非百分比) 方法二:強制不換行 div{//white-space:不換行;normal 預設;nowrap強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 對象white-space:nowrap; } 方法三:自動換行 div{ word-wrap: break-word; //word-break設定強行換行;normal 亞洲語言和非亞洲語言的文本規則,允許在字內換行word-break: normal; }
Time of Update: 2016-10-19
隨著CSS3的發布,國外研究正如火如荼,但在國內還有很多人抱著IE不支援CSS3的想法,始終無動於衷不肯去學習。但是曆史告訴我們,好的東西必將盛行,CSS3也終將也會替代CSS2,下面就和大家分享一個用CSS3打造的可摺疊樹狀菜單。樹狀菜單相信大家都不會陌生,我們一般用css+JS
Time of Update: 2016-10-17
書中說道一個關鍵的點,視覺的錯覺:視覺的中點在偏上一點的位置(默默對自己說,不要用像素,別給自己挖坑。。。).center-display .object{ position: absolute; width: 0.5em; height: 0.5em; top: 0; bottom: 0.8em; left: 0; right: 0; margin: auto auto; border-radius: 50%; background-color:
Time of Update: 2016-10-15
先看需求:,需要做一個這個效果。一般怎麼做?那個半圓切成圖片,可以解決一種情況——圖片背景固定並且不平鋪。如果背景圖片是花紋平鋪,切不是固定不動的呢?切好的半圓就無法與背景圖對應現在使用css3的放射狀漸層是可以實現這個透明的圓的,這樣一來,如果圓是透明的,就不用擔心背景圖片的情況了background-image: repeating-radial-gradient(500px 500px at 50% 0px ,transparent 0%, transparent 50px,#0cc 50