注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

三层嵌套、背景图合并及定位  

2014-03-12 09:48:37|  分类: HTML+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

三层嵌套

我们来看看什么是三层嵌套例如:
三层嵌套、背景图合并及定位 - 毛线球 - zxy3622008的博客
 
这是一个表尾部分,这是一个背景设置。最基本的方法是将整张图作为背景,但是这样一来:一方面
扩展性不好,当宽度变化时要重新截取,另外使用多张大图不利于网站加速。要实现此效果就可以使用
背景图定位技术。只需如下的一点

三层嵌套、背景图合并及定位 - 毛线球 - zxy3622008的博客
 代码如下

<body>

<div class="con">

<div class="mid">

<div class="left">

<div class="right">

</div>

</div>

</div>

</div>

</body>

CSS代码:
给他们各自设置宽高后

.mid{

background:url() 0 -22px repeat-x;

}

.left{

background:url() 0 0px no-repeat;

}

.right{

background:url() right -44px no-repeat;

}


优点:加载数度变快 图片大小变小了
缺点: 增加了标签数量以及结构的深度

背景图合并

背景图合并技术室一门DIV+CSS的熟练使用和PS和图像结合的技术
通过精确到1px的CSS设置 使用PS合成背景图片,特别是小图合并 来完成页面效果
附:一个word文档 记录坐标
上面的那张小图就是背景图合并的产物,还可以将许多小按钮合并,甚至一个页面所有图标。
这样减少了图片的数量,同时也减少了客户对服务端的访问次数,叫嚣了服务器的压力
许多公司会使用CSS sprite 来背景图合并。


定位:

position: absolute | relative | static |fixed | inherit

绝对定位 相对定位 默认 相对于浏览器窗口的制定坐标 

top right left bottom 提供定位


relative 对元素的显示没有影响 absolute 会对元素的显示效果造成影响。
元素默认内容撑开高度 可设宽高 

相对-绝对的关系 

设置position;
参照(最近的 )父级的内容区域的左上角为初始点 结合top left right bottom 进行定位
如果没有设置,往其他父级继续寻找 直到找到为止 如果一直没有 则相对于 body进行定位 


z-index: 设置值| auto

  评论这张
 
阅读(4)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017