小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 ...
随机推荐
- elasticsearch 之mapping
搭好elk 后,有时候会发现kibana 统计数据时,数据类型不对,这个时候就和elasticsearch的mapping有关,虽然我们可以用logstash修改传入es里的数据类型,比如 float ...
- canvas绘制坐标轴
效果图如下, var canvas = document.getElementById("canvas"), context = canvas.getContext("2 ...
- .Net开发笔记(十九) 创建一个可以可视化设计的对象
阅读本篇博客之前需要了解VS窗体设计器的工作原理,详细可参见本系列博客(十).(十一).(十二).必须需要知道的一条结论就是:处于窗体设计器(Form Designer)中的任何组件(包含控件,下同) ...
- [.net 面向对象程序设计进阶] (19) 异步(Asynchronous) 使用异步创建快速响应和可伸缩性的应用程序
[.net 面向对象程序设计进阶] (19) 异步(Asynchronous) 使用异步创建快速响应和可伸缩性的应用程序 本节导读: 本节主要说明使用异步进行程序设计的优缺点及如何通过异步编程. 使用 ...
- [开源]C#二维码生成解析工具,可添加自定义Logo
二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...
- Copy 与MutableCopy的区别
NSString *string = @"origion"; NSString *stringCopy = [string copy]; NSMutableString *stri ...
- OAuth2 Backend Web Application 验证过程
本文是从我的 github 博客转载的,原文请看. 一图胜千言.图片请自由转载,请保留图片的原始签名.
- 循序渐进,了解Hive是什么!
一直想抽个时间整理下最近的所学,断断续续接触hive也有半个多月了,大体上了解了很多Hive相关的知识.那么,一般对陌生事物的认知都会经历下面几个阶段: 为什么会出现?解决了什么问题? 如何搭建?如何 ...
- SQL 必知必会
本文介绍基本的 SQL 语句,包括查询.过滤.排序.分组.联结.视图.插入数据.创建操纵表等.入门系列,不足颇多,望诸君指点. 注意本文某些例子只能在特定的DBMS中实现(有的已标明,有的未标明),不 ...
- SVN项目锁定解决方案
扩:以后设置一下客户端过滤,bin,obj,.git,.vs 这些文件夹就不会再提交了 针对个别项目可以这样设置