Css教程

CSS3變換Transform的使用,以及變換的過渡 2015-12-20

CSS3變換Transform的使用,以及變換的過渡
前面給各位介紹過渡效果下文再來爲各位介紹一篇CSS3變換(Transform)的使用,以及變換的過渡的例子.1,變換函數translateX(x):在水平方向移動元素,正值向右移動. translateY(y):在垂直方向移動元素,正值向下移動. translate(x,y):在水平和垂直方向移動元素. scaleX(x):在水平方向縮放元素(1.0是原始大小).使用負值會將元

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用 2015-12-12

CSS3給div或者文字添加陰影盒子陰影、文本陰影的使用
添加陰影效果以前只能使用圖片來實現了,現在的css3功能非常的強大了,今天我們就一起來看關于CSS3給div或者文字添加陰影(盒子陰影.文本陰影的使用)的方法,具體的例子如下所示.CSS3定義了兩種陰影:盒子陰影和文本陰影.其中盒子陰影需要IE9及其更新版本,而文本陰影需要IE10及其更新版本.下面

使用 PostCSS 壓縮和優化CSS實例 2015-12-03

前面我們講了如何使用如何使用 PostCSS 插件跨浏覽器兼容 的樣式,特別是對還有很多人在使用的低版本的IE浏覽器的處理,本文我們將學習使用 PostCSS插件壓縮優化CSS.關于如何使用 PostCSS 插件跨浏覽器兼容,請點擊這裏: http://www.111cn.net/cssdiv/css/98338.htm本文主要講的內容有:通過@import將多個樣式組合爲一個,即使你的一些樣式來自Bower組件或npm模塊,都可以確保你你只需要請求一個單獨的http,載入網站的CSS:匹配媒體查詢,允許

使用 PostCSS 跨浏覽器兼容教程 2015-12-03

PostCSS是CSS變成JavaScript的數據,使它變成可操作.PostCSS是基于JavaScript插件,然後執行代碼操作.PostCSS自身並不會改變CSS,它只是一種插件,爲執行任何的轉變鋪平道路.這裏我們將使用PostCSS創建一個跨浏覽器兼容性的樣式表.我們將要做的:有前綴的自動添加前綴添加一系列的IE版本,回退到IE8.IE9和IE10爲沒有支持的屬性添加will-change屬性設置專案你需要做的第一件事情就是使用Gulp或Grunt設置您的專案.如果你沒有一個完美的專案模

CSS3 border-radius 屬性學習實例教程 2015-11-23

CSS3 border-radius 屬性學習實例教程
CSS3中的border-radius 屬性是一個簡寫屬性,用于設置四個 border-*-radius 屬性,該屬性允許您爲元素添加圓角邊框.不過要高版本的浏覽器才支持.實例給div元素添加圓角的邊框:div{border:2px solid;border-radius:25px;} 浏覽器支持I

CSS3使用Animate.css制作超炫的動畫效果 2015-11-22

CSS3要制作動畫是非常的簡單的事情了,我們只需要簡單的幾行代碼就可以實現動畫效果,下文來看一個CSS3使用Animate.css制作超炫的動畫效果.Animate.css是一個超強的CSS3動畫庫,它使用簡單,只需要將相關效果對應的class加入頁面元素中,就能實現翻轉.滑動.旋轉等等複雜超炫的跨浏覽器的動畫效果,它讓開發這制作頁面動畫變得非常簡單.首先引入animate css文件.<link rel="stylesheet" href="animate.min.c

IE10/11不支持條件性注釋的3個解決方法 2015-11-04

