...小于 1 分钟
你好，我来自山东济南，毕业于曲阜师范大学，喜欢编程，热爱技术，热爱生活
技术栈
- 熟悉前端开发，掌握 HTML、CSS、JavaScript、Vue 等前端技术
爱好
- 魔方
- 摄影
- 数码产品
联系方式
- QQ：3407085928
- 微信：Pisces12013
- 邮箱：zhf5256@qq.com
- 博客：茕茕の博客
- GitHub：https://github.com/zhf521
...小于 1 分钟
效果描述
当页面滚动时，导航栏固定在顶部。
实现方法
我们可以使用粘性定位来实现。
- 将导航栏的
position属性设置为sticky，并设置top属性将其固定在顶部。 - 设置
z-index属性以确保导航栏在页面其他元素之上显示。
效果展示
...小于 1 分钟
效果描述
当文字多少不确定时，让盒子宽度自适应文字内容。
实现方法
为盒子设置width:fit-content;
效果展示
...小于 1 分钟
通过 grid 属性调整。
grid:{
top:'0px',
left:'0px',
right:'0px',
bottom:'0px
}
...小于 1 分钟
单行文本溢出显示省略号
- 使用
white-space属性来指定文本的处理方式，将其设置为nowrap，表示不允许换行。 - 使用
text-overflow属性来指定溢出文本的处理方式，将其设置为ellipsis，表示使用省略号来代替溢出的文本。 - 为了让
text-overflow属性生效，还需要将overflow属性设置为hidden或clip。
...大约 1 分钟
网页中常见一些三角形，使用 CSS 边框可以 直接画出来，不必做成图片或者字体图标
- 盒子宽度高度为 0
- 4 个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent （透明）
...小于 1 分钟
Vue 实现文字跑马灯效果
封装了一个组件，用于实现文字跑马灯效果。
组件源码
<!-- Carousel.vue -->
<template>
<!-- 跑马灯容器 -->
<div class="container" ref="containerRef">
<!-- 跑马灯 -->
<div :class="textOverflow && 'content'"
:style="{ animationDuration: `${duration}s`, animationDelay: `${props.scrollDelay}s` }">
<!-- 文本内容 -->
<div :style="[{ paddingRight: `${props.textGap}px`, whiteSpace: 'nowrap' }, props.textStyle]"
ref="textContentRef">{{
props.textContent }}</div>
<!-- 文本溢出时追加的文本内容 -->
<div :style="[{ paddingRight: `${props.textGap}px`, whiteSpace: 'nowrap' }, props.textStyle]"
v-show="textOverflow">{{
props.textContent }}</div>
</div>
</div>
</template>
<script setup>
import { ref, watch, nextTick, onMounted } from 'vue';
// 获取跑马灯容器元素
const containerRef = ref(null);
// 获取文本内容元素
const textContentRef = ref(null);
// 判断文本内容是否溢出
const textOverflow = ref(true);
// 动画持续时间
const duration = ref(0);
// 接收参数
const props = defineProps({
// 文本内容
textContent: {
type: String,
default: '',
},
// 文本间隔
textGap: {
type: Number,
default: 50,
},
// 文本滚动速度
scrollSpeed: {
type: Number,
default: 10,
},
// 文本开始滚动的延迟时间
scrollDelay: {
type: Number,
default: 0.5,
},
// 文本内容样式
textStyle: {
type: Object,
default: null,
}
});
// 监听文本内容变化
watch(() => props.textContent, () => {
nextTick(() => {
renderText();
});
});
// 挂载时执行
onMounted(() => {
nextTick(() => {
renderText();
});
});
// 渲染文本内容
const renderText = () => {
// 获取容器宽度和文本内容宽度
const containerWidth = containerRef.value.offsetWidth;
const textWidth = textContentRef.value.offsetWidth;
// 计算动画持续时间
duration.value = textWidth / props.scrollSpeed;
// 判断文本内容是否溢出
if ((textWidth - props.textGap) > containerWidth) {
textOverflow.value = true;
} else {
textOverflow.value = false;
}
};
</script>
<style scoped>
.container {
width: 100%;
display: flex;
flex-grow: 1;
overflow: hidden;
}
.content {
flex: none;
display: flex;
align-items: center;
animation: move linear infinite;
}
@keyframes move {
0% {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
</style>
...大约 3 分钟
如何使用 GPIO
先打开时钟，然后定义一个 GPIO 类型的结构体，配置参数：引脚、模式、速率，最后调用 GPIO_Init 函数进行初始化。
点亮一颗小灯
我们通过给小灯一个高电平，使其发光。
可以使用 GPIO_SetBits 函数来给引脚赋值高电平，使用 GPIO_ResetBits 函数来给引脚赋值低电平。
也可以使用 GPIO_WriteBit 函数来给引脚赋值，参数为：引脚、赋值状态。
...小于 1 分钟
| 名称 | 简介 | 官网 | 相关文章 |
|---|---|---|---|
| 微信 | 社交软件 | 微信，是一个生活方式 | 暂无 |
| 社交软件 | QQ-轻松做自己 | 暂无 | |
| Geek | 高效、免费、小巧的软件卸载工具 | Geek Uninstaller - 最好的免费卸载程序 | 暂无 |
| Bandizip | 面向专业人士的压缩软件 | Bandizip · 业内领先的压缩文件解决方案 | 暂无 |
| Clash Verge | 代理工具 | Clash Verge | 暂无 |
| PixPin | 功能强大使用简单的截图/贴图工具，帮助你提高效率 | PixPin | 暂无 |
| Git | 免费的开源分布式版本控制系统 | Git | 暂无 |
| VSCode | 免费、开源的代码编辑器 | Visual Studio Code | 暂无 |
| Alist | 支持多种存储的文件列表程序 | AList 文档 GitHub 仓库地址 |
1. Windows 端使用 Alist 2. Android 端使用 Alist |
| RayLink | 免费远程控制软件 | RayLink | 暂无 |
| PotPlayer | 强大的视频播放器 | Global Potplayer | 暂无 |
| Typora | 强大、高颜值的 Markdown 编辑器 | Typora — a markdown editor, markdown reader. | 暂无 |
| Apifox | API 设计、开发、测试一体化协作平台 | Apifox - API 设计、开发、测试一体化协作平台 | 暂无 |
...大约 1 分钟