一、文字卡片效果

 <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. 服务器返回的http状态码

    状态码 响应类别 原因短语 1XX 信息性状态码(Informational) 服务器正在处理请求 2XX 成功状态码(Success) 请求已正常处理完毕 3XX 重定向状态码(Redirectio ...

  2. （转）Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring

    Mybatis MapperScannerConfigurer 自动扫描 将Mapper接口生成代理注入到Spring Mybatis在与Spring集成的时候可以配置MapperFactoryBea ...

  3. 【LeetCode题解】24_两两交换链表中的节点（Swap-Nodes-in-Pairs）

    目录 描述 解法一:迭代 思路 Java 实现 Python 实现 复杂度分析 解法二:递归(不满足空间复杂度要求) 思路 Java 实现 Python 实现 复杂度分析 更多 LeetCode 题解 ...

  4. JAVA WEB 过滤器（Filter）中向容器 Spring 注入 bean

    如果直接使用 @Autoware 获取 bean 会直接使该 bean 为 null,这是因为这种配置过滤器的方法无法在过滤器中使用 Spring bean,因为 Filter 比 bean 先加载, ...

  5. 使用node.js的开发框架express创建一个web应用

    1.1.1:搭建环境     1.安装Express           按键:Windows+R=>输入cmd,打开命令行,输入 npm install -g express@3 我们需要用全 ...

  6. Netty 心跳服务之 IdleStateHandler 源码分析

    前言:Netty 提供的心跳介绍 Netty 作为一个网络框架,提供了诸多功能,比如我们之前说的编解码,Netty 准备很多现成的编解码器,同时,Netty 还为我们准备了网络中,非常重要的一个服务- ...

  7. 手把手教你实现自己的abp代码生成器

    代码生成器的原理无非就是得到字段相关信息(字段名,字段类型,字段注释等),然后根据模板,其实就是字符串的拼接与替换生成相应代码. 所以第一步我们需要解决如何得到字段的相关信息,有两种方式 通过反射获得 ...

  8. Dapper入门使用，代替你的DbSQLhelper

    Dapper介绍 Dapper是.Net下的一个轻量级ORM框架.在小型工具向的项目下,使用Dapper会使数据库操作层代码更加优雅. Dapper的使用 在项目中使用引用Dapper非常简单,你可以 ...

  9. C# 导出Excel表格

    function exportExcel() { //查询条件 var startTime = F.ui.startTime.getText() == "" ? null : F. ...

  10. C# 文本转语音，在语音播放过程中停止语音

    1,运用SpVoice播放语音 在VS2013创建Windows窗体应用程序项目,添加引用COM组件Microsoft Speech Object Library: using SpeechLib; ...