CSS新手整理的CSS技巧

1、不要使用過小的圖片做背景平鋪。 這就是為何很多人都不用 1px 的原因,這才知曉。 寬高 1px 的圖片平鋪出一個寬高 200px 的區域,需要 200*200=40, 000 次,佔用資源。 2、無邊框。 推薦的寫法是 border:none;,哈哈,我一直在用這個。 border:0; 只是定義邊框寬度為零,但邊框樣式、顏色還是會被瀏覽器解析,佔用資源。 3、慎用 * 萬用字元。 所謂萬用字元,...

CSS教程:網頁字體及字體大小的設計

字體大小   CSS2規範根據長度——水準和垂直尺寸——來定義字體。 這個長度為一個數值,前面可能帶一個可選的加(+)或減(-)標記符。 另外,該數值後可能有一個可選的單位識別碼。   另外,CSS2規範定義了兩個單位類型:絕對單位和相對單位。 絕對值指定單位,而相對單位指定一個與另一個值成比例的值。 下面的清單列出了相對單位識別碼:   em:元素字體的高度。 它與使用該字體的元素的字體大小屬性計算...

IE與FF不相容網頁佈局CSS問題

CSS網頁佈局中往往會出現很多IE與FF不相容問題,下面整理了一些常見的可能及其解決的辦法! 1、用!important解決IE和Mozilla的佈局差別   !important是CSS1就定義的語法,作用是提高指定樣式規則的應用優先權,最重要的一點是:IE一直都不支援這個語法,而其他的瀏覽器都支援。 因此我們就可以利用這一點來分別給IE和其他瀏覽器不同的樣式定義,例如,我們定義這樣一個樣...

用CSS解決英文單詞的自動換行的問題

防止表格/層撐破又防止單詞斷裂 英文單詞的自動換行問題可以說折磨過很多人 如果一個單詞寫很長,會把表格給撐破的,而管了的話就會拆開英文單詞. 防止表格被撐破 這個問題曾經有很多人提及的,後來在早期的版本裡我也解決過,可是導致了英文詞語被拆散換行,所以在做新的範本時沒有加上控制此項的一些css碼。 今天試驗了一下,發現解決的方法很簡單。 按照網上大多數文章的說法,只要在CSS中加入: 代碼 ....

全方位清理CSS中浮動

清除浮動一個凡是做頁面的人都會遇到的一個東西,但是是否大家都能夠清楚的知道,全方位的瞭解呢? 於是一閑下來了馬上寫了這樣的一篇文章,不能講面面俱到,然而基本能將我所知道的傾囊相授了。 我們粗略的一起來看看清除浮動的辦法一共有多少個(IE裡面用zoom:1就不寫了,下一個專題再寫)。 對應的 DEMO 採用偽類:after進行後續空制的高度位零的偽類層清除 採用CSS overflow:auto的...

常用CSS樣式效果匯總

