DIV CSS 佈局教程網

設為首頁加入收藏

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS：background-position的妙用

CSS：background-position的妙用

編輯：CSS進階教程

　　css2.0 中的 background-position 大家用到過嗎？怎麼用的？用在哪裡？js控制圖片切換有兩個缺陷：1.有時後切換緩慢,需要預載解決；2.要制作2-3套圖片

　　看看怎麼用 background-position 解決這個問題，實現快速"切換"，這裡只用到一張圖片

　　至於代碼中的font:10px/1也是不常見的用法

　　可以參考這裡:http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm

　　這種用法放在網站地圖或者導航條上的效果：

<style type="text/css">#menu a {display:block;width:150px;margin:6px; padding:10px 0 10px 32px;font:10px/1 sans-serif;color:#f90;background: url("http://nb001722.sosoo.net/btn.gif") top left no-repeat;text-decoration: none;}#menu a:hover {background-position: 0 -39px;color:red;}#menu a:active {background: url("http://nb001722.sosoo.net/btn.gif") 0 -78px no-repeat;color:black;}</style></head><body><div id="menu"><a href="###">Menu link 1</a><a href="###">Menu link 2</a><a href="###">Menu link 3</a><a href="###">Menu link 4</a><a href="###">Menu link 5</a></div><script language="Javascript"> var now = new Date(); document.write("<img src='http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime()  + "&cur="+escape(document.URL)+"' border='0' alt='' width='0' height='0'>"); </script> <noscript> <img src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" border='0' width='0' height='0'/> </noscript>

上一頁:CSS+DIV設計實例：不同色鏈接和其下劃線
下一頁:fieldset實現表中表效果

CSS進階教程

CSS教程(6)：實例學習CSS如何控制網頁文本: 網頁制作poluoluo文章簡介：本CSS教程主要講解網頁文字實例：1、設置文本顏色，2、設置文本的
修改IE浏覽器滾動條樣式的一個實例: 下面是一個滾動條樣式的例子，通過修改各個屬性值可以改變滾動條的樣子。<html><
各種跨浏覽器兼容的CSS編碼准則和技巧: 很多人認為，完美的跨浏覽器兼容並不必要，這樣說雖然沒錯，但在很多情形，一種近似的兼容還是很容易實現的

相關文章

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

CSS模塊化思想的優勢 CSS實例教程:網頁布局中的圖文列表 CSS的Margin屬性:詳解margin屬性 CSS教程:條件注釋的格式以及作用 CSS網頁制作教程:網頁首頁設計實例 CSS的未來:鮮為人知的CSS 2.1和CSS3屬性用css制作表單並體驗親和力入門級教程 CSS的基本語法兼容IE6/IE7/IE8/FireFox的CSS 無延遲翻滾的圖形/CSS混合風格的按鈕

熱門推薦

利用CSS按比例縮小圖片 SEO入門教程:自然搜索結果PPC廣告和熱圖 CSS布局需要掌握的8個你技巧 CSS教程：學習border-width屬性 CSS制作網頁實例:改變滾動條的樣式解析css中30個最常用的選擇器 CSS垂直居中網頁布局實現的5種方法 css教程:可讀性可維護性良好的CSS文件使用 CSS 創建固定寬度的布局

大家都在看

AjaxHelper使用范例精心挑選的15個jQuery下拉菜單制作教程 JS獲得URL超鏈接的參數值 jQuery之自動完成組件的深入解析 JavaScript獲取偽元素(Pseudo-Element)屬性的方法教程技巧用js實現小球的自由移動代碼 CSS響應性設計:不需要調整HTML隨意布局網頁 js獲取本機的外網/廣域網ip地址完整源碼

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|

Copyright © DIV+CSS佈局教程網 All Rights Reserved