一、文字卡片效果

 <html>

 <head>

 meta<charset="utf-8">

 <title>文字卡片效果</title>

 <style>

 div.card {

 width: 250px;

 box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19);

 text-align: center;

 }​

 div.header {

 background-color: #4CAF50;

 color: white;

 padding: 10px;

 font-size: 40px;

 }​

 div.container {

 padding: 10px;

 }

 </style>

 </head>

 <body>

 <h2>卡片</h2>

 <p>box-shadow 属性用来可以创建纸质样式卡片:</p>​

 <divclass="card">

 <divclass="header">

 <h1>1</h1>

 </div>

 <divclass="container">

 <p>January 1, 2016</p>

 </div>

 </div>​

 </body>

 </html>

效果如下：

二、图片卡片效果

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>图片卡片效果</title>

         <style>

             div.imgcard{

                 width: 250px;

                 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

                 text-align: center;

             }

             div.container{

                 padding: 10px;

             }

         </style>

     </head>

     <body>

         <div class="imgcard">

             <img src="background.png" style="width:100%"/>

             <div class="container">

                 <p>欢迎来到W星系</p>

             </div>

         </div>

     </body>

 </html>

效果如下：

特别说明：本系列持续连载，不定期分享更新，参考自菜鸟教程（一个神奇的网站）！！！

实现卡片效果【DIV+CSS3】的更多相关文章

  1. div+css3实现漂亮的多彩标签云，鼠标移动会有动画

    div+css3实现漂亮的多彩标签云,鼠标移动会有动画 点击运行效果 <style> .dict { margin: 20px 0;clear:both ;text-align:left; ...

  2. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  3. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  4. 利用Camera和Matrix实现有趣的卡片效果

    这篇文章主要讲解一个翻转切换内容的卡片效果,主要利用Camera和Matrix来实现,主要是为了加深对Camera和Matrix的理解,如果对Camera和Matrix不清楚地童鞋可以看我的上篇文章: ...

  5. 好程序员分享DIV+CSS3和html5+CSS3有什么区别

    DIV+CSS3和html5+CSS3有什么区别,不管是DIV+CSS3还是html5+CSS3,他们都是我们对网页开发布局方式的统称,但是DIV+CSS3作为网页的基础开发这句话其实并不严谨,因为而 ...

  6. 一言不合敲代码（1）——DIV+CSS3制作哆啦A梦头像

    先展示一下我的头像吧. 作为一个前端ER,我的头像当然不能是绘画工具画出来的.没错,这个玩意是由HTML+CSS代码实现的,过年的某一天晚上无聊花了一个小时敲出来的.来看看它原本的样子: 为什么会变成 ...

  7. 简单的网页布局效果html5+CSS3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. div+css3列布局，带详尽注释

    直接看代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  9. H5手指滑动切换卡片效果

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

随机推荐

  1. Django设置联合唯一约束 -- migrate时报错处理

    异常信息: a unique database constraint for 2 or more fields together 场景描述: 对于ORM中多对多关系的中间表,如果该关系表是手动创建的, ...

  2. Identity Server4学习系列二之令牌(Token)的概念

    1.简介 通过前文知道了Identity Server4的基本用途,现在必须了解一些实现它的基本细节. 2.关于服务端生成Token令牌 头部(Header): { “typ”: “JWT”, //t ...

  3. 五、CLR加载程序集代码时,JIT编译器对性能的产生的影响

    1.CLR首次加载代码造成的性能损失 四.CLR执行程序集中代码介绍了CLR在首次执行一个类的时,会初始化一个内部结构,然后当目标方法被首次调用时,JITComplier函数(JIT编译器)会验证IL ...

  4. 使用GitHub Pages + Jekyll 建立博客

    https://pages.github.com/ http://jekyllbootstrap.com/usage/jekyll-quick-start.html Jekyll是一个静态网站生成器, ...

  5. Enterprise Library 6 学习笔记

    今天是2014年上班第一天,想着今年要做点与往年不同的事情,就从写博客开始吧. 公司的项目一般都用微软的企业库,一直没时间好好研究,第一天上班还不忙,就抽空研究了下.搜索一下,发现这个企业库已经到了6 ...

  6. 有意思的App

    掘金 javadoop 专业相机也羡慕奖 – Focos 说个睡前故事 so easy 奖 – 洪恩双语绘本 效率蹭蹭上升奖 – Sorted³ 时光隧道走一回奖 – NOMO 相机 设计师也爱用奖 ...

  7. 深入浅出zeptojs中tap事件

    1.tap事件实现 zepto 源码里面看关于tap的实现方法: $(document).ready(function(){ var now, delta, deltaX = 0, deltaY = ...

  8. 高可用Hadoop平台－集成Hive HAProxy

    1.概述 这篇博客是接着<高可用Hadoop平台>系列讲,本篇博客是为后面用 Hive 来做数据统计做准备的,介绍如何在 Hadoop HA 平台下集成高可用的 Hive 工具,下面我打算 ...

  9. JDK并发包中ExecutorCompletionService使用

    相信大家都知道,jdk中ExecutorService是并发编程时使用很频繁的接口,并且使用很方便,那么想在有这么一个场景: 一批任务使用线程池处理,并且需要获得结果,但是不关心任务执行结束后输出结果 ...

  10. 第3章:Hadoop分布式文件系统(2)

    数据流 读取文件数据的剖析 为了知道客户端与HDFS,NameNode,DataNode交互过程中数据的流向,请看图3-2,这张图显示了读取文件过程中主要的事件顺序. 客户端通过调用FileSyste ...