css background設定背景圖片技巧及Sprite的應用

Background是什麼意思,翻譯過來有背景意思。同樣在css裡面作為css屬性一成員同樣是有背景意思,並且是設定背景圖片、背景顏色、背景圖片截取等樣式。首先先來看看background有那些值(可進入CSS手冊的background詳細瞭解)可以按順序設定如下屬性(可點擊進入相應的css手冊查看使用):background-color 背景顏色background-image 背景圖片background-repeat 背景重複background-attachment

學校學不到的【CSS中min-height】提示教程

最小高度min-height可以設定一個BOX的最小高度,當其內容較少時時,也能保持BOX的高度為一定,超出就自動向下延伸,但到目前為止,只有Opera 和 Mozilla 支援,IE7以上版本支援,如何在現有基礎上(IE6 80-90%),合理、妙用最小高度了?假定有二個BOX(box1和box2),我們都設定最小高度為150PX。以下是引用CSS片段:div.box1,div.box2{width: 300px; min-height: 150px;background:

css中div百分比垂直置中幾種方法

前言我們都知道,固定高寬的div在網頁中垂直置中很簡單,相信大家也很容易的寫出來,但是不是固定高寬的div如何垂直置中呢?我們在網頁布局,特別是手機等web端網頁經常是不固定高寬的div,那麼這些div如何垂直置中呢?這篇文章,我總結一下。固定高寬div垂直置中如上圖,固定高寬的很簡單,寫法如下:  代碼如下 複製代碼  position:

css 圖片透明度設定教程

opacity設定透明度在圖片的屬性中加上 opactiy例子  代碼如下複製代碼 img{opacity:0.4;filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本 */} 其實只要這樣就OK了,如果不針對IE甚至只要第一行,關鍵在於——啥,透明度的單詞怎麼拼,僅此而已。但上面只能用ie瀏覽器,後來找到一個相容性比較強的  代碼如下複製代碼 {filter:alpha(opacity=50); -

css 背景圖片自動縮放執行個體

預設情況下,背景屬性是平鋪的,如果背景圖片較大,而box小,那麼就只能顯示左上方那塊背景.如果要讓背景全部顯示出來,  代碼如下複製代碼 .color_checked { float: right; width: 16px; height: 16px; background: url(../images/color_check.png) center 0 no-repeat; -webkit-background-size:

CSS background-position背景圖片定位用法

最近在編寫 CSS 的過程中, 發現 W3C 組織對 background-position 的驗證有所調整, 雖然只是個小變動, 但可能影響很多人的編碼習慣, 所以我決定提出來講講.1. 關鍵字, 例如: background-position: top right;優點: 直觀, 可用性高, 各瀏覽器中表現一致.缺點: 缺少間隔尺寸. 三個垂直的 (top, center, bottom) 和三個水平的 (left, center, right) 只能為你組合出最多 9 個位置.

CSS浮出層常用寫法

例1  代碼如下複製代碼 <div class="poptip">     <span class="poptip-arrow poptip-arrow-top"><em>◆</em><i>◆</i></span>     <span

CSS不得不掌握的技巧【清除float浮動】

一、浮動產生原因一般浮動是什麼情況呢?一般是一個盒子裡使用了CSS float浮動屬性,導致父級對象盒子不能被撐開,這樣CSS float浮動就產生了。 浮動產生樣式效果截圖本來兩個黑色對象盒子是在紅色盒子內,因為對兩個黑色盒子使用了float浮動,所以兩個黑色盒子產生了浮動,導致紅色盒子不能撐開,這樣浮動就產生了。簡單地說,浮動是因為使用了float:left或float:right或兩者都是有了而產生的浮動。二、浮動產生負作用1、背景不能顯示由於浮動產生,如果對父級設定了(CSS

DIV CSS網頁布局執行個體:實現多個DIV排列置中

 代碼如下複製代碼 <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&

入門:學習網頁樣式CSS選擇符 、屬性和值的應用

  HTML有標籤,CSS有選取器。選取器是給內部和外部樣式裡面的樣式命名。  每個選取器都有屬性在{}裡面,比如簡單點像color,font-weight或background-color。  值在冒號(不是等號)後面,分號分離屬性。body {      font-size: 0.8em;      color:

用DIV CSS設計網頁時的八個必要的小技巧

以下是進行CSS設計時的八個必要的小技巧,良好的習慣可能會使你的設計周期加倍縮短。(如果您想瞭解更多請參見人民郵電出版社後續圖書《CSS精粹--101條設計技巧》)1.若有疑問立即檢測在出錯時若能對原始代碼做簡單檢測可以省去很多頭痛問題。W3C對於XHTML與CSS都有偵查工具可用,請見http://validator.w3.org

網頁執行個體:用CSS製作帶有樣式的網頁按鈕

今天把公司平台中前設計師做的按鈕部分重新設計了下,原先他使用的JS實現圖片交替變化的方式,但那樣的缺點是:佔用了input裡的ID屬性,而且disabled也不能使用,不利於程式的設計製作。按鈕重新製作的思想:1、實現觸發與不觸發之間的差別;2、適用input和a;3、多種瀏覽器下無差別。按鈕重新製作的過程:1、利用不同樣式實現觸發與不觸發之間的差別;2、利用boder來類比按鈕陰影以下代碼在IE6、IE7、FF下測試正常!CSS部分:  代碼如下複製代碼

標準製作網頁:用CSS的dl、dd、dt做表單

昨天做了個表單,依舊用table來布局,因為個人感覺table布局表單是不錯的(追求div重構,不等於完全拋棄table)。今天早上起來,想想還是換種方式來做表單的布局。於是便選種了dl、dd、dt,如下:XHTML部分:  代碼如下複製代碼 <dl> <dt>公司名稱:</dt> <dd><input name="text" type="text" value=&

學習:使用CSS樣式表布局網頁相容要點分析

IE vs FFCSS 相容要點:DOCTYPE 影響 CSS 處理FF: div 設定 margin-left, margin-right 為 auto 時已經置中, IE 不行FF: body 設定 text-align 時, div 需要設定 margin: auto(主要是 margin-left,margin-right) 方可置中FF: 設定 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個

總結:製作網頁寫CSS時參考的內容

1、有疑問,先驗證 調試時,先對代碼進行驗證。格式不正確的XHTML/CSS會導致許多錯誤。先在你最常用的瀏覽器中撰寫和測試CSS代碼,並盡量完善代碼。然後再設法相容其它瀏覽器。這樣從一開始你的代碼就是符合標準的,不必再為支援其它瀏覽器而勞心費神。(遵從標準的瀏覽器是Mozilla/Firefox, Safari,

用CSS實現的幾個非常漂亮的按鈕

提示:您可以先修改部分代碼再運行 用CSS實現的幾個非常漂亮的按鈕好看的按鈕好看的按鈕  好看的按鈕好看的按鈕好看的按鈕好看的按鈕 提示:您可以先修改部分代碼再運行

yii2.0模板引用js與css檔案

Yii2使用更加規範的方式,通過AppAsset::register($this)方法引入js和css檔案,在Yii2的樣本中,layouts的main.php中就有它的用法:AppAsset::register($this)。在WEB目錄中,會有一個assets目錄,這個目錄下有個Appasset.php檔案,內容如下:namespace frontend\assets; use yii\web\AssetBundle; /** * @author Qiang

text-overflow:ellipsis實現css文本溢出省略符號

在ie中我們只要簡單的利用text-overflow 這個 CSS 屬性實現文本溢出省略符號。例  代碼如下複製代碼 .entry_title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 但是在ie之外的瀏覽器就不行了,不過大家可利用php mb_strimwidth,也是按照 中文 2 個位元組,英文 1 個位元組

jquery 根據網址設定css樣式

 代碼如下複製代碼 $(function(){//var myurl=window.location.pathname;var myurl=document.URL;//alert(myurl);if(myurl.indexOf('www.111cn.net') > 0){$('#menu1 a').removeClass('on');$('#menu1 ul .li1 a').addClass('on');}if(myurl.indexOf('/open/') >

jquery css選取器學習筆記

1. $('node+next') == $('node').next()2. $('node~siblings') == $('node').nextAll();3. :gt(index)大於index序號的的元素,從0開始4. :lt(index)小於index序號的元素,從0開始4. :header

總頁數: 694 1 .... 414 415 416 417 418 .... 694 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.