我們知道ie在前端中不太好弄,本文我們分享在IE10/11不支持條件性注釋後的3種替代方法,後面補充了ie10 css hack 條件注釋等兼容方式整理.針對IE的條件性注釋(Conditional comments)是專門給IE浏覽器准備的,其它浏覽器根本不能識別這種標記.使用條件性注釋可以區別對待的針對浏覽器編寫CSS等代碼.<!--[if IE]><link href="ie.css" rel="stylesheet"><![en

Sass自動化處理CSS動畫實例教程 2015-10-24

本文是翻譯國外的一篇關于使用Sass自動化處理CSS動畫解決方法,聽起來就很酷的樣子,下面我們來具體來看看解決過程.有一天,Harry Roberts有一段有關于他網站上的代碼在twitter求教,如果有可能,在某些方面得到改善.Harry Roberts做的是使用keyframes的carousel動畫,所以說使用一些數學計算是有可能得到相應改善. "Why do we have to learn algebra, Miss? We're never going to use it-"

解決ie6不支持min/max-width/height屬性辦法 2015-10-12

IE6 及其以下版本不支持 CSS 中的 min/max-width/height 屬性相信很多人都不陌生,本文介紹了用 Javascript 修複這一問題的方法. 代碼如下 // 說明:讓 IE6 及其以下版本支持 CSS 中 min/max-width/height 屬性 // 整理:http:

png透明圖片在ie6正常顯示的純css解決辦法 2015-10-12

png透明圖片在ie6正常顯示的純css解決辦法,一個朋友的空間找到的有需要的朋友可參考一下.方法一:用png圖作背景要注意hackhtml代碼 代碼如下 <div class="logo"><a href="/">logo</a></div> css代碼 代碼如下 .logo { width: 3

IE6不支持inline-block解決辦法 2015-10-12

本文章介紹關于IE6不支持inline-block解決辦法,有需要了解的朋友可以參考一下.針對inline元素,如span,a等,現在css中定義display:inline-block,然後加上zoom:1觸發ha

css div布局中的9個常見問題 2015-10-12

本文章介紹了關于css div布局中的9個常見問題有需要的同學可以注意一下.一.UL邊距的問題Ul裏邊margin和padding的默認值不是0,所以在嵌套li的時候如果指定了li的數值,可能把外部的div撐大,所以如果要使用ul的 時候要指定margin和padding爲0,如下ul{margin

解決ie空白背景元素無法點擊BUG方法 2015-10-12

當需要用到一大塊可點擊區域,比如在圖片上加一大塊鏈接但又不能設置背景的時候,我們會在圖片在加一個透明的絕對定位浮動元素,這時IE中就會出現部分區域無法點擊的情況.解決方法:由于該區域不能設置背景,我們可以爲該元素設置一背景圖片(任意圖片均可),並設置background-position:0 1000px,讓背景不出現在可視區域即可其他方法:可以在元素中加 空白符,然後設置 代碼如下 css {;line-height:500px;}, 這樣可以解決IE6中的問題,但是IE8仍會有部分不可點擊區

IE6下DIV無法實現height:1px高度問題解決辦法 2015-10-12

各位前端朋友可能都知道在ie下可能無法實現div設置height:1px這種做法,下面我來給大家強制解決ie6下div的高度不能爲1的解決辦法.下午寫頁面遇到在ie6下無法實現height:1px,之前搞忘了,百度個收集幾個解決方法,以供再次查閱.IE6.0下DIV不能實現1px高度的幾種解決方法在

ie6中pisition:fixed不起作用,浮窗不隨屏滾動解決辦法 2015-10-12

本文章今天主要是講在ie中浮窗不能隨屏滾動的問題解決方法,我使用的pisition:fixed,在其它浏覽器都可以,就是在ie6下無效的,後來找了幾種解決辦法,各位可參考.按網上的說明,下面的這段css中的_top好

css 中float後text-align無效解決辦法 2015-10-12

float是我們在使用一種浮動方式,但有時我們使用了float之後在對元素中的內容進行text-align時發現是無效了,下面我來總結一下解決辦法.般寫內容居中的時候都會使用text-align:center屬性,但

IE6中Select覆蓋DIV元素各種解決辦法 2015-10-12

本文章來給大家介紹IE6中Select覆蓋DIV元素各種解決辦法,有需要了解的同學可進入參考參考.普通的元素,textbox, div, table……這些,屬于windowless element,它們之間互相遮蓋的情況由z-index決定,在它們之上,是SELECT這些windowed elem

CSS3中first-letter實現首字下沉變大 2015-10-12

CSS3中first-letter實現首字下沉變大
網頁首字下沉變大只需要使用CSS3中first-letter命令就可以實現了,下面來給各位
一周排行