雖然CSS樣式的學習需要我們動手多實踐,需要多做案例,思致思考,但有時候注意資料的收集與整理也是非常重要的,在實際開發中往往會起到事半功倍的效果。 在www.phpq.net的文檔中,也提供了豐富的內容。 下面一些關於按鈕、文字方塊、表單的常用CSS樣式。 大家可以參考。   一、按鈕樣式 .buttoncss {   font-family: "tahoma", "宋...

CSS實現段落首行縮進

段落前面空兩個字的距離,不要再使用空格了。 應該使用首行縮進text-indent。   text-indent可以使得容器內首行縮進一定單位。 比如中文段落一般每段前空兩個漢字。   在這裡我們需要瞭解一種長度單位em。 em是相對長度單位。 相對於當前物件內文本的字體尺寸。   我們中文段落一般每段前空兩個漢字。 實際上,就是首行縮進了2em。   看下面的例子: <! DOCTYPE htm...

css技巧:經典常用CSS使用技巧幾則

使用 line-height 垂直居中   line-height:24px;   使用固定寬度的容器並且需要一行垂直居中時,使用 line-height 即可(高度與父層容器一致),更多的垂直居中總結可以看這裡。   清除容器浮動   #main {    overflow:hidden;   }   期前也提到過這樣的問題,更多資訊可以看這裡。   不讓連結折行   a {    ...

CSS實現表格儲存格強制換行和強制不換行

用CSS實現表格儲存格資料自動換行或不換行 1、自動換行: <style type="text/css"> . AutoNewline {   word-break: break-all;/*必須*/ } </style> <table> <tr>   <td class="AutoNew...

DIV+CSS網頁佈局及網站設計常犯錯誤

1、導航功能表使用圖片、FLASH 導航功能表使用圖片、FLASH當然比純文字來得好看一些,但是搜尋引擎並不認識你的圖片和FLASH。 如果你非要使用漂亮的圖片來做導航的話,可以使用背景替換的方法(我會在下次談到這一個方法的);如果你要使用FLASH做導航,那我就沒你辦法了。 建議做一個導航功能表連結的xml文提交到搜尋引擎。 2、不恰當地使用圖片 為了網頁美觀,經常會到處貼滿圖片,這樣做是不正確的,...

padding與line-height的區別

有朋友提出一個問題,padding與line-height的區別。 這是CSS基礎知識,對盒模型知識與佈局以及相關屬性不是很瞭解的時候,是很容易混淆與分不清楚的。   其實padding是佈局設置,對容器進行內邊距定義。 而line-height是行距設置,設置物件(如文本)的行高。   padding 是內補丁也叫內邊距,也稱為填充   檢索或設置物件四邊的補丁邊距。   如果提供全部四個參數...

CSS實現垂直居中的5種方法

利用 CSS 來實現物件的垂直居中有許多不同的方法,比較難的是選擇那個正確的方法。 我下面說明一下我看到的好的方法和怎麼來創建一個好的居中網站。 使用 CSS 實現垂直居中並不容易。 有些方法在一些瀏覽器中無效。 下面我們看一下使物件垂直集中的5種不同方法,以及它們各自的優缺點。 (可以看看 測試頁面 ,有簡短解釋。 )  方法一 這個方法把一些 div 的顯示方式設置為表格,因此我們可以使...

十條鮮為人知的CSS使用技巧

十條鮮為人知的CSS使用技巧 1.css字體簡寫規則 當使用css定義字體時你可能會這樣做: font-size:1em; line-height:1.5em; font-weight:bold; font-style:italic; font-variant:small-caps; font-family:verdana,serif; 事實上你可以簡寫這些屬性: font: 1em/1.5...

CSS控制圖片使它自我調整大小代碼

圖片自動適應大小是一個非常常用的功能,在進行製作的時候為了防止圖片撐開容器而對圖片的尺寸進行必要的控制,我們可不可以用CSS控制圖片使它自我調整大小呢? 下面就為你提供兩種方法,我個人推薦第一種方法 方法一 CSS控制圖片大小代碼 <style type="text/css"> img { border:0; margin:0; padding:0; max-w...

CSS網頁製作教程:字體單位em簡介

剛學網頁製作的時候,老師曾經告訴我必須用CSS強制定義字體大小,否則保證每個人都看到一致的效果。 這一點在現在的中國網站尤為明顯。 包括網易、搜狐這些入口網站在內的大部分網站,用的都是絕對單位px(圖元)。 但是,如果從網站易用性方面考慮,字體大小應該是可變的,一些視力不是那麼好的人需要放大字體才能看得清頁面內容。 然而,佔據大部分瀏覽器市場的IE無法調整那些使用px作為單位的字體大小。 國外人士非常...

CSS初學者入門:使用table佈局網頁不明智

使用Table佈局頁面為什麼是不明智的? 大家看到標題,不要誤解認為在頁面中不能使用Table,而是可以使用Table,但是儘量不要用Table去佈局頁面,為什麼這麼說呢,因為使用Table佈局頁面會使頁面失去靈活性,怎麼個靈活法呢, 比如今天你好不容易做出來的頁面,第二天老闆說我不喜歡登錄模組放到右邊,還是放到左邊,通知板塊放到右側去,頁面風格最好一個月換一種,如果遇到這種老闆...

網頁另存為js代碼

網頁另存為二款js代碼 其實很多時間我們都需要把網頁的內容直接另存為,下面我們提供二款js另存為的網頁代碼吧。 <html> <head> <title>另存網頁</title> </head> <body> <object classid="clsid :8856f961-340a-11d0-a...

可控制圖片左右滾動js代碼

本文章收藏了一款圖片左右滾動代碼源碼下載,是一款利用js實現的廣告圖片可左右滾動的圖片廣告代碼,這是來自于淘寶網站焦點圖代碼。 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "HTTP://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional...

關閉頁面時提示加入收藏和設為首頁js 代碼

1. 設為首頁 <script type="text/javascript"> function sethome(){ this.style.behavior="url(#default#homepage)"; this.sethomepage("HTTP://www.jzread.com"); return ...

js 檢查是否為網址代碼

js 檢查是否為網址代碼 在很多的時間需要檢查是否為網址代碼,驗證url是否為正確的格式哦,下面提供一款js驗證url函數,他可以驗證HTTPs教程|HTTP|ftp|rtsp|mms,還有埠。 **      * 檢查是否為網址      *      * @pa...

總頁數: 17 1 .... 5 6 7 8 9 .... 17 Go to: 前往

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.