css3商品图片卡片式切换特效代码下载


css3商品图片卡片式切换特效代码下载
css3商品图片卡片式切换特效代码下载以及商品图片、卡片式切换等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script  src="js/script.js"></script>

3. HTML代码

<div class = 'container'>
	<div class = 'product_container'>
		<div id = 'product_one' class='product'>
			<h2 class = 'title'>More Matte Collection</h2>
			<span class = 'color'>Red</span>
			<img src= 'img/1.png' alt= 'red headphones' class = 'image'>
			<span class= 'price'> $379.95</span>
		</div>
		<div id = 'product_two' class='product'>
			<h2 class = 'title'>More Matte Collection</h2>
			<span class = 'color'>Dark Blue</span>
			<img src = 'img/2.png' alt = 'blue headpones' class = 'image'>
			<span class= 'price'> $379.95</span>
		</div>
		<div id = 'product_three' class='product'>
			<h2 class = 'title'>More Matte Collection</h2>
			<span class = 'color'>Ivory</span>
			<img src = 'img/3.png' alt = 'white headpones' class = 'image'>
			<span class= 'price'> $379.95</span>
		</div>
		<div id = 'product_four' class='product'>
			<h2 class = 'title'>More Matte Collection</h2>
			<span class = 'color'>Black</span>
			<img src = 'img/4.png' alt = 'black headpones' class = 'image'>
			<span class= 'price'> $379.95</span>
		</div>  
		<div class = 'nav_btns'>
			<a href = '#product_one' class='link first_link'></a>
			<a href = '#product_two' class='link second_link'></a>
			<a href = '#product_three' class='link third_link'></a>
			<a href = '#product_four' class='link fourth_link'></a>
		</div>
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

相关推荐

发表评论

相关文章