黄色大片在线播放,√最新版天堂资源网在线,国产精品亚州

一張背景實(shí)現(xiàn)自適應(yīng)九宮格

網(wǎng)絡(luò) 2008/12/10 21:34:27 深山行者字體:大中小瀏覽 16848

以下為詳細(xì)代碼

<!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>一張背景實(shí)現(xiàn)自適應(yīng)九宮格</title>
<style type="text/css">
/*為了讓看得簡(jiǎn)單清晰點(diǎn)，CSS跟XHTML代碼就不寫那么復(fù)雜了*/
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>一張背景實(shí)現(xiàn)自  適應(yīng)九宮格</h3>
   <p class="mdl_c_c">在原來(lái)的寬高自適應(yīng)的九宮格基礎(chǔ)上做了一些優(yōu)化，把八個(gè)背景圖請(qǐng)求改為一個(gè)，以降低網(wǎng)絡(luò)成本。其實(shí)這也只是一些簡(jiǎn)單的小技巧，不過(guò)在切圖方面會(huì)比較嚴(yán)禁有1px的不對(duì)稱就會(huì)出問(wèn)題，請(qǐng)留意下面例子的切割分析。</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>

前一頁(yè):CSS或js實(shí)現(xiàn)行間交替背景色效果

后一頁(yè):幾個(gè)經(jīng)典的css技巧

相關(guān)閱讀: 使用uiautomatorviewer連接模擬器頁(yè)面報(bào)錯(cuò)No Android devices were detected by adb.; 亂涂; 服務(wù)器iis配置.mp4視頻格式播放(網(wǎng)頁(yè)播放.mp4有聲音但沒(méi)有圖像畫面); 億菇緣; 旅行社巴黎游主題模板效果; asp事務(wù)處理 for mssql; 深山留言板釣魚(yú)島效果; asp采用access數(shù)據(jù)庫(kù)搜索信息時(shí)因?yàn)槿瘴钠倜麊?wèn)題提示“Microsoft JET Database Engine 錯(cuò)誤80040e14”的解決方法

共有0條關(guān)于《一張背景實(shí)現(xiàn)自適應(yīng)九宮格》的評(píng)論: 發(fā)表評(píng)論

正在加載評(píng)論......

返回頂部發(fā)表評(píng)論

呢稱:
表情:
內(nèi) 容:	評(píng)論內(nèi)容:不能超過(guò) 1000 字,需審核,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。
驗(yàn)證碼:

網(wǎng)友評(píng)論聲明,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。

您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。

更多信息>>欄目類別選擇: 百度小程序開(kāi)發(fā); 微信小程序開(kāi)發(fā); 微信公眾號(hào)開(kāi)發(fā); uni-app; asp函數(shù)庫(kù); ASP; DIV+CSS; HTML; python

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

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

更多>>隨機(jī)抽取信息: 服務(wù)器iis配置.mp4視頻格式播放(網(wǎng)頁(yè)播放.mp4有聲音但沒(méi)有圖像畫面); 沙漠玫瑰旅行社; 靜態(tài)網(wǎng)站利用微信URL Scheme生成的ticket從瀏覽器h5跳到微信小程序完整代碼; 另類營(yíng)銷,“我在床上很厲害的哦”引發(fā)的思考; asp之自動(dòng)閉合HTML標(biāo)簽函數(shù); 吉林省文化國(guó)際旅行社

更多標(biāo)簽熱門標(biāo)簽

javascript 調(diào)色板字母列還原 Word 我想你 IE8 防止憂化廣告 dd iis 安裝 iis 理想購(gòu)物 flush media 標(biāo)語(yǔ) 信息 weatherxml 濾鏡寬 ie6 文本框組件 text 縮放調(diào)節(jié) 源碼查詢文化 ajax 小旋風(fēng) Alpha 加減想字體 submit 右擊心情替換載入利用position把div放在flash上 png24 在線 iframe 原則 flash 透明 border

能看的av_午夜黄色av_在线观看国产视频_天天爱综合_国产精品亚洲成在人线_日韩一

一張背景實(shí)現(xiàn)自適應(yīng)九宮格