国产视频福利在线观看,亚洲精品福利视频,亚洲色图50p

一張背景實現自適應九宮格

網絡 2008/12/10 21:34:27 深山行者字體:大中小瀏覽 16884

以下為詳細代碼

<!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.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一張背景實現自適應九宮格</title>
<style type="text/css">
/*為了讓看得簡單清晰點，CSS跟XHTML代碼就不寫那么復雜了*/
div,span{display:block;background-image:url(./UploadFiles/20081210213558176.gif);}/*我懶所以直接div,span算了*/

.mdl{overflow:hidden;position:relative;width:70%;padding:52px 28px 28px;background:#657B93;}
.mdl div{position:absolute;z-index:2;}
h3{position:absolute;top:20px;z-index:3;margin:0;}

.mdl_t_l{top:0;left:0;width:28px;height:52px;background-position:-28px -52px;}
div.mdl_t_c{top:0;z-index:1;width:100%;height:52px;background-position:-56px 0;}
   .mdl_t_c span{height:52px;background-position:-112px 0;}
   .mdl_t_r{top:0;right:0;width:28px;height:52px;background-position:-55px -52px;}

div.mdl_c_l{top:0;left:0;z-index:1;width:28px;background-position:0 -52px;}
   .mdl_c_l span{width:28px;height:2000px;background-position:0 -132px;}
div.mdl_c_r{top:0;right:0;z-index:1;width:28px;background-position:right top;}
   .mdl_c_r span{width:28px;height:2000px;background-position:right -80px;}

.mdl_b_l{bottom:0;left:0;width:28px;height:28px;background-position:-28px -104px;}
div.mdl_b_c{bottom:0;z-index:1;width:100%;height:28px;background-position:0 -133px;}
   .mdl_b_c span{bottom:0;height:28px;background-position:-56px -133px;}
   .mdl_b_r{bottom:0;right:0;width:28px;height:28px;background-position:-55px -104px;}

</style>
</head>
<body>

<div class="mdl">
   
   <h3>一張背景實現自  適應九宮格</h3>
   <p class="mdl_c_c">在原來的寬高自適應的九宮格基礎上做了一些優化，把八個背景圖請求改為一個，以降低網絡成本。其實這也只是一些簡單的小技巧，不過在切圖方面會比較嚴禁有1px的不對稱就會出問題，請留意下面例子的切割分析。</p>
   
   <div class="mdl_t_l"></div>
   <div class="mdl_t_c"><span></span></div>  
   <div class="mdl_t_r"></div>
   
   <div class="mdl_c_l"><span></span></div>
   <div class="mdl_c_r"><span></span></div>
  
   <div class="mdl_b_l"></div>
   <div class="mdl_b_c"><span></span></div>
   <div class="mdl_b_r"></div>
     
</div>

</body>
</html>

前一頁:CSS或js實現行間交替背景色效果

后一頁:幾個經典的css技巧

相關閱讀: js兼容多個瀏覽器右下角漂浮廣告; 符合web標準的嵌入Flash的方法; 華東賓館; 符合標準的正常工作的對聯廣告(2); 仙美境; 漢字轉聲母; 淡藍色的V2.1加強版; 了解CSS中em單位和px單位的區別

共有0條關于《一張背景實現自適應九宮格》的評論: 發表評論

正在加載評論......

返回頂部發表評論

呢稱:
表情:
內容:	評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
驗證碼:

網友評論聲明,請自覺遵守互聯網相關政策法規。

您發布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
三、本站對您所發布內容擁有處置權。

更多信息>>欄目類別選擇: 百度小程序開發; 微信小程序開發; 微信公眾號開發; uni-app; asp函數庫; ASP; DIV+CSS; HTML; python

更多>>同類信息: jquery設置或獲取修改classname; 利用css3.0寫出一個音樂播放的唱片碟盤的效果; 利用css中的scale()實現放大縮小效果; 利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數字讓背景色透明; css背景使用base64編碼或者將base64編碼放在img圖片標簽中; 利用css3中的-webkit-font-smoothing把網頁文字的毛邊去掉

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動端自動化測試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來做投票; 火狐Mozilla Firefox出現：無法載入您的Firefox配置文件它可能已經丟失或是無法訪問問題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過代碼修改pip下載源讓下載庫飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機抽取信息: asp從a到z循環輸出26個英文字母; ASP FSO的一些方法與擁有的屬性; excel中End(xlUp)取活動單元表的第一列最后一個有值的行號; 簡單Asp圖片驗證碼,收集大概35種各種各樣圖片樣式驗證碼，還有語音驗證碼; asp模擬動態加載include file; CSS光標屬性一覽表

更多標簽熱門標簽

msn 失效灰色讀取長提交調色板處理許愿 access innerHTML 等待圖片 Margin加倍 float 濾鏡路徑過濾鍵盤陰影效果快捷 onmouserout 破解 slectindext 奮斗焦點 dreawmeaver getElementById 斷線 eof Excel js 后臺 ewebeditor 靜態 cpu 排序表格輪流載入瀏覽器垂直 Response Javascript實現CSS代碼高亮顯示1 關聯客戶端 dl border 比例變大

99亚洲_成人性视频免费网站_av在线播放网址_免费成人在线网站_亚洲综合婷婷_亚洲一区二区国产

一張背景實現自適應九宮格