CSS

隨著CSS3的發布，國外研究正如火如荼，但在國內還有很多人抱著IE不支援CSS3的想法，始終無動於衷不肯去學習。但是曆史告訴我們，好的東西必將盛行，CSS3也終將也會替代CSS2，下面就和大家分享一個用CSS3打造的可摺疊樹狀菜單。樹狀菜單相信大家都不會陌生，我們一般用css+JS 的方式來實現。而css3的到來，讓我們擺脫JS的束縛，直接運用CSS3的“選取器“就能實現可摺疊樹狀菜單。整體的代碼很多，就不逐句逐句講了，只把我覺得重要的地方提出來說說吧。Html代碼：<li><

首先我們在使用Media的時候需要先設定下面這段代碼，來相容行動裝置的展示效果：準備工作1：設定Meta標籤<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">這段代碼的幾個參數解釋：width =

優先順序： 外部樣式 < 內部樣式表 < 內聯樣式表；優先順序，即：同名的選取器右邊的會覆蓋左邊1.內部樣式表<head> <style> /*內部樣式表，一般用於覆蓋公用樣式*/ ＃headTip { color: 0xff5; }

這篇文章分享使用css3來製作圓環進度條的執行個體最近PC端項目要做一個這樣的頁面出來，其他的都很簡單，關鍵在於百分比的圓環效果。我最初打算是直接使用canvas來實現的，因為canvas實現一個圓是很簡便的。下面貼出canvas實現圓環的代碼，有需要的可以拿去嘗試，因為今天主要是講css3的方法，canvas我就不多解釋了<!DOCTYPE html> <html> <head> <meta

1 寫在前面最近在整理cnblogs上頁面的樣式，預設右側【隨筆分類】中的標籤是每行顯示一個，而我想把右側【隨筆分類】中的標籤設定為一行顯示多個標籤，至於顯示多少個則隨標籤的大小而定，並且每個標籤在滑鼠放上去的時候會有背景顏色的變化。效果如。下面我們就來分析一下如何讓左邊的標籤顯示方式變為右邊這樣的吧2 塊元素在分析塊元素之前我們首先建立html網頁，以便後面的分析。html代碼如下。<html> <head> <meta

Gulp 是一個自動化工具，前端開發人員可以使用它來處理常見任務：1、搭建web伺服器2、檔案儲存時自動重載瀏覽器3、使用前置處理器如Sass、LESS4、最佳化資源，比如壓縮CSS、JavaScript、壓縮圖片當然Gulp能做的遠不止這些。如果你夠瘋狂，你甚至可以使用它搭建一個靜態頁面產生器。Gulp真的足夠強大，但你必須學會駕馭它。這是這篇文章的主要目的。協助你瞭解Gulp的基礎用法，助你早日完成一統天下的大業。我們將要做的這篇文章的最後，你會擁有簡單的一個工作流程：編譯Sass除此之外，

1.在HTML中使用CSS樣式表的三種方式：（1）內聯的樣式表。eg：<em style="background-white">LIN</em>（2）內置樣式表。即在<head>標籤內嵌入<style>標籤及具體的樣式設定內容。（3）外部連結的樣式表。2.級聯的順序（1）首先要根據起源（origin）將規則分類。具體優先順序如下：頁面作者（author）設定的規則 > 使用者（user）規則 >

　　clear：left;表示左側不能有浮動元素。　　clear：right;表示右側不能有浮動元素。　　clear：both;表示左右兩側都不能有浮動元素。　　但在使用時，還得考慮css優先順序問題。相同類型選取器制定的樣式，在樣式表檔案中，越靠後的優先順序越高 。　　當所有元素的clear屬性都設為right時，由於優先順序的原因，並不是所想的那樣：右側沒有浮動元素，而是右側出現了浮動元素。　　比如下面的代碼：<html><head><style

總結了幾種css置中實現的方式，註：*為常用方式，“wrap”為容器，“div”為要置中的元素。*1.絕對位置，寬高都已知的情況下如下代碼可實現，或者可以使用negative margins；.div { width: 200px; height: 200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }2.不知道元素的寬高，僅僅實現某個div是其父的1/2

** 做了很久的項目了，transition和animation兩個css3屬性經常被用到實際項目當中，想想把它整理出來。如下：1：先介紹transition：a，在做項目中經常會遇見這樣的情景，比如一個按鈕，當滑鼠移入進去的時候改變按鈕背景顏色以及字型顏色，此時我們一般會這麼做：.btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;}

