Time of Update: 2017-01-13
瀏覽器支援所有主流瀏覽器都支援 visibility 屬性。注釋:任何的版本的 internet explorer (包括 ie8)都不支援 "inherit" 和 "collaps教程e" 屬性值。所有主流瀏覽器都支援 display 屬性。注釋:任何版本的 internet explorer (包括 ie8)都不支援
Time of Update: 2017-01-13
一、舊的opacity設定 以下代碼是firefox和safari舊版本所需的透明度設定: 代碼如下 複製代碼 #myelement { -khtml-opacity: .5; -moz-opacity: 0.5;
Time of Update: 2017-01-13
一、固定寬度兩列布局1.側欄在左 代碼如下複製代碼 <div id="wrapper"> <div id="header">header</div> <div id="container" class="cls"> <div
Time of Update: 2017-01-13
CSS書寫順序1.位置屬性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation,
Time of Update: 2017-01-13
1. position:static元素的 position 屬性預設值為:static,即該元素出現在文檔的常規位置,不會重新置放。通常此屬性值可以不設定,除非是要覆蓋之前的定義。 代碼如下複製代碼 #div-1 { position:static;} 2. position:relative設定了 position:relative,便可以結合top 、 bottom、 left 、 right 的屬性來位移其文檔的常規位置。例如將 div-1 向下移動 20
Time of Update: 2017-01-13
具體例子 代碼如下複製代碼 img{ height:15px; width:15px;}img:hover{ height: 450px; width: 450px;} transition的作用在於,指定狀態變化所需要的時間。 代碼如下複製代碼 img{
Time of Update: 2017-01-13
基於各位前輩的辛勤勞動,下面得出使用inline-block替換float:left;的最佳方案。html代碼 代碼如下複製代碼 <div class="list"> <ul> <li><img src="images/pic02.jpg"
Time of Update: 2017-01-13
1、減少http請求連結到外部不免增加額外的http請求,這個是很耗時的。2、避免裸頁假如存放css的伺服器掛掉,整個首頁就掛掉了。放在頁面內,比較安全。使用者訪問頁面時,不會因為css載入不上,而造成裸頁面。3、關於修改你可能說這樣不便於修改和管理。實際上一般都是用程式動態載入進來的,然後用緩衝靜態化首頁等。知道的暫時就這麼多了。4、放面外部方便修改,但是如果css載入不進來,可能導致裸頁面一般超大流量的網站都是將css直接放在頁面裡面的,這是應付超大流量的一種最佳化方案,比如網易首頁,騰訊首
Time of Update: 2017-01-13
在前面的文章中已經說過了CSS的定位、布局以及CSS尺寸等一些屬性的用法,今天就來說一說CSS的另外兩個重要的屬性Margin(外補白)和Padding(內補白)。這兩個屬性在CSS+DIV布局的網頁中百分之百會用到,所以沒掌握其用法的朋友,來我一起來學習一下吧。1、Margin(外補白)的定義及其用法Margin(外補白)是用來檢索或設定對象四邊的外延邊距(可以簡單的理解為div四邊到螢幕上下左右的距離或者div與div之間的距離)的,其對應的用法語句有margin、margin-top、ma
Time of Update: 2017-01-13
在一個限定了高寬的容器中放入文字,當文字超出時就會出現杯具,簡單的控制使用 CSS 即可;觀察了一下,使用四大金剛即可使此文字超出時自動截去末尾,並加上省略符號: 代碼如下複製代碼 .words{width:200px; //限定寬度white-space:nowrap; //強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 對象word-break:keep-all; //對於中文,韓文,日文,不允許字斷開text-overflow:ellipsis;
Time of Update: 2017-01-13
任何一個試圖使用 CSS 的網頁設計師和開發人員都會發現不同的瀏覽器要求不同的樣式聲明。這些煩惱歸咎於各瀏覽器及其各版本不同程度的 CSS 執行的完整性。條件 CSS 是這個問題的一個解決方案,採用的是 Internet Explorer 的條件注釋文法的思想,並把它內聯到 CSS 聲明之中。基本用法條件 CSS 主要用於指出一個特別的 CSS
Time of Update: 2017-01-13
代碼如下複製代碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-
Time of Update: 2017-01-13
我們在進行CSS網頁布局的時候,常常會遇到下拉式清單select,我們可以應用CSS對錶單的元素進行控制,可是下拉式清單select的樣式該如何設定呢? 我們來看看下面的xhtml代碼,這是一個典型的下拉式清單select: 代碼如下複製代碼
Time of Update: 2017-01-13
那麼如何解決這個bug呢,解決該bug的方法如下:1、將select放到iframe裡面,div 無法覆蓋select,但是iframe 可以覆蓋select,而div可以覆蓋iframe,所以解決辦法就是用Z軸高度更高的Iframe元素,包裹或覆蓋住下拉式清單方塊控制項,使其回到正常的Z軸高度上來,但每個select都加太煩了,不推薦2、在需要遮蓋select的那個div放入一個空的iframe,這樣就可以針對性的解決問題了,簡單,值得推薦下面就第2種方法貼出css教程代碼如下: &
Time of Update: 2017-01-13
文字環繞是Microsoft Office Word軟體的一種排版方式,主要用於設定Word文檔中的圖片、文字框、快取圖案、剪貼畫、藝術字等對象與文字之間的位置關係。一般包括四周型、緊密型、襯於文字下方、浮於文字上方、上下型、穿越型等多種文字環繞方式。但我們做網頁布局時,有時也需要這樣的樣式,那麼怎麼辦呢?其實是很簡單的,主要就是float的使用,具體請看下面例子:HTML部分: 代碼如下複製代碼 <div class="txt">
Time of Update: 2017-01-13
一、x:after .clearfix:after {content: “”;display: block;clear: both;visibility: hidden;font-size: 0;height: 0;} .clearfix {*display: inline-block;_height:
Time of Update: 2017-01-13
代碼如下複製代碼 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.111cn.net/1999/xhtml"><head><meta
Time of Update: 2017-01-13
現在我們來通過樣式css的放射漸層來實現一個如下圖所示的文字光影效果。可以看到有類似光束照射文字的效果,很好地突出了文字。這實現起來很簡單,只需要對文字置中,對背景元素設定從中心發散的放射漸層即可,代碼如下: 代碼如下 複製代碼 // HTML代碼 <div class="box"
Time of Update: 2017-01-13
第一種方法: 還好,微軟提供了這樣一個代碼: <meta http-equiv="x-ua-compatible" content="ie=7" /> 把這段代碼放到裡面,在ie8裡面的頁面解析起來就跟ie7一模一樣的了,所以,基本上可以無視ie8,剩下的代碼只需要這樣寫就可以了 background:#ffc; /*
Time of Update: 2017-01-13
一、右邊固定左邊調適型配置右邊的元素浮動網頁的渲染和網頁的機構有很大的關係,最先出現的元素最先顯示,右邊的元素設定右浮動,左邊的元素不浮動,但是設定margin-right,設定的值為右邊元素的寬度。CSS 代碼如下複製代碼 #nav { width: 200px; float: right; overflow: hidden; }#content-wrapper { margin-right: 200px; }HTML<div