css3响应式图文列表ui布局特效代码下载


css3响应式图文列表ui布局特效代码下载
css3响应式图文列表ui布局特效代码下载以及响应式、图文列表、ui布局等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="big">
	 <article class="recipe">
		<div class="pizza-box">
			<img src="img/12.jpg" width="600" height="547" alt="">
		</div>
		<div class="recipe-content">
			<p class="recipe-tags">
				<span class="recipe-tag">披萨</span>
				<span class="recipe-tag">主菜</span>
			</p>
			<h1 class="recipe-title"><a href="#">好吃的披萨</a></h1>
			<p class="recipe-metadata">
				<span class="recipe-rating">★★★★<span>☆</span></span>
				<span class="recipe-votes">(12 评论)</span>
			</p>
			<p class="recipe-desc">It really is possible to make excellent gluten free pizza at home in your own oven with our recipes and techniques.</p>
			<button class="recipe-save" type="button">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M 6.0097656 2 C 4.9143111 2 4.0097656 2.9025988 4.0097656 3.9980469 L 4 22 L 12 19 L 20 22 L 20 20.556641 L 20 4 C 20 2.9069372 19.093063 2 18 2 L 6.0097656 2 z M 6.0097656 4 L 18 4 L 18 19.113281 L 12 16.863281 L 6.0019531 19.113281 L 6.0097656 4 z" fill="currentColor"/></svg>
				收藏
			</button>
		</div>
	</article>
</div>
 <div class="small">
	 <article class="recipe">
		<div class="pizza-box">
			<img src="img/12.jpg"  width="600" height="547" alt="">
		</div>
		<div class="recipe-content">
			<p class="recipe-tags">
				<span class="recipe-tag">披萨</span>
				<span class="recipe-tag">主菜</span>
			</p>
			<h1 class="recipe-title"><a href="#">好吃的披萨</a></h1>
			<p class="recipe-metadata">
				<span class="recipe-rating">★★★★<span>☆</span></span>
				<span class="recipe-votes">(12 评论)</span>
			</p>
			<p class="recipe-desc">It really is possible to make excellent gluten free pizza at home in your own oven with our recipes and techniques.</p>
			<button class="recipe-save" type="button">
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M 6.0097656 2 C 4.9143111 2 4.0097656 2.9025988 4.0097656 3.9980469 L 4 22 L 12 19 L 20 22 L 20 20.556641 L 20 4 C 20 2.9069372 19.093063 2 18 2 L 6.0097656 2 z M 6.0097656 4 L 18 4 L 18 19.113281 L 12 16.863281 L 6.0019531 19.113281 L 6.0097656 4 z" fill="currentColor"/></svg>
				收藏
			</button>
		</div>
	</article>
</div>

相关推荐

发表评论

相关文章