一、文字卡片效果

 <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. SpringMVC初探-HelloWorld

    MVC的概念 MVC是一种设计模式,即Model--View-Controller,模型--视图--控制器 Model(模型)表示应用程序核心(比如数据库记录列表). View(视图)显示数据(数据库 ...

  2. [Spring]@Autowired,@Required,@Qualifier注解

    @Required注解 @Required注解用于setter方法,表明这个属性是必要的,不可少的,必须注入值 假设有个测试类,里面有name和password两个属性 我给两个属性的setter方法 ...

  3. 使用Docker发布应用

    新建spring boot应用demo-docker,添加web依赖 <dependency> <groupId>org.springframework.boot</gr ...

  4. mysql pdo设置显示报错

    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);    

  5. 通过DataTrigger绑定Tag属性值进行判断(.net 3.5的环境)

    如下,在UserControl中通过Tag传递不同的值,然后在Style中使用DataTrigger进行判断, <UserControl Style="{DynamicResource ...

  6. java web 手动部署项目步骤

    java Web 手动部署项目步骤 1 在tomcat下面的webapps下面建立需要部署的文件夹(eg:demo);2 在demo下建立 WEB-INF WETA-INF src 文件夹;3 在sr ...

  7. 基于Hadoop2.6.5(HA)的Hive1.2.1的MySQL方式配置

    1.Hive配置MySQL Hive只是一个工具,无需配置多台机器,我在CentOS7One机器上配置Hive /usr/local/hive/apache-hive-1.2.1-bin/conf c ...

  8. sscanf函数详解 & 查找文件字符串

    1. sscanf函数 sscanf() - 从一个字符串中读进与指定格式相符的数据. 1.1 函数原型 int scanf(const char *format, ...); int fscanf( ...

  9. 一个Time TodoList实例了解redux在wepy中的使用

    @subject: wepy-redux-time-todo @author: leinov @date:2018-10-30 @notice: 小程序(wepy)开发群110647537 欢迎加入 ...

  10. [转]ASP.NET 核心模块配置参考

    本文转自:https://docs.microsoft.com/zh-cn/aspnet/core/host-and-deploy/aspnet-core-module?view=aspnetcore ...