简易实用的CSS产品图文卡片

简易实用的CSS产品图文卡片

添加时间:2021-02-26 20:35:12
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:文字列表
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款简易实用的CSS产品图文卡片,产品标题右上角有一个平滑切换的文字效果,“立即购买”按钮也有一个鼠标悬停的文字图标切换特效,右侧的产品图片在鼠标悬停时显示详细说明文字列表,文字列表悬停有放大效果。
简易实用的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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:简易实用的CSS产品图文卡片

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.112796s