【前端】Vue实现网站导航 以卡片形式显示(附Demo)

目录

  • 前言
  • 1. html版本
  • 2. Vue
    • 2.1 Demo1
    • 2.2 Demo2

前言

单独做一个跳转页面推荐阅读:【前端】实现Vue组件页面跳转的多种方式

但是如果网站多了,推荐卡片式导航,具体可看下文:(以图片显示显示各个网站,图片需要内嵌)
在这里插入图片描述

1. html版本

其实html版本和Vue相差不了多少,只是排版问题而已

这一版主要是卡片形式,但是没有嵌入图片,嵌入图片加个位置即可:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Website Navigation</title><!-- 引入Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><style>/* 样式可以根据您的需求进行自定义 */.websites {display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;}.website-card {width: calc(33.33% - 20px); /* 计算每个卡片宽度 */padding: 20px;margin: 10px;border: 1px solid #ccc;cursor: pointer;}</style>
</head>
<body><div id="app"><!-- 常用网站导航 --><div class="websites"><divclass="website-card"v-for="(site, index) in websites":key="index"@click="openWebsite(site.url)">{{ site.name }}</div></div>
</div><script>// 创建Vue实例new Vue({el: '#app', // 指定挂载点data: { // 数据websites: [{ name: 'Google', url: 'https://www.google.com' },{ name: 'GitHub', url: 'https://github.com' },{ name: 'Stack Overflow', url: 'https://stackoverflow.com' }]},methods: { // 方法openWebsite(url) {window.open(url);}}});
</script></body>
</html>

2. Vue

以下版本会由浅入深,相应修改

2.1 Demo1

卡片形式存在,但没有嵌入图片形式:

<template><div class="websites"><divclass="website-card"v-for="(site, index) in websites":key="index"@click="openWebsite(site.url)">{{ site.name }}</div></div>
</template><script>
export default {data() {return {websites: [{ name: 'Google', url: 'https://www.google.com' },{ name: 'GitHub', url: 'https://github.com' },{ name: 'Stack Overflow', url: 'https://stackoverflow.com' }// 在这里添加更多的网站]};},methods: {openWebsite(url) {window.open(url);}}
};
</script><style scoped>
/* 样式可以根据您的需求进行自定义 */
.websites {display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;
}
.website-card {width: calc(33.33% - 20px); /* 计算每个卡片宽度 */padding: 20px;margin: 10px;border: 1px solid #ccc;cursor: pointer;
}
</style>

如果嵌入图片,完整版如下(对应的网站可以修改为本项目路径等,通过request进行请求):

<template><div class="websites"><divclass="website-card"v-for="(site, index) in websites":key="index"@click="openWebsite(site.url)"><img :src="site.image" alt="Website Logo" class="website-image"><span>{{ site.name }}</span></div></div>
</template><script>
export default {data() {return {websites: [{ name: 'Google', url: 'https://www.google.com', image: 'https://via.placeholder.com/150', },{ name: 'GitHub', url: 'https://github.com', image: 'https://via.placeholder.com/150', },{ name: 'Stack Overflow', url: 'https://stackoverflow.com', image: 'https://via.placeholder.com/150', }// 在这里添加更多的网站]};},methods: {openWebsite(url) {window.open(url);}}
};
</script><style scoped>
/* 样式可以根据您的需求进行自定义 */
.websites {display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;
}
.website-card {width: calc(33.33% - 20px); /* 计算每个卡片宽度 */padding: 20px;margin: 10px;border: 1px solid #ccc;cursor: pointer;text-align: center;
}
.website-image {width: 100px; /* 图片宽度 */height: auto; /* 自动调整高度 */margin-bottom: 10px;
}
</style>

2.2 Demo2

以上代码图片可能居中,或者样式不够优美

可以适当让图片填充式的方式拉满整个卡片

<template><div class="websites"><divclass="website-card"v-for="(site, index) in websites":key="index"@click="openWebsite(site.url)"><div class="website-image"><img :src="site.image" alt="Website Logo"></div><div class="website-details"><span class="website-name">{{ site.name }}</span></div></div></div>
</template><script>
export default {data() {return {websites: [{ name: 'Google', url: 'https://www.google.com', image: 'https://via.placeholder.com/150', },{ name: 'GitHub', url: 'https://github.com', image: 'https://via.placeholder.com/150', },{ name: 'Stack Overflow', url: 'https://stackoverflow.com', image: 'https://via.placeholder.com/150', }// 在这里添加更多的网站]};},methods: {openWebsite(url) {window.open(url);}}
};
</script><style scoped>
/* 样式可以根据您的需求进行自定义 */
.websites {display: flex;flex-wrap: wrap;justify-content: flex-start;align-items: flex-start;
}
.website-card {width: calc(33.33% - 20px); /* 设置每个卡片的宽度 */margin: 10px; /* 设置外边距 */border: 1px solid #ccc; /* 设置边框 */cursor: pointer;overflow: hidden;text-align: center;display: flex;flex-direction: column;
}
.website-image {flex: 1;overflow: hidden;
}
.website-image img {width: 100%; /* 图片宽度充满整个卡片 */height: auto;
}
.website-details {padding: 10px;
}
.website-name {font-weight: bold;
}
</style>

使用了Flexbox布局

  • .website-card设置为display: flex;,以确保图片和文字在垂直方向上布局良好

  • .website-image部分设置为flex: 1;,以充满剩余的空间,并通过设置overflow: hidden;来确保图片不会超出卡片

  • .website-details部分包含了文字内容,并添加了一些样式来调整字体加粗等

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/677567.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL-视图(VIEW)

文章目录 1. 什么是视图&#xff1f;2. 视图 VS 数据表3. 视图的优点4. 视图相关语法4.1 创建视图4.2 查看视图4.3 修改视图4.4 删除视图4.5 检查选项 5. 案例6. 注意事项 1. 什么是视图&#xff1f; MySQL 视图&#xff08; View&#xff09;是一种虚拟存在的表&#xff0c;同…

七、滚动条操作——调整图像对比度

对比度调整&#xff1a;是在原来图像基础上进行相应的公式调整&#xff0c;是类似乘法操作&#xff0c;本身像数值越大&#xff0c;对比度增加之后其与低像素点值差距越大&#xff0c;导致对比增强 项目最终效果&#xff1a;通过滚动条trackbar来实现调整图片亮度的功能 我这里…

关于Import

一、Import解释 Import只能用在类上 Import通过快速导入的方式实现把实例加入spring的IOC容器中 Import注解可以用于导入第三方包 二、Import有三种使用方法 Import的三种用法&#xff1a; 1、直接填class数组方式 直接填对应的class数组&#xff0c;class数组可以有0到多个…

【Java】苍穹外卖 Day02

苍穹外卖-day02 课程内容 新增员工员工分页查询启用禁用员工账号编辑员工导入分类模块功能代码 **功能实现&#xff1a;**员工管理、菜品分类管理。 员工管理效果&#xff1a; 菜品分类管理效果&#xff1a; 1. 新增员工 1.1 需求分析和设计 1.1.1 产品原型 一般在做需…

6.JavaScript中赋值运算符,自增运算符,比较运算符,逻辑运算符

赋值运算符 就是简单的加减乘除&#xff0c;没啥可说的这里直接上代码比较好 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><…

RabbitMQ:分布式系统中的高效消息队列

目录 摘要 RabbitMQ简介 1.1 背景与起源 1.2 核心概念 RabbitMQ的基本工作原理 2.1 生产者和消费者 2.2 队列 2.3 交换机和绑定 RabbitMQ的使用 3.1 安装与配置 3.2 生产者示例 3.3 消费者示例 3.4 异常处理与监控 RabbitMQ在实际应用中的场景 4.1 消息通知 4.2…

深入理解STM32中断控制器:NVIC的工作原理与配置方法

在STM32微控制器中&#xff0c;中断控制是实现外部事件响应和实时任务调度的重要机制&#xff0c;其中中断优先级的配置和管理是至关重要的。NVIC&#xff08;Nested Vectored Interrupt Controller&#xff09;是STM32微控制器上的中断控制器&#xff0c;负责接收、管理和分发…

ios设备解锁 --Apeaksoft iOS Unlocker

Apeaksoft iOS Unlocker是一款针对iOS系统的密码解锁工具。其主要功能包括解锁多种锁屏类型&#xff0c;包括数字密码、Touch ID、Face ID和自定义密码。此外&#xff0c;它还可以帮助用户删除iPhone密码以进入锁屏设备&#xff0c;忘记的Apple ID并将iPhone激活为新的&#xf…

二叉树的锯齿形遍历,力扣

目录 题目&#xff1a; 我们直接看题解吧&#xff1a; 快速理解解题思路小建议&#xff1a; 解题方法&#xff1a; 相似题目对比分析&#xff1a; 解题分析&#xff1a; 解题思路&#xff1a; 补充说明&#xff1a; 思路优化&#xff1a; 代码实现(层序遍历倒序)&#xff1a; 题…

备战蓝桥杯---动态规划(基础2)

本专题主要是介绍几个比较经典的题目&#xff1a; 假设我们令f[i]为前i个的最长不下降子序列&#xff0c;我们会发现难以转移方程很难写&#xff08;因为我们不知道最后一个数&#xff09;。 于是&#xff0c;我们令f[i]为以i结尾的最长不下降子序列&#xff0c;这样子我们就可…

Leetcode 第 112 场双周赛题解

Leetcode 第 112 场双周赛题解 Leetcode 第 112 场双周赛题解题目1&#xff1a;2839. 判断通过操作能否让字符串相等 I思路代码复杂度分析 题目2&#xff1a;2840. 判断通过操作能否让字符串相等 II思路代码复杂度分析 题目3&#xff1a;2841. 几乎唯一子数组的最大和思路代码复…

C#系列-访问SqlServer+Mysql+Oracle数据库(6)

目录 一、 C#访问SqlServer数据库 二、 C#异步读取SqlServer数据库 三、 C#访问Mysql数据库 四、 C#访问Oracle数据库 一&#xff0c;C#访问SqlServer数据库 在C#中访问SQL Server数据库&#xff0c;你通常会使用ADO.NET (ActiveX Data Objects .NET)&…

“深度解析Java虚拟机:运行时数据区域、垃圾收集、内存分配与回收策略、类加载机制“

"深度解析Java虚拟机&#xff1a;运行时数据区域、垃圾收集、内存分配与回收策略、类加载机制" Java 虚拟机一、运行时数据区域程序计数器Java 虚拟机栈本地方法栈堆方法区运行时常量池直接内存 二、垃圾收集判断一个对象是否可被回收1. 引用计数算法2. 可达性分析算…

Python列表中的insert功能及用法举例

Python列表中的insert功能及用法举例 &#x1f335;文章目录&#x1f335; &#x1f333;引言&#x1f333;&#x1f333;insert()&#x1f333;&#x1f340;功能介绍&#x1f340;&#x1f340;语法&#x1f340;&#x1f340;示例&#x1f340;&#x1f340;注意事项&#x…

【Java】小白友好的SpringBoot简单开发基础学习笔记

目录 简介 简单代码示例 配置文件种类 选择特定profile 从配置文件获取数据 Spring Boot整合MyBatis代码示例 简介 Spring Boot是一个用于创建独立、生产级别的Spring应用程序的开源框架。它简化了基于Spring框架的应用程序的开发和部署过程&#xff0c;提供了一种快速构…

【前后端的那些事】webrtc入门demo(代码)

文章目录 前端代码apivue界面 后端modelwebsocketconfigresource 龙年到了&#xff0c;先祝福各位龙年快乐&#xff0c;事业有成&#xff01; 最近在搞webrtc&#xff0c;想到【前后端的那些事】好久都没有更新了&#xff0c;所以打算先把最近编写的小demo发出来。 p2p webrt…

for循环的多重跳出

for的多重跳出 1.前言2.标签使用3.使用异常的方式 本文在jdk17中测试通过 1.前言 前段时间面试时&#xff0c;面试官问我多重for循环如何跳出&#xff0c;我懵了&#xff0c;今天特别的研究了一下 本文主要说的不是continue与break&#xff0c;而是少用的另类操作 1.continue:…

数据结构——5.4 树、森林

5.4 树、森林 概念 树的存储结构 双亲表示法 孩子表示法 孩子兄弟表示法&#xff08;二叉树表示法&#xff09;&#xff1a; 二叉树每个结点有三个变量 ① 二叉树结点值&#xff1a;原树结点的值 ② 二叉树左孩子&#xff1a;原树结点的最左孩子 ③ 二叉树右孩子&#xff1a…

计算机网络——04接入网和物理媒体

接入网和物理媒体 接入网络和物理媒体 怎样将端系统和边缘路由器连接&#xff1f; 住宅接入网络单位接入网络&#xff08;学校、公司&#xff09;无线接入网络 住宅接入&#xff1a;modem 将上网数据调制加载到音频信号上&#xff0c;在电话线上传输&#xff0c;在局端将其…

【C语言|数据结构】数据结构顺序表

目录 一、数据结构 1.1概念 1.2总结 1.3为什么需要数据结构&#xff1f; 二、顺序表 1.顺序表的概念及结构 1.1线性表 2.顺序表分类 2.1顺序表和数组的区别 2.2顺序表的分类 2.2.1静态顺序表 2.2.1.1概念 2.2.1.2缺陷 2.2.2动态顺序表 三、动态顺序表的实现 3.1新…