用图片做div背景的列表布局 CSS代码
2016-04-16 11:28
691 查看
思路:
1.因为是竖型列表,所以外层用 相对定位,这样 在不会重叠在一起 relative
2.里面用绝对位置 absolute,覆盖在图片上面
3.这里有个小技巧,我里面有个特效,文字竖立,并向右旋转90度(webkit 内核)width: 20px; font-size: 20px; -webkit-transform: rotate(90deg);
1.因为是竖型列表,所以外层用 相对定位,这样 在不会重叠在一起 relative
2.里面用绝对位置 absolute,覆盖在图片上面
3.这里有个小技巧,我里面有个特效,文字竖立,并向右旋转90度(webkit 内核)width: 20px; font-size: 20px; -webkit-transform: rotate(90deg);
<div style="position: relative; max-width: 560px; min-height: 115px;"> <img src="/Resources/images/hongbao_ky.png" style="width: 100%; max-width: 560px; min-height: 115px; " /> <div style="position: absolute; color: #ffffff; top: 8%; left: 3%;"><div style="width: 20px; font-size: 20px; -webkit-transform: rotate(90deg); ">2016.1.13</div></div> <div style="position: absolute; left: 20%; top: 0; color: #211b1a;"> <h2>50 代金券</h2> <h4 >核销号:12312312</h4> </div> </div>
相关文章推荐
- (转)Google的编程样式
- CSS 奇技淫巧十八招
- 关于CSS伪类选择器
- html+css写个blog首页
- CSS Sprite、CSS雪碧图应用实例
- CSS中一些@规则的用法小结
- POI之Excel单元格样式
- Css基本样式(二)
- display:inline、block、inline-block的区别
- CSS3的新属性animation
- CSS3 @keyframes 规则
- CSS 在编写时要注意的15个问题
- 使用HTML和CSS实现大白
- 盒子模型,块级元素和行内元素
- CSS、JS中的相对路径引用的区别
- iOS小技巧 - 全局修改状态栏的样式为白色
- CSS3动画
- 演示:纯CSS实现自适应布局表格
- HTML---CSS
- 一小时搞定DIV+CSS布局-固定页面开度布局