日本国产一区二区,欧美一级毛片视频,特一级黄色片

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

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

以下為詳細代碼

<!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技巧

相關閱讀: css 里面的圖片定位position高級應用; 高度100%的絕對定位自適應布局技巧; 檢測非法字符; 長春天馬國際旅行社; 一個非常不錯的簡單的ajax讀取新浪rss的小例子; 旅行社管理系統商業版4.0發布; 這個可以做為論壇，也可以做留言板; 支持win7的node.js版本

共有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還有其它的嗎

更多>>隨機抽取信息: uni-app 搜索、歷史記錄功能簡單實現; 在網頁添加創建快捷方式的按鈕; 一個效果非常不錯圖片載入loading等待效果; 如何利用ASP清除所有的Application對象; 收集各種游覽器禁止javascript的方法; 深山行者留言系統V3.2發布

更多標簽熱門標簽

換行 ajax 圖片上傳鍵盤 asasds 顏色文件夾轉換 DW Javascript實現CSS代碼高亮顯示1 加密標語選項還原 iis outerHTML 火狐 asp.net sel 框管理 overflow 逗號 Alpha 斷線信息 ie 策劃改變 alert DropShadow 收藏夾菜單 checkbox ul 時間頁面上一頁瀏覽器 JavaScript實現文本框提示效果對聯 option 收縮狀態欄 label 插件 access loading 字符營銷翻滾

国产免费av片在线观看-国产免费av观看-国产免费av电影-国产免费a-四虎网站在线观看-四虎网站在线

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