大家好，我是Echa。最近比较忙，今天就来分享一篇之前写的笔记吧，希望对你有所帮助~
2024年09月16日
这篇文章主要是分享了三个例子( 垂直居中、响应式、圣杯 )，介绍了Flexbox的主要应用场景，并与传统方式对比， 感受Flexbox布局带来的便捷开发体验。
<style>
.main1 {
position: relative;
height: 200px;
background: #8A469B;
}
.main1 div {
display: block;
width: 50%;
height: 50%;
background: #EA7F26;
overflow: hidden;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.main1 div span {
position: absolute;
margin: 0;
padding: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #EA7F26;
}
.main2 {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background: #8A469B;
}
.main2 div {
width: 50%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
background: #EA7F26;
}
</style>
<body>
<h3>不使用Flexbox</h3>
<div class="main1">
<div>
<span>
侠课岛
</span>
</div>
</div>
<h3>使用Flexbox</h3>
<div class="main2">
<div>
<span>
侠课岛
</span>
</div>
</div>
</body>
2024年09月16日
<view class="v-float v-tab">
<view class="v-tab-title" :class="curPagetab == '0' ? 'is-active' : ''" @click="pageTabClick('0')">
<span>全省排行</span>
</view>
<view class="v-tab-title" :class="curPagetab == '1' ? 'is-active' : ''" @click="pageTabClick('1')">
<span>分公司排行</span>
</view>
<view class="v-tab-title" :class="curPagetab == '2' ? 'is-active' : ''" @click="pageTabClick('2')">
<span>部门排行</span>
</view>
</view>
<!-- css样式 -->
.v-float {
display: flex;
justify-content: space-between;
}
.v-tab {
width: 668rpx;
margin: auto;
height: 68rpx;
background-color: #e6e6e6;
/* 设置圆角 */
border-radius: 60rpx 60rpx 60rpx 60rpx;
margin-top: 15px;
.v-tab-title {
line-height: 68rpx;
width: 200rpx;
height: 60rpx;
border-radius: 40rpx;
text-align: center;
font-size: 12pt;
color: #757575;
}
.is-active {
height: 54rpx;
align-self: center;
text-align: center;
line-height: 54rpx;
font-size: 14pt;
color: #323232;
background: rgba(255, 255, 255, 0.8);
}
}2024年09月16日
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。是一种现代的css布局方式，现在已被大多数主流浏览器所支持。
有关 flex 布局的更多资料，可以自行查阅，本文不做详细说明。本文假设你已经知道了 flex 布局的基本用法。
接下来，请大家看一张图片
2024年09月16日
首先我们要明白，为什么需要使用自定义tab栏
大家首先看一下uniapp关于原生tab跳转的api文档
https://uniapp.dcloud.net.cn/api/router.html#switchtab
大家可以清楚的看到，switchTab和navigateTo的差异为url后面是否可以携带参数
当我们在做一个简单的uniapp项目时，可能tab之间的切换，或者从其他页面前往tab页面的时候，不需要携带参数。但是，一旦我们需要携带参数跳转到tab页面的时候，原生的tab页面无法实现参数的携带。这个时候，我们就需要去构建一个通用的tab组件去实现它的跳转。并且，原生tab栏不支持你在上面做太多的样式拓展
2024年09月16日
昨天雷雨交加，燥热有所缓解。今晨空气清新，再加上马上三天小长假，心情很不错，祝各位小长假玩的开心。那么，今天就用CSS3做些“不正紧”的事：画八卦和爱心。
CSS3我们一般都是用来进行布局，在工作中很少会刻意去用它画画，毕竟这有点耗时间。
分析：它就是多个圆叠加的效果。
1、给body加个背景色，否则看不清八卦的白色部分：