使用VUE编写10*10代码图片表格的点击效果

最新推荐文章于 2024-07-14 11:16:56 发布

键客·

最新推荐文章于 2024-07-14 11:16:56 发布

阅读量49

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_70314630/article/details/129690058

版权

目标效果

点击后效果

代码

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>longdog</title>
		<script src="js/vue.js"></script>
		<!-- 必须要引入vue.js文件否则以下操作都是徒劳 -->
		<style>
			.content {
				width: 1630px;
				/* 这里建议设置为切片前图片大小加30px左右 */
				border: 1px solid blue;
				/* 设置边框 */
				margin: 0 auto;
				/* 设置整个盒子居中显示 */
				display: flex;
				/* 弹性布局 */
				flex-wrap: wrap;
				/* 换行 */
				justify-content: space-around;
				/* 对齐方式 */
			}
			
			img {
				/* 设置图片宽高，防止变形 */
				width: 160px;
				height: 160px;
			}
			
			.item {
				/* 设置每个图片所在盒子的宽高和背景色 */
				width: 160px;