摘要:本篇文章探讨了HTML5+CSS3从入门到精通之实现卡片效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章探讨了HTML5+CSS3从入门到精通之实现卡片效果,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
一、文字卡片效果
1 <html>
2 <head>
3 meta<charset="utf-8">
4 <title>文字卡片效果</title>
5 <style>
6 div.card {
7 width: 250px;
8 box-shadow: 04px8px0rgba(0, 0, 0, 0.2), 06px20px0rgba(0, 0, 0, 0.19);
9 text-align: center;
10 }
11 div.header {
12 background-color: #4CAF50;
13 color: white;
14 padding: 10px;
15 font-size: 40px;
16 }
17 div.container {
18 padding: 10px;
19 }
20 </style>
21 </head>
22 <body>
23 <h2>卡片</h2>
24 <p>box-shadow 属性用来可以创建纸质样式卡片:</p>
25 <divclass="card">
26 <divclass="header">
27 <h1>1</h1>
28 </div>
29 <divclass="container">
30 <p>January 1, 2016</p>
31 </div>
32 </div>
33 </body>
34 </html>
二、图片卡片效果
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>图片卡片效果</title>
6 <style>
7 div.imgcard{
8 width: 250px;
9 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
10 text-align: center;
11 }
12
13 div.container{
14 padding: 10px;
15 }
16 </style>
17 </head>
18 <body>
19 <div>
20 <img src="background.png" style="width:100%"/>
21 <div>
22 <p>欢迎来到W星系</p>
23 </div>
24 </div>
25 </body>
26 </html>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号