一、文字卡片效果

 <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. Vue2.5开发去哪儿网App 第四章笔记 上

    一 .  组件细节知识点 1.  解决组件在h5中编码规范 例如 : table , ul , ol  等等 <table> <tbody> <row></r ...

  2. 08-02 Java 代码块，代码块执行的先后顺序问题

    代码块 /* 代码块:在Java中,使用{}括起来的代码被称为代码块. 根据其位置和声明的不同,可以分为 局部代码块:局部位置,用于限定变量的生命周期. 构造代码块:在类中的成员位置,用{}括起来的代 ...

  3. Android学习总结——输入法将BottomNavigationBar(底部导航栏)顶上去的问题

    在应用清单中给当前<Activity>设置: android:windowSoftInputMode="adjustPan" 关于android:windowSoftI ...

  4. Redis 3.2.4集群实战

    一.Redis Cluster集群设计Redis集群搭建的方式有多种,例如使用zookeeper等,但从redis3.0之后版本支持Redis-Cluster集群,Redis-Cluster采用无中心 ...

  5. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  6. 大佬带你深入浅出Lua虚拟机

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏 作者:郑小辉 | 腾讯 游戏客户端开发高级工程师 写在前面:本文所有的文字都是我手工一个一个敲的,以及本文 ...

  7. 并发编程—— LinkedTransferQueue

    1. 前言 Java 中总的算起来有 8 种阻塞队列. 我们分析了: 并发编程之 SynchronousQueue 核心源码分析 并发编程之 ConcurrentLinkedQueue 源码剖析 并发 ...

  8. Webscoket

    websocket: http://blog.csdn.net/xiaoping0915/article/details/78754482    很好的讲解了websocket ,还有一个小例子 ht ...

  9. C# fileUpload视频上传

    要实现大文件上传必须配置webConfig例如: <system.web> <compilation debug="true" targetFramework=& ...

  10. 收集整理的oracle常用命令大全

    一.Oracle的启动和关闭 1.在单机环境下 要想启动或关闭ORACLE系统必须首先切换到ORACLE用户,如下 su - oracle a.启动ORACLE系统 oracle>svrmgrl ...