HTML：
<div class="title-wrapper">
<span class="title">
<span class="icon sp-index sp-index-tag-bg">
<i class="mood2 sp-base"></i>
</span>
<span class="txt">
<span class="occupy">吴奇隆机场推行李车 刘诗诗走其身侧秀美腿</span>
<a href="/" target="_blank">吴奇隆机场推行李车 刘诗诗走其身侧秀美腿</a>
</span>
</span>
</div>
CSS:
.focus-r{width:480px;}
.focus-r-base{width:480px;height:270px;position:relative;overflow:hidden;}
.focus-r-base .title-wrapper{width: 100%;height: 50px;position: absolute;bottom: 12px;text-align: center;}
.focus-r-base .title-wrapper .title{display: inline-block; }
.focus-r-base .title-wrapper .icon{width: 50px;height: 50px; float: left;}
.focus-r-base .title-wrapper .icon i{display: inline-block;width: 33px;height: 33px; margin-top: 8px; text-indent: 0;}
.focus-r-base .title-wrapper .txt{float: left; height:34px;line-height:34px; padding-top: 8px; color:#fff;font-size: 14px; word-spacing: 0;}
.focus-r-base .title-wrapper .txt .occupy{position: absolute; top: 8px; background: #000; filter:Alpha(opacity=60); opacity:.6; padding-right: 10px; border-radius:0 15px 15px 0;}
.focus-r-base .title-wrapper .txt a{color:#fff; padding-right: 10px; position: relative; z-index: 1;}
以上是主要的代码，有几点需要注意：
- 利用rgba实现有兼容性的问题，所以采用两层覆盖的方法
- float元素与position:absolute元素平级时，当绝对定位没有指定top/left时，float会在绝对定位元素前面出现
- 绝对定位元素当不指定top/left时，则相对于offsetParent内容区定位（不同浏览器有差异）；当指定top/left时，则相对于offsetParent的margin负边距定位
- inline-block元素间空隙问题，除了可以删除html中的空格外，也可以设置其word-spacing为负数
- z-index只适用新的层叠上下文，建立新的层叠上下文的属性有绝对/相对定位及一些css3属性。故本文在用z-index时，把元素设为了相对定位
时间： 2024-10-10 00:08:16