一款纯CSS的清洁服务价格卡片,每个卡片都有一个鼠标悬停特效,底部的按钮也有一个文字悬停变图标的效果。
页面的head部分,需远程调用font-awesome图标字体库,并引入页面的样式文件,代码如下:
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,设置好每个价格卡片的内容,代码如下:
<h2 class="big-heading">纯CSS的清洁服务价格卡片</h2>
<div class="table">
<h2 class="heading">
house cleaning
</h2>
<div class="block">
<p>kitchen and bedrooms
<span class="price">$28/
<sub>hour</sub>
</span>
<ul class="options">
<li>wipe cabinets</li>
<li>wipe tops</li>
<li>dust tops of cabinets</li>
</ul>
</p>
</div>
<div class="block">
<p>bathroom
<span class="price">$29/
<sub>hour</sub>
</span>
<ul class="options">
<li>dust counters</li>
<li>dust light</li>
<li>wipe countertops</li>
</ul>
</p>
</div>
<div class="block">
<p>living room
<span class="price">$29/
<sub>hour</sub>
</span>
<ul class="options">
<li>make beds</li>
<li>dust furniture</li>
<li>dust mini-blinds</li>
</ul>
</p>
</div>
<button class="btn">
<p>立即预订</p>
<span class="fa fa-cart-plus" aria-hidden="true"></span>
</button>
</div>
<div class="table">
<h2 class="heading">
office cleaning
</h2>
<div class="block">
<p>once a week
<span class="price">$270/
<sub>hour</sub>
</span>
<ul class="options">
<li>( 4 Sessions - 3 hrs per Session )</li>
</ul>
</p>
</div>
<div class="block">
<p>twice a week
<span class="price">$574/
<sub>hour</sub>
</span>
<ul class="options">
<li>( 8 Sessions - 3 hrs per Session )</li>
</ul>
</p>
</div>
<div class="block">
<p>thrice a week
<span class="price">$670/
<sub>hour</sub>
</span>
<ul class="options">
<li>( 12 Sessions - 3 hrs per Session )</li>
</ul>
</p>
</div>
<div class="block">
<p>mon - fri daily
<span class="price">$990/
<sub>hour</sub>
</span>
<ul class="options">
<li>( 20 Sessions - 2 hrs per Session )</li>
</ul>
</p>
</div>
<button class="btn">
<p>立即预订</p>
<span class="fa fa-cart-plus" aria-hidden="true"></span>
</button>
</div>
<div class="table">
<h2 class="heading">
commercial cleaning
</h2>
<div class="block">
<p>kitchen and bedrooms
<span class="price">$28/
<sub>hour</sub>
</span>
<ul class="options">
<li>wipe cabinets</li>
<li>wipe tops</li>
<li>dust tops of cabinets</li>
</ul>
</p>
</div>
<div class="block">
<p>bathroom
<span class="price">$29/
<sub>hour</sub>
</span>
<ul class="options">
<li>dust counters</li>
<li>dust light</li>
<li>wipe countertops</li>
</ul>
</p>
</div>
<div class="block">
<p>living room
<span class="price">$29/
<sub>hour</sub>
</span>
<ul class="options">
<li>make beds</li>
<li>dust furniture</li>
<li>dust mini-blinds</li>
</ul>
</p>
</div>
<button class="btn">
<p>立即预订</p>
<span class="fa fa-cart-plus" aria-hidden="true"></span>
</button>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791