一、文字卡片效果

 <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. MATLAB 到 Python之路1_数据结构和简单操作

    在numpy中,用array来代替matrix,不同于MATLAB中的万物皆matrix,这里的数据首先以array存在,然后通过操作才能和矩阵形式的array运算 1,array的形式 1.1 一维 ...

  2. 【xsy1061】排列 树状数组

    题目大意:给你一个$1$到$n$的排列,问是否存在一对数$a,b(1≤a,b≤n,a≠b)$满足$a+b$为偶数且$(a+b)/2$在$a$和$b$之间. 数据范围:$n≤3\times 10^{5} ...

  3. Delphi：程序自己删除自己，适用于任何windows版本(含源码)

    Delphi:程序自己删除自己,适用于任何windows版本(含源码) function Suicide: Boolean; var   sei: TSHELLEXECUTEINFO;   szMod ...

  4. C++：实现类似MFC的IsKindOf功能

    假设需要一个类别库,改类别库共包含以下5个类:GrandFather(祖父类).Father(父类).Son(儿子类).Daughter(女儿类).GrandSon(孙子类) 各个类之间的继承关系为: ...

  5. 【转】Intellij IDEA使用总结

    原文地址:http://totohust.iteye.com/blog/1035550 1. IDEA内存优化 先看看你机器本身的配置而配置. \IntelliJ IDEA 8\bin\idea.ex ...

  6. Java1.8 JDK源码中，对两个类进行 按位与 操作是什么意思

    Java容器类库中的Map接口(java\util\Map.java)中有一个Entry接口(java\util\Map.java),其中有几个接口方法用到了类和类的按位与操作,即类和类之间有 &am ...

  7. 价值 1500 美元的 iPhone 值得买吗

    原文链接:价值 1500 美元的 iPhone 值得买吗 最新款 iPhone 的最高配型号在含税的情况下价格远超 1500 美元.价格合理吗?合理.理由如下:1,硬件已与笔记本电脑相当,价格也相当: ...

  8. Windows x86 下的 静态代码混淆

    0x00  前言 静态反汇编之王,毫无疑问就是Ida pro,大大降低了反汇编工作的门槛,尤其是出色的“F5插件”Hex-Rays可以将汇编代码还原成类似于C语言的伪代码,大大提高了可读性.但个人觉得 ...

  9. <Think Python>中统计文献单词的处理代码

    def process_line(line, hist):    """Adds the words in the line to the histogram. Modi ...

  10. su - oracle /bin/bash: Permission denied

     1) 以root身份执行 stat /  命令 查看权限是否正确 2) chmod 755 / 3) chmod 755 /bin/bash