Time of Update: 2017-04-06
標籤:ie8 example 效果 set javascrip api family ros style Javascript模組化編程(一):模組的寫法ECMAScript 6
Time of Update: 2017-04-07
line-height: 1.76em;">合理的截斷多行文本是件不容易的事情,我們通常採用幾種方法解決:overflow: hidden 直接隱藏多餘的文本text-overflow: ellipsis 只適用於單行文本的處理各種比較脆弱的javascript實現。之所以說這種實現比較脆弱是由於需要文本長度的變化時刻得到迴流(relayout)後的布局資訊,如寬度原文寫作時間是2012.9.18號,比較有意義的一天。不過作者忽略了WebKit提供的一個擴充屬性 -webkit-
Time of Update: 2017-04-05
CSS是一種分離表述編碼和實際內容的一種最有用的方式,也是一種使搜尋引擎最佳化的方式,通常,網站設計中會建立一整套的css樣式標準,這些標準儲存在一個副檔名為css的單獨檔案中。然後利用HTML標籤設計網頁的時候,就會用到CSS檔案中的內容。三種簡單但很有效設計技術來指導你正確地利用css改進網站的設計,以使網站能在大多數搜尋引擎中的排名靠前。 一、用css技術構建檔案 首先考慮一下搜尋引擎啟動並執行實事。搜尋引擎機器人進入網站後,瀏覽網站上的內容,因為這些工具不會浪費過多的時間去尋找,
Time of Update: 2017-04-05
CSS學起來並不難,但在大型項目中,就變得難以管理,特別是不同的人在CSS書寫風格上稍有不同,團隊上就更加難以溝通,為此總結了一些如何?高效整潔的CSS代碼原則: 1. 使用Reset但並非全域Reset 不同瀏覽器元素的預設屬性有所不同,使用Reset可重設瀏覽器元素的一些預設屬性,以達到瀏覽器的相容。但需要注意的是,請不要使用全域Reset:*{ margin:0; padding:0;
Time of Update: 2017-04-05
本文整理了常見的CSS檔案命名規範、CSS樣式ID命名規範及其網站中常用的中英文對照。一、樣式檔案命名規範主要的 master.css布局,版面 layout.css專欄 columns.css文字 font.css列印樣式 print.css主題 themes.css二、CSS注釋/*CSS Document */ //css文檔/*Style for 項目名稱*/ //給某項目的樣式/*Editor:hyy,10.24
Time of Update: 2017-04-05
在前端製作的過程中會發現,一些文字/圖片連結,或者一些input控制項,在點擊時會在周圍出現虛線邊框,一般會在Firefox和IE瀏覽器下出現虛線框,Google下不會有。 這些虛線邊框是作為對視覺設計的一種輔助,在不使用滑鼠,而用鍵盤Tab鍵進行頁面瀏覽時,會標示出當前所在的連結或控制項的位置,便於瀏覽。這對那些視覺有障礙的人士來說更是必不可少的。 但是有些時候我們卻不想使用它們,因為瀏覽器對虛線框的解析有差異,並且不規則,所以在視覺設計上反而成為了某種缺陷。所以這種時候,我們想要禁用
Time of Update: 2017-04-05
使用xhtml+css布局經常性地會使用到float,很多邪門的事兒都有可能是浮動在作怪,那麼清除浮動就是必須要做的,而且隨時性地對父級元素清除浮動的做法也被認為是書寫CSS的良好習慣之一。此為未清除浮動原始碼,運行代碼無法查看到父級元素淺黃色背景。<style type="text/css">body { font-size:24px; color:red; }#layout { background:#FF0; }#left { float:left;
Time of Update: 2017-04-05
用CSS建立列印頁面,不必為列印而專門建立一個HTML檔案,可以節省一些體力,其前提是按“WEB標準”用CSS+p布局HTML頁面。第一、在HTML頁面加入為印表機設定的CSS檔案<link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" /><link
Time of Update: 2017-04-05
在 FF/Chrome 等較新的瀏覽器中可以使用css屬性background-color的rgba輕鬆實現背景透明,而文字保持不透明。而IE6/7/8瀏覽器不支援rgba,只有使用IE的專屬濾鏡filter:Alpha來實現,但是這樣寫法會把文字也變為透明,因此只有在透明容器的子節點(文本節點除外)內設定position:relative才能不繼承其父元素的透明濾鏡,代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Time of Update: 2017-04-05
多類選擇符的寫法。例如: #my.c1.c2 { color:red;} .c1.c2 { color:red;} 以上寫法在IE7+/FF/Opera/Safari 等瀏覽器都支援。 但在IE6中,後一個類名會覆蓋前一個類名,也就是說,上例被IE6理解為: #my.c2 { color:red;} .c2 { color:red;} 同理: #my.c1.c2.c3 { color:red;} IE6理解為 #my.c3 {color:red;} .c1.c2.c3 {
Time of Update: 2017-04-05
利用 CSS 架構,可以簡化你的工作,提高工作效率。CSS 架構是一系列 CSS 檔案的集合體,包含了基本的元素重設,頁面排版、網格布局、表單樣式、通用規則等代碼塊。下面給你推薦了27款優秀的CSS架構,你可以選用。 1. 960gs 960 像素的頁面寬度似乎成為了一種設計標準,在當前各種解析度下,能夠很好地展現網頁內容。提供較為常用的尺寸來簡化網頁設計過程,使工作簡單高效。 2. YUI 2: Grids CSS 芒果曾經介紹過由雅虎開發小組推出的 YUI,而這個 YUI
Time of Update: 2017-04-05
為什麼要初始化CSS?CSS初始化是指重設瀏覽器的樣式。不同的瀏覽器預設的樣式可能不盡相同,所以開發時的第一件事可能就是如何把它們統一。如果沒對CSS初始化往往會出現瀏覽器之間的頁面差異。每次新開發網站或新網頁時候通過初始化CSS樣式的屬性,為我們將用到的CSS或html標籤更加方便準確,使得我們開發網頁內容時更加方便簡潔,同時減少CSS代碼量,節約網頁下載時間。CSS初始化範例程式碼/* css reset www.admin10000.com */body,p,dl,dt,dd,ul,ol,
Time of Update: 2017-04-05
這個是一個很流行的清除浮動的方法,在很多大項目上已經被完全採用。這個方法來源於positioniseverything,通過after偽類:after和IEhack來實現,完全相容當前主流瀏覽器。.clearfix:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; } /*
Time of Update: 2017-04-05
什麼是CSS Hack? 不同的瀏覽器對CSS的解析結果是不同的,因此會導致相同的CSS輸出的頁面效果不同,這就需要CSS Hack來解決瀏覽器局部的相容性問題。而這個針對不同的瀏覽器寫不同的CSS 代碼的過程,就叫CSS Hack。CSS Hack 形式 CSS Hack大致有3種表現形式:CSS屬性Hack、CSS選擇符Hack以及IE條件注釋Hack, Hack主要針對IE瀏覽器。 1、屬性級Hack:比如IE6能識別底線"_"和星號" * "
Time of Update: 2017-04-05
CSS對瀏覽器的相容性有時讓人很頭疼,或許當你瞭解當中的技巧跟原理,就會覺得也不是難事,從網上收集了IE7,6與Fireofx的相容性處理方法並整理了一下.對於web2.0的過度,請盡量用xhtml格式寫代碼,而且DOCTYPE 影響 CSS 處理,作為W3C的標準,一定要加DOCTYPE聲名. CSS技巧1.p的垂直置中問題 vertical-align:middle; 將行距增加到和整個p一樣高 line-height:200px;
Time of Update: 2017-04-05
CSS命名規範一.檔案命名規範全域樣式:global.css;架構布局:layout.css;字型樣式:font.css;連結樣式:link.css;列印樣式:print.css;二.常用類/ID命名規範頁 眉:header內 容:content容 器:container頁 腳:footer版 權:copyright 導 航:menu主導航:mainMenu子導航:subMenu標 志:logo標 語:banner標 題:title側邊欄:sidebar圖 標:Icon注 釋:note搜 索:s
Time of Update: 2017-04-05
在網頁製作中,細邊框這個製作方法是必不可少的。這裡admin10000.com介紹2種常見的表格細邊框製作方法,均通過XHTML驗證。<!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.
Time of Update: 2017-04-04
最近公司要開發一個移動端的養成類網頁遊戲(就是用手點各種按鈕最後你會找到一個女朋友=。=),要求橫屏顯示,不能豎屏。有經驗的你肯定知道,當使用者豎屏開啟時,提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機裡的橫屏模式,還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。我先進行了調研,想看有沒有現成的api。參考過screen的api以及manifest方法
Time of Update: 2017-04-04
作為一名前端開發,尤其是在做移動端適配時,rem是我們經常用到的單位,它的好處大家可以自行搜尋,網上已經有很多了。但是我們再將設計稿上的px轉換成rem時,得手動的去計算,這是一個很耗時、費力的過程,有沒有什麼辦法可以“解放”我們呢?(原諒我的懶~)1.CSS處理器Sass、LESS以及PostCSS這樣的處理器都可以處理。Sass(使用Sass的函數、混合宏這些功能來實現):@function px2em($px, $base-font-size: 16px) { @if
Time of Update: 2017-04-04
我在做導航練習時,是查看那些已經成功的網站的原始碼進行練習,希望通過這些成功的代碼可以學習到代碼背後前端工程師們的編程思路。在查看原始碼中我也學習了很多以前忽視的細節,覺得受益匪淺啊。當我開啟拉勾網的css檔案時,第一部分是用注釋的方式標記了文檔的時間,作者以及樣式表內部方便查看的某些元素的顏色及寬高。第二部分是一些初始化的元素樣式,及初始化的公用類。第三部分是網頁各個部分的樣式。我做的第一個導航練習是拉勾網的導航。lagou_nav.jpg觀察與思考1、這個導航需要寫幾層嵌套呢?2、要不要設定