Time of Update: 2017-01-13
方法一這個方法把一些div的顯示方式設定為表格,因此我們可以使用表格的vertical-alignproperty屬性。<divid="wrapper"><divid="cell"><divclass="content">Contentgoeshere</div></div></div>#wrapper{display:table;}#cell{display:ta
Time of Update: 2017-01-13
使用css中的:hover製作菜單,有一點需要注意的是在設計菜單時,要先設計一級菜單(使用position: relative;),使用同樣樣式,二級菜單div{display: none;} ,再設計二級菜單div後的ul位置(使用position: absolute;)。 代碼如下複製代碼 <!DOCTYPE html><html lang=”zh-cn”><head><meta
Time of Update: 2017-01-13
效能差異:【border:0;】把border設為“0”像素雖然在頁面上看不見,但按border預設值理解,瀏覽器依然對border-width/border-color進行了渲染,即已經佔用了記憶體值。【border:none;】把border設為“none”即沒有,瀏覽器解析“none”時將不作出渲染動作,即不會消耗記憶體值。相容性差異:相容性差異只針對瀏覽器IE6、IE7與標籤button、input而言,在win、w
Time of Update: 2017-01-13
CSS為網頁設計者們提供了豐富而靈活的頁面元素表現形式的控制手段。但是,或許你可能注意到了,對於底線,CSS提供的可選操作卻不是很多。一般情況下,人們看到的底線基本上都是橫直線,缺少生氣和靈動。不過,路並不是死的,通過一些絕妙的改造,我們還是可以做出富有創意的底線來使頁面更為美觀。 這是一個自訂底線的例子:自訂的底線 。是不是很酷呢?除了能讓你的網頁呈現出一個與眾不同的風格之外,它還能對於文檔中不同的文字類型給與不同的視覺外觀,起到提醒或者著重的作用。
Time of Update: 2017-01-13
無圖片半透明背景css如果,單純地用背景色並結合opacity進行設定透明度,那麼會出現子項目中的文字也同樣出現透明的情況。第二種情況:用png透明度合適的背景圖,但這樣的話,還得針對IE6進行PNG圖片的灰色背景處理。第三種方法:用rgba結合專用hack相容常規瀏覽器。Rgba進行背景色填充,並設定透明度,並不會導致子項目也繼承其的透明度。例如:background:rgba(0,0,0,0.5);這句,就適合了支援CSS3.0的瀏覽器。但IE6、IE7、IE8,我們可以利用到IE濾鏡的漸層
Time of Update: 2017-01-13
最小高度可以設定一個BOX的最小高度,當其內容較少時時,也能保持BOX的高度為一定,超出就自動向下延伸,但到目前為止,只有Opera 和 Mozilla 支援,IE7開始也支援了,但IE7處於測試階段,等正式版發布到普及需一段也許比較長的時間,除非MS把它捆綁在某個作業系統上,如何在現有基礎上(IE6 80-90%),合理、妙用最小高度了?假定有二個BOX,我們需要它的最小高度為150PX。 代碼如下複製代碼
Time of Update: 2017-01-13
我的願景成為業內知名的web前端開發工程師整理一些前端開發規範文檔這份文檔已經寫了差不多一年了,最近也更新過了,作為一個有組織和紀律的團隊,規範是必須的,畢竟每個coder都有自己的一套風格和規範,為了以後團隊的和諧發展,結合前端業界的開發經驗,故而寫出了一個相對是大而簡潔的文檔,希望能夠對你也有所啟發。下面簡要的摘錄我的文件,詳細的可以在本文底部下載PDF文檔。第一部分:檔案規格1. tpl, css, js, img檔案均歸檔至<系統開發規範>約定的目錄中;2. tpl檔案命名:
Time of Update: 2017-01-13
IE的專有屬性: 代碼如下複製代碼 scrollbar-arrow-color: color; /*三角箭頭的顏色*/scrollbar-face-color: color; /*立體捲軸的顏色(包括箭頭部分的背景色)*/scrollbar-3dlight-color: color; /*立體捲軸亮邊的顏色*/scrollbar-highlight-color: color; /*捲軸的醒目提示(左陰影?)*/scrollbar-shadow-color: color; /*
Time of Update: 2017-01-13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type"
Time of Update: 2017-01-13
先看2張效果圖:CSS: 代碼如下複製代碼 /* 對話氣泡 用法:使用.speech-bubble和.speech-bubble-DIRECTION類 <div class="speech-bubble speech-bubble-top">Hi there</div>*/ .speech-bubble { position:
Time of Update: 2017-01-13
在IE9常常會遇到寫的DIV+CSS網頁,文字有時不能垂直置中使用line-height根本無效,即使可以設定IE瀏覽器的相容模式,但對於訪客而言不可能每個人都會去設定相容模式瀏覽,只能算是掩耳盜鈴的解決辦法,怎麼辦呢?只好搜尋了,百度了一下才找到原因,原來IE9不支援line-height的原因是中文ie9不支援英文字型,而我剛好使用的是英文字型。在IE9看見自己使用line-height設定垂直置中文字不能垂直置中,這是與你設定字型有關,通常大家習慣設定 代碼如下複製代碼
Time of Update: 2017-01-13
6.1 CSS入門6.1.1 什麼是CSS CSS(Cascading Style Sheet,層疊樣式表)是一種格式化網頁的標準方式,它擴充了 HTML 的功能,使網頁設計者能夠以更有效設定網頁格式。6.1.2 CSS的屬性單位6.1.2.1 長度單位 在CSS中用於描述長度的單位包括: cm 厘米 mm 毫米 em 當前字型中m字母的寬度 ex
Time of Update: 2017-01-13
ecshop會自動解析模板檔案中的圖片,css檔案,js檔案的路徑,但並不是所有的圖片,css檔案,js檔案的路徑都會替換,例如在dwt模板檔案中有: 代碼如下複製代碼 <link href="css/index.css" rel="stylesheet" type="text/css"> 將會自動替換成<link
Time of Update: 2016-11-24
建立CSS樣式文本導航條的最簡單解決方案也許就是把所有的連結都放在一行文本裡,這種方法看起來很合理也很直觀。但問題在於把所有的連結都放在一行文本裡就很難控制連結之間以及前後的空白。所以,為了避免所有的連結都擠在一起,你最後通常都不得不插入一些東西或者非換行的空白字元作為分隔,讓這些文字分離開來,不至於混在一起。 現在我們正常的做法是應用ul、li標籤把連結作為無序列表(unordered
Time of Update: 2016-05-16
一段文本或一張圖片,它的周圍有一圈光暈,這圈光暈每一秒鐘閃爍一次,而當滑鼠移到上面時,立即停止閃爍,當滑鼠移開時又繼續閃爍。這種效果用於那些需要特別引起別人注意的內容上(如:警示、報告新增內容等),能起到較好的效果。 上面這個樣本就能實現上面所的效果,由於這裡是抓取的一張圖片,不能看到動態效果,只要按下面介紹的方法,製作一個試試,其效果是一目瞭然的。其製作思路是:採用了CSS的“Glow”濾鏡產生光暈效果,利用CSS的屬性可動態改變的特性,用一小段javascript程式來每一秒鐘改變一次
Time of Update: 2016-05-16
也許已經有人發現可以這樣寫... CSS代碼部分 a.info { position:relative; z-index:0; background-color:#ccc; color:#000; text-decoration:none } a.info:hover { z-index:1; background-color:#ff0 } a.info span { display: none } a.info:hover span {
Time of Update: 2016-05-16
對於做網頁的初學者可能更習慣於使用一些漂亮的圖片作為自己網頁的背景,但是,瀏覽一下大型的商業網站,你會發現他們更多運用的是白色、藍色、黃色等,使得網頁顯得典雅,大方和溫馨。更重要的是,這樣可以大大加快瀏覽者開啟網頁的速度。一般來說,網頁的背景色應該柔和一些、素一些、淡一些,再配上深色的文字,使人看起來自然、舒暢。而為了追求醒目的視覺效果,可以為標題使用較深的顏
Time of Update: 2016-05-16
red紅色 等同於 rgb(255,0,0) 等同於 rgb(100%,0%,0%) 等同於 #ff0000 等同於 #f00 有17個預先確定的顏色,它們是: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent 也是一個正確的值。 rgb的三個值都是從0到25
Time of Update: 2016-05-16
我們的設計越來越追求一種簡潔的風格,希望在有限的空間內展示更多的內容。與此同時我們發現一些問題,內容的簡單排列總使頁面很長。滾屏很多才能將顯示的內容布局完畢。YAHOO與網易率先應用了標籤切換的布局方式,打破了常規布局的局限性,在相同尺寸的地區內,可以放置更多的內容。我們只需要點擊不同的選項卡或連結就能展開內容,這並不需要開啟新的網頁,只是在同一頁內完成。 一、標籤切換總體的實現思路: 實現這種標籤切換的布局有多種方式,也流傳著各種不同的代碼,我們應用DIV
Time of Update: 2016-05-16
微軟由於種種原因,在 sp2 後限制了 IE 的 ActiveX 的使用模式,就是在頁面中的 ActiveX 有一個虛框,需要使用者點擊一次才能正常互動。Flash是作為一個 ActiveX 嵌入到網頁中的,所以它也會受牽連,只有通過 JS 嵌入 Flash 才能解決這個問題。沒有 Flash 版本檢測,如果版本瀏覽器的flash外掛程式版本不夠,或者不能正常顯示你的 swf 檔案,或者會彈出一個 ActiveX