小div布局之卡片堆叠(card-stacking)
前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍。
如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠。然后我百度了下,还真有这种堆叠效果的实现,比如这个比如这个:jQuery和CSS3炫酷堆叠卡片展开和收缩特效。google下card stacking,发现了个这个Effects for Card Stacks。当然,上面两个网址上的效果都比较复杂,我这里的需求简单,只要实现下面的效果就好。
话不多说,上代码:
<style>
.container {
margin: 50px auto;
width: 328px;
} .box {
background: #f7f7f7;
position: relative;
} .box-content {
padding: 20px;
width: 70%;
} .box-content-title {
margin: 0 0 10px;
} .box-content-desc {
-webkit-box-orient: vertical;
color: #333;
display: -webkit-box;
font-size: 14px;
line-height: 1.5;
-webkit-line-clamp: 4;
margin-bottom: 30px;
overflow: hidden;
text-overflow: ellipsis;
} .box-content-link {
color: #006ec8;
font-size: 14px;
text-decoration: none;
} .box-content-link:hover {
text-decoration: none;
} .box-img {
position: absolute;
right: -38%;
top: 20px;
}
</style>
<div class="container">
<div class="box">
<div class="box-content">
<h5 class="box-content-title">A公司</h5>
<div class="box-content-desc">A公司是B公司的重要战略伙伴,致力于为C行业提供一站式 解决方案,目前处于高速发展期。公司旗下有四个事业部,业务主要涵盖以下三个方面,2016年公司 年营业额达到100万元。
</div>
<a class="box-content-link" href="javascript:void(0);">查看 >></a>
</div>
<img class="box-img" src="../../asset/images/logo/obama-card196x172.jpg" alt="">
</div>
</div>
说来其实很简单,.box的子元素.box相对定位,加背景色;.box-content正常排布,用width和padding来控制其子元素的位置;.box-img绝对定位,用right和top来控制位置,基本就可以实现所要的效果。
小div布局之卡片堆叠(card-stacking)的更多相关文章
- div布局小技巧
第一: 多个div整齐排列在外层div中,如图: 看到所有小的div的前后左右间隔都相等.假定已经制作好上述单元div控件.在外层大div中循环开始创建它们. for (var i=0; i < ...
- 慕课网5-2编程练习:flex布局制作卡片布局案例
慕课网5-2编程练习:flex布局制作卡片布局案例 小伙伴们,学习了卡片布局,接下来我们根据效果图,也写出一个卡片布局的页面吧! 效果图如下: 任务 1.主体内容的卡片一行只能显示两个. 2.卡片与卡 ...
- DIV布局之道二:DIV块的嵌套,DIV盒子模型
本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...
- (转)盒子概念和DiV布局
CSS盒子和DIV布局 (2013-11-24 16:17:29) 转载▼ 一.认识div层 1.<DIV>标记是一个区块容器标记,在标记之间可以放置其他一些HTML元素,例如p,h1,t ...
- table布局与div布局
DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...
- bootstrap 在超小屏布局时使用 clearfix
bootstrap 在超小屏布局时使用 clearfix 先看案例,一共四个 div,使用 col-xs-6, 所以在特别小型设备上时会变成两行. 不过我们发现如果第一个 div 内容多了后会变成如下 ...
- 技术胖Flutter第三季-18布局CardWidget 卡片布局组件
技术胖Flutter第三季-18布局CardWidget 卡片布局组件 博客地址: https://jspang.com/post/flutter3.html#toc-420 最外面是Card布局,里 ...
- Android零基础入门第50节:StackView卡片堆叠
原文:Android零基础入门第50节:StackView卡片堆叠 上一期学习了AdapterViewFilpper的使用,你已经掌握了吗?本期开始学习StackView的使用. 一.认识StackV ...
- HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片
一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...
随机推荐
- WebClient 数据传输
数据提交 post ,get public string WebClientPost(string PostData, string PostUrl, string Type) { string p ...
- ubuntu 安装与开始学习
下载地址 http://cn.ubuntu.com/download/ 经验: 1.遇到安装问题,首先尝试解读错误,再使用 ./configure --help 不行再上Stack overflo ...
- front end about mobile web techs
WEB OF DEVICES http://www.w3.org/standards/webofdevices/ MOBILE WEB http://www.w3.org/standards/webd ...
- 【安装mysql】windows安装压缩版mysql5.7.15
160915.1459 综述 中午安装成功,但是启动失败,很可能是压缩包有问题(从别人拷的),解决了近一个小时,没搞定,于是换条方案,重新去官网下载压缩包,这次看准了windows架构,且64-b ...
- UnderScore源代码阅读1
读一下underscore源代码,用于自己学习,个人理解,如果有不对的地方希望指正,谢谢 我觉着阅读的顺序按照从整体到局部,从架构到细节较好. 1.整体架构 (function() {}.call(t ...
- 【腾讯Bugly干货分享】Redex初探与Interdex:Andorid冷启动优化
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/583b9e3ee8992c2c2df6e6ac 导语 早在去年10月份,face ...
- Some warning were found during validation
前几天做一个iOS下的App更新,到上传的时候出了问题,一直传了大半个小时,结果还是没传完,再试依然不行,于是只好关机,把电脑带回家弄. 回家后出现了更奇怪的事,经过漫长等待后,竟然出现这个提示: 我 ...
- 在C#代码中应用Log4Net(二)典型的使用方式
不管用什么框架,学什么东西,最初的想法还不是尽快地用上这个框架,所以我们在这个章节还是不打算介绍具体配置节的应用,而是直接给出一个经典的使用样例,让你尽快上手.即使你对Log4Net的配置不熟悉也完全 ...
- Alljoyn之管中窥豹
Alljoyn之管中窥豹 一.历史: Alljoyn是高通2011年推出的近距离P2P通讯技术,它为分布式应用程序在不同设备中提供了运行环境,特别是移动性.安全性和动态配置,支持Microsoft W ...
- GIS规划应用——基于哈夫模型的GIS服务区分析
1. GIS服务区分析 区位因素是商业分析中一个至关重要的因素,因此在商店选址时,例行的服务区分析十分重要.服务区是指顾客分布的主要区域,在其范围内该店的商品销售量或服务营业额超过其竞争对手.对于现 ...