一张背景实现自适应九宫格 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

一张背景实现自适应九宫格

网络 2008/12/10 21:34:27 深山行者字体:大中小浏览 17058

以下为详细代码

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

相关阅读: 微信小程序开发中链接navigateTo与redirectTo的对比说明; Javascript脚本常用代码; httpd.ini伪静态网站分享到微信好友微信朋友圈链接打不开报404错误的解决办法; 针对新的百度采集系统进行的文章内容SEO基本优化原则; 在DIV+CSS里面IE5.5的专用标签; QQ强聊; 放大的分页代码; ASP.NET常用的三十三种实用代码(中)

共有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清除所有的Application对象; ASP连接各种数据库的方法; 各个苹果手表型号版本对比以及查看苹果手机Apple Watch型号; 利用ResponseXML的方法调用163天气预报; 网站终于在计划时间内完成了; 扬子国际

更多标签热门标签

混合选项卡收藏 window 垂直经典 javascri 千位无限凹陷拖动限制首页 filter 初级 body 超出 openwin 左右全 input 三级记录 margin 随机 cpu 九宫格斜线调色器 dd 留言板模版下拉框 absolute png 结果像素彩色失效电影还原游览器防止幻灯刷新获取计算不对齐酷保护眼睛的电脑色键盘 word-spacing word-break