<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3锯齿花边价格表 - 网页模板</title>
<script type="text/javascript" charset="UTF-8" src="js/prefixfree.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />
<style>
body{
font-size:12px;
font-family:Verdana;
-webkit-text-size-adjust:none;
background: -*-linear-gradient(left, #464f76, #553a65, #6c3c4a, #683a4a);
}
@font-face{
font-family:"fonticon";
src:url(font/clock.eot);
src:url(font/clock.eot#iefix) format("embedded-opentype"),
url(font/clock.woff) format("woff"),
url(font/clock.ttf) format("truetype"),
url(font/clock.svg) format("svg");
font-weight:normal;
font-style:normal;
}
.tableWrap{
width:750px;
margin:50px auto;
}
.table{
width:215px;
border:none;
border-radius:5px;
color:#fff;
float:left;
margin-right:20px;
}
.table > h2{
font-size:26px;
text-align:center;
text-shadow:0 0 2px rgba(0,0,0,.3);
box-shadow:inset 0 1px 0px rgba(255,255,255,.5);
padding-top:14px;
height:65px;
border-radius:5px 5px 0 0;
background-color:rgba(107,92,147,.6);
background-size: 4px 4px;
background-image: -*-linear-gradient(45deg, #706096 25%, transparent 25%, transparent 75%, #706096 75%, #706096), -*-linear-gradient(-45deg, #706096 25%, transparent 25%, transparent 75%, #706096 75%, #706096);
}
.table > h2 em{
display:block;
font-size:12px;
color:#fff;
line-height:22px;
font-weight:normal;
}
.table:nth-child(2) > h2{
background-color:#ecb811;
background-size: 4px 4px;
background-image: -*-linear-gradient(45deg, #f0bf16 25%, transparent 25%, transparent 75%, #f0bf16 75%, #f0bf16), -*-linear-gradient(-45deg, #f0bf16 25%, transparent 25%, transparent 75%, #f0bf16 75%, #f0bf16);
}
.table .price{
background:#eddff7;
padding:30px 0 0;
text-align:center;
position:relative;
}
.table .price:after{
display:block;
content:"";
height:10px;
margin-top:20px;
background-color:#2a1e33;
background-size:10px 20px;
background-image:linear-gradient(45deg, #eddff7 25%, transparent 25%, transparent),
linear-gradient(-45deg, #eddff7 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #eddff7 75%),
linear-gradient(-45deg, transparent 75%, #eddff7 75%);
}
.table:nth-child(2) .price{
background:#f4eacd;
}
.table:nth-child(2) .price:after{
background-image:linear-gradient(45deg, #f4eacd 25%, transparent 25%, transparent),
linear-gradient(-45deg, #f4eacd 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #f4eacd 75%),
linear-gradient(-45deg, transparent 75%, #f4eacd 75%);
}
.table .price span{
display:block;
color:#9c6dbd;
font-size:24px;
font-weight:bold;
margin-top:-15px;
}
.table:nth-child(2) .price span{
color:#eca013;
}
.table .price span em{
font-size:50px;
font-style:normal;
vertical-align:-10px;
}
.table .price span:nth-child(2){
font-size:14px;
margin-top:-10px;
font-family:Helvetica;
}
.table .price button{
position:absolute;
color:#fff;
font-size:14px;
font-weight:bold;
right:-5px;
border:none;
top:38px;
width:62px;
height:32px;
line-height:32px;
background:-*-linear-gradient(top,#ba8bdb,#8b5bac);
box-shadow:0 0 2px rgba(0,0,0,.5);
}
.table:nth-child(2) .price button{
color:#fff;
background:-*-linear-gradient(top,#f1c312,#ec9f13);
}
.table .price button:before{
display:inline-block;
content:"";
position:absolute;
top:-8px;
left:-5px;
border-style:solid;
border-color:transparent #EDDFF7 transparent transparent;
border-width:24px 12px;
transform: rotate(180deg);
}
.table:nth-child(2) .price button:before{
border-color:transparent #f4eacd transparent transparent;
}
.table .price button:after{
display:inline-block;
content:"";
position:absolute;
top:31px;
right:0;
border-style:solid;
border-color:transparent transparent #1A1D1E #1A1D1E;
border-width:3px 2px;
transform: rotate(90deg);
}
.table ul{
background:rgba(0,0,0,.5);
padding:30px 0;
}
.table ul li{
padding-left:15px;
border-bottom:solid 1px #5c5971;
line-height:30px;
cursor:pointer;
}
.table ul li:nth-child(4), .table ul li:last-child{
border-bottom:none;
}
.table ul li:before{
font-family:"fonticon";
display:inline-block;
content:"\1F554";
font-size:16px;
vertical-align:-1px;
margin-right:8px;
}
.table ul li:nth-child(2):before{
content:"\1f4c1";
font-size:12px;
vertical-align:1px;
}
.table ul li:nth-child(3):before{
content:"\2605";
vertical-align:-2px;
}
.table ul li:nth-child(4):before{
content:"\2665";
vertical-align:-2px;
}
.table ul li:hover{
background:rgba(0,0,0,.15);
box-shadow:inset 0 0 2px #000;
}
.table p {
border-radius: 0 0 5px 5px;
background: rgba(0, 0, 0, .5);
padding: 0 15px 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>CSS3制作价格表</h1>
</hgroup>
</header>
<section class="demo">
<div class="tableWrap">
<div class="table light">
<h2>LIGHT<em>great for small business</em></h2>
<div class="price">
<span>$<em>5</em></span>
<span>MONTHLY</span>
<button type="button">JOIN</button>
</div>
<ul>
<li>12/24 Tech Support</li>
<li>Advanced Options</li>
<li>100GB Storage</li>
<li>1GB Bandwidth</li>
</ul>
<p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
</div>
<div class="table run">
<h2>RUN<em>great for small business</em></h2>
<div class="price">
<span>$<em>9</em>59</span>
<span>MONTHLY</span>
<button type="button">JOIN</button>
</div>
<ul>
<li>12/24 Tech Support</li>
<li>Advanced Options</li>
<li>100GB Storage</li>
<li>1GB Bandwidth</li>
</ul>
<p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
</div>
<div class="table fly">
<h2>FLY<em>great for small business</em></h2>
<div class="price">
<span>$<em>12</em></span>
<span>MONTHLY</span>
<button type="button">JOIN</button>
</div>
<ul>
<li>12/24 Tech Support</li>
<li>Advanced Options</li>
<li>100GB Storage</li>
<li>1GB Bandwidth</li>
</ul>
<p>Known locally as “SoMa”, this neighborhood was home to thd dot.com boom and boasts.</p>
</div>
</div>
</section>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：<a href="http://www.w3cplus.com/" target="_blank">w3cplus</a></p>
</div>
</body>
</html>
css3锯齿花边价格表 css3锯齿花边价格表代码下载.zip （7个子文件） 
css3锯齿花边价格表 css3锯齿花边价格表代码下载 jiaoben857 css 
base.css 1KB
index.html 7KB js prefixfree.min.js 6KB font clock.woff 3KB
clock.svg 2KB clock.ttf 5KB clock.eot 5KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 使用深度学习预测低压网络的电压分布 低电压(LV)电路的能量分布将发生变化，而以前的被动适应和-“忘记”的网络管理方法将是低效的，以确保其有效运行 需要一种自适应的方法，包括对电路风险的预测
- 小型六轴机器人样机，可二次开发，脉冲加方向，仪嘉控制器，
- 基于扩展卡尔曼滤波EKF和模型预测控制MPC，自动泊车场景建模开发，文复现 MATLAB（工程项目线上支持）
- （工程项目线上支持）横向控制，稳定性控制，直接横摆力矩控制 汽车电子稳定性控制建模仿真 包括模型和说明书 DYC, ESP
- 低成本dsp变频器方案，有C语言源码，编译码，PCB图纸，物料清单
- 三维重建程序～基于多视图几何的三维重建 代码特点： 1.使用osmbundler进行特征点提取与匹配； 2.使用cmvs进行稀疏点云的生成； 3.使用pmvs进行稠密点云的生成； 4.用户界面使用py
- 电动汽车动力系统整车仿真，具有双向DCDC变器实现能量反馈，可带异步电机，永磁同步电机仿真，应用最大转矩电流比控制加独特的弱磁控制策略
- 基于OpenCV的口罩识别系统 相关技术：python，opencv，pyqt （请自行安装向日葵远程软件，以便提供远程帮助） 软件说明：读取用户设备的摄像头，可实时检测画面中的人的口罩佩戴情况，并给
- matlab程序 研究方向：综合能源系统，微电网，主从博弈，合作，非合作博弈相关方向，多时间尺度
- 研究考虑综合需求响应和碳交易机制的冷、热、电、气4种能源形式的综合能源系统，系统内含能源设备主要包括光伏电源、风力机组、燃气轮机和燃气锅炉；储能系统主要包括储电设备蓄电池、储热设备蓄热槽；能量转设备包
- 研究考虑综合需求响应和碳交易机制的冷、热、电、气4种能源形式的综合能源系统，系统内含能源设备主要包括光伏电源、风力机组、燃气轮机和燃气锅炉；储能系统主要包括储电设备蓄电池、储热设备蓄热槽；能量转设备包
- labview自动化贴合设备程序 labview自动化贴合设备程序，包括上下CCD标定算法，9点标定，整机贴合精度0.1mm，边缘抓取全套源代码，标准架构，快速上手，其他项目快速适用
- system_ftnn_gbid.mp3
- stm32真实企业项目1，源码原理图PCB图，感谢已经拿后的多位客户，你们愿意为学习投资，节省时间 包含源码，原理图设计和pcb 项目要求与网上搜的那些开发板的例程完全不在一个级别，也不是那些凑合性质
- 提供基于comsol中相场方法模拟多孔介质两相驱替（水气、油水等等）的算例（也可以定做水平集驱替的算例），可在此基础上学会利用comsol软件进行两相流驱替的模拟，拓展研究，具体参考算例附后 附赠基
- C#，C#程序实例，C#与西门子，C#与西门子PLC通讯，C#与S7-200SMART以太网通讯，C#与西门子PLC通讯，原生Socket通讯，异步通讯，多线程操作，连接PLC数量没有限制，占用内存少
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