在項目開發中我們經常會遇到需要更改input單選和多選樣式的情況，今天就給大家介紹一種簡單改變input單選和多選樣式的辦法。在這之前先簡單介紹一下:before偽類:before 選取器向選定的元素前插入內容。使用content 屬性來指定要插入的內容（content是必須的哦）。相信這並不難以理解，接下來我們先理解思路：（1）首先在html用label為 input

這篇文章講述CSS三個定位常規、浮動、絕對位置詳細介紹常規流，普通流，文檔流正常的常規流顯示方式如下按正常對應的元素特點顯示、行內元素佔一行，區塊層級元素佔一行或多行。大哥二弟三弟按區塊層級元素從上至下依次排列。這是常規流。浮動顧名思義,浮動就是漂浮在常規流的上方。作用：解決實現一行放多個盒子（常規下一個盒子只佔一行，多個盒子佔多行），並且盒子的可控性強。浮動的特性:浮動後的元素在排序的時候會以上對齊。float:left;大哥沒有浮動、所以會以二弟所處的位置對齊。浮動不會影響標準流，標準流還是

文本超出部分隱藏，總結兩種方法。1、單行隱藏html代碼<p class="mi">當文字超過範圍的時候，超出部分會隱藏起來。</p>css代碼.mi {width: 200px;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;}結果當文字超過範圍的時候，超出部分會隱藏起來。2、多行隱藏html代碼<p

這是一款基於純CSS3的文字發光特效，當我們將滑鼠滑過文字時，文字就會類比發光動畫，展現出非常酷的發光畫面。另外，由於引用了特殊字型，所以整個文字效果看起來有著3D立體的特效，如果你的網路無法載入這些字型，可能是由於國外的這個網站被牆的緣故，就像google的字型庫網址被屏蔽那樣。線上示範源碼下載HTML代碼<p id="container"> <p><a href="#"> RED

一、變形transform：可以對元素對象進行旋轉rotate、縮放scale、移動translate、傾斜skew、矩陣變形matrix。樣本：transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px)

[導讀] 1、不要使用過小的圖片做背景平鋪。這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的地區，需要 200*200=40, 000 次，佔用資源。 2、無邊框。推薦的寫法是 1、不要使用過小的圖片做背景平鋪。這就是為何很多人都不用 1px 的原因，這才知曉。寬高 1px 的圖片平鋪出一個寬高 200px 的地區，需要 200*200=40, 000 次，佔用資源。 2、無邊框。推薦的寫法是 border:none;，哈哈，

[導讀] 定位（左邊和頂部） css定位屬性將是網蟲們開啟幸福之門的鑰匙： H4 { position: absolute; left: 100px; top: 43px }這項CSS規則讓瀏覽器將<H4>的起始位置精 確地定在距離瀏覽器左邊100象素，距離其定位（左邊和頂部）css定位屬性將是網蟲們開啟幸福之門的鑰匙：H4 { position: absolute; left: 100px; top: 43px }這項CSS規則讓瀏覽器將<H4>的起始位置精

[導讀] 選取器的分組你可以對選取器進行分組，這樣，被分組的選取器就可以分享相同的聲明。用逗號將需要分組的選取器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。h1,h2,h3,h4,h5選取器的分組你可以對選取器進行分組，這樣，被分組的選取器就可以分享相同的聲明。用逗號將需要分組的選取器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。h1,h2,h3,h4,h5,h6 { color: green; }繼承及其問題根據

[導讀] 派生選取器通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。在 CSS1 中，通過這種方式來應用規則的選取器被稱為上下文選取器 (contextual selectors)，這是由於它們依賴於上下文關係來應派生選取器通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。在 CSS1 中，通過這種方式來應用規則的選取器被稱為上下文選取器 (contextual selectors)，這是由於它們依賴於上下文關係來應用或者避免某項規則。在 CSS2

css3的3d起步要玩轉css3的3d，就必須瞭解幾個詞彙，便是透視(perspective)、旋轉(rotate)和移動(translate)。透視即是以現實的視角來看螢幕上的2D事物，從而展現3D的效果。旋轉則不再是2D平面上的旋轉，而是三維座標系的旋轉，就包括X軸，Y軸，Z軸旋轉。平移同理。當然用理論來說明，估計你還不明白。下面是3個gif：沿著X軸旋轉沿著Y軸旋轉沿著Z軸旋轉旋轉應該沒問題了，那理解平移起來就比較容易了，就是在在X軸、Y軸、z軸移動。你可能會說透視比較不好理解，下面我介紹