一款简易实用的CSS产品图文卡片,产品标题右上角有一个平滑切换的文字效果,“立即购买”按钮也有一个鼠标悬停的文字图标切换特效,右侧的产品图片在鼠标悬停时显示详细说明文字列表,文字列表悬停有放大效果。
页面的head部分,需远程调用font-awesome图标字体库,并引入本地样式文件,代码如下:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="css/style.css">
页面的body部分,用了div的嵌套结构,里面有图标i标签、span文字标签、ul无序列表等,代码如下:
<div id="container">
<!-- Start Product details -->
<div class="product-details">
<!-- Product Name -->
<h1>花之物语</h1>
<!-- <span class="hint new">新品</span> -->
<!-- <span class="hint free-shipping">包邮</span> -->
<!-- the Product rating -->
<span class="hint-star star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-half-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</span>
<!-- The most important information about the product -->
<p>“集装箱园艺特别好,天使花将保持盛开的夏天即使除去旧花。一旦足够高,切割,带他们进来,你会闻到一个淡淡的香味,有的说是让人联想到苹果。”</p>
<!-- Control -->
<div class="control">
<!-- Start Button buying -->
<button class="btn">
<!-- the Price -->
<span class="price">¥109</span>
<!-- shopping cart icon-->
<span class="shopping-cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></span>
<!-- Buy Now / ADD to Cart-->
<span class="buy">立即购买</span>
</button>
<!-- End Button buying -->
</div>
</div>
<!-- End Product details -->
<!-- Start product image & Information -->
<div class="product-image">
<img src="https://sc01.alicdn.com/kf/HTB1Cic9HFXXXXbZXpXXq6xXFXXX3/200006212/HTB1Cic9HFXXXXbZXpXXq6xXFXXX3.jpg" alt="Omar Dsoky">
<!-- product Information-->
<div class="info">
<h2>宝贝描述</h2>
<ul>
<li><strong>光照:</strong>全日照</li>
<li><strong>土壤:</strong>潮湿</li>
<li><strong>区域:</strong>9 - 11</li>
<li><strong>高度:</strong>2 - 3 英尺</li>
<li><strong>开花:</strong>中夏至中秋</li>
<li><strong>特点:</strong>耐热性好</li>
</ul>
</div>
</div>
<!-- End product image -->
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791