分类下相关文章
2022-05-05 · 阅读 715 · 字数 285
需求 在网站的产品列表页或新闻列表页,除了能点击标题能进入详情页之外。 我还希望能点击缩略图进入详情,最好是整个子 item 区域都是可点击的。 在最外层套个 a 标签,既不方便布局,语义上也说不过去。 还有一种常见的,用 js 实现点击跳转,虽然逻辑清晰,但是总感觉啰嗦了点。 简洁的 inset 实现 突然想看看 tailwind 示例组件里是如何实现这种需求场景的。查了一下果然有一个示例: tailwind css 组件里的一个实现非常简洁实用。 参考: https://tailwindui.com/components/ecommerce/components/product-list ...
2022-04-23 · 阅读 1506 · 字数 244
需求背景 在一套网站代码里,嵌入多套页面模板主题。 这样就需要每个独立的主题都有一个独立的 css 文件。 而我使用的 tailwind css,那么就需要对每个 css 文件进行编译。原来的单一文件配置,需要做下调整。 现有的 tailwind 编译机制 Makefile 中的快捷命令: .PHONY: tailwind tailwind: npx tailwindcss -i ./css/main.css -o ./public/css/main.css --watch tailwind 配置文件: > cat tailwind.config.js module.exports ...
2022-04-01 · 阅读 1831 · 字数 186
参考: https://naver.github.io/egjs-flicking/Showcases 中的 Naver Art Window (Mobile) 那个示例。 overlay 涂层样式 在与 flicking-viewport (轮播图组件) 的平级 div,有个 overlay div。 用来包裹文字,主要是定位。 .banner .overlay { position: absolute; bottom: 40px; left: 10px; z-index: 12; box-sizing: border-box; pointer ...
2022-08-04 · 阅读 3288 · 字数 151
目标 PC/手机自适应 官方现成组件 Headers https://tailwindui.com/components/marketing/elements/headers https://tailwindui.com/components/application-ui/navigation/navbars 需要 JS 代码量不小。也许可以精简一下 还是不引入三方 js 的好,也不复杂。目前采用这个方案。 实际效果演示: https://www.sunzhongwei.com/tools2/combine-images daisyui 的 navbar 组件 daisyui 是基于 ...
2022-06-10 · 阅读 2401 · 字数 260
Mobile First 其实跟不用 Tailwind 时,纯手写 CSS 的原则是一样的,那就是: Mobile First 即,先写手机端的样式,然后逐一写更宽屏幕的样式。 而在 Tailwind CSS 中,Mobile First 就是先写不加 breakpoint (sm, md, lg ...) 前缀的 class。 例如: <img class="w-16 sm:w-20 md:w-32 lg:w-48" src="..."> sm breakpoint 的正确理解 Where this approach surpris ...
2022-04-09 · 阅读 1956 · 字数 481
顺风 CSS Tailwind 中文意思是顺风。而我一直以为这个单词的意思是台风。。。 实际上台风是,typhoon。 为何要使用 Tailwind CSS 在写小程序样式的时候,为了排版方便,我自己也形成了一套基于 flex 的布局 class,跟 tailwind css 的理念是一样的,确实写起来很快 Tailwind CSS 官网整理出来所有的 class,可以一目了然地对比各种样式的区别,比自己去挨个尝试方便多了 安装 Tailwind 如果本机没有 npm 或 npx 可以参考这里安装最新的 node,自带了 npm,npx。 npm install -D tailwindcs ...
2020-10-12 · 阅读 1843 · 字数 203
在查看小程序 UI 库 ColorUI 时,看到这样一段代码: .bg-gradual-red { background-image: var(--gradualRed); color: var(--white); } 查了一下 css 中 var 的用法,才知道原来 CSS3 中已经支持 CSS 变量这种用法了。不需要再依赖 SASS 和 LESS 也能使用变量,非常棒。 CSS 变量用法 要点: 变量名必须以双横杠开头 变量需要定义在一个 css selector 中,用于限制其作用域。如果想全局使用,网页中使用 :root 或者 body;小程序中使用 Page。 使 ...
2020-08-19 · 阅读 2551 · 字数 254
今天在小程序中使用图片作为 view 背景时,发现背景图显示不完整,使用的是 css background-size: cover; 可是之前这样用时,从来没遇到这种情况。仔细对比了一下,发现: 显示正常的情况是,view 区域很大,背景图没有完整显示的要求 显示不正常的是,view 区域很小,而背景图相对大一些,这种情况背景图没有显示完整 改用 background-size:100% 100%; 之后,就显示正常了。 所以,整理了一下这两者的区别。 100% 使用场景 当背景图必须完整显示全时,使用 background-size:100% 100%; 但是会变形。 cover ...
2020-05-25 · 阅读 6310 · 字数 211
例如在手机移动端,一个表格的列数过多,会超出屏幕宽度。所以通常会限制 table 的宽度。 .long_table { width: 100%; overflow-x: auto; } 但是,限制之后显示是正常了。但是手机浏览器一个默认的体验不太好,就是默认不显示横向滚动条。 只有在拖动的时候才会显示,只要不移动,一会就会消失。 这样,会导致部分用户以为只有部分数据,不会主动去滑动查看更多数据。 所以,需要强制显示滚动条 .long_table::-webkit-scrollbar { width: 5px; height: 13px; -webkit-border-ra ...
2020-08-13 · 阅读 8478 · 字数 597
例如,我想在微信小程序首页显示多个功能按钮,采用 flex 布局,一行3个按钮。每个按钮之间等间距。 效果如图所示: 测试代码: HTML <div class="container test1"> <div class="box test2"> <div class="content">title</div> </div> <div class="box test2">1</div> <div cl ...
2020-11-11 · 阅读 5314 · 字数 198
假设页面 顶部是一个 banner,class 为 top 余下部分是一个 scroll view,占据了页面剩余的高度 实现方法 Page { display: flex; height: 100%; flex-direction: column; } .top { } .bottom { flex: 1; } 在没有数据时,这样的布局看上去没有问题。但是一旦填充上数据,会发现 scroll view 的高度会被撑开。 真正的实现方法。。。 <view class="bottom"> <scroll-view class ...
2020-04-08 · 阅读 4261 · 字数 161
当手机端排版时,如果 ul 中 li 过多,一行装不下时,希望显示水平滚动条,而不是折行。 flex 实现: ul display: flex; overflow-x: auto; li flex: none; 如果不加 flex: none; 所有的 li 会自动压缩宽度,以适配当前容器宽度。而这不是我想要的效果。 overflow-x: auto; 与 overflow-x: scroll; 的区别 auto: 只有当内容溢出时,才显示滚动条 scroll: 无论是否溢出都显示滚动条。主要是为了布局统一,防止滚动条有无导致布局偏差。 ...
2020-11-19 · 阅读 14664 · 字数 368
见过两种实现方式,但是只有第一种的效果更平滑。 以微信小程序模板代码为例: <view class="person_info"> </view> 第一种,两个 div 拼接 实现的逻辑是,利用 after 创建一个相对大的底部圆形的 view,露出下面的部分。 需要注意的是,height 一定要比父级元素高,left 按比例对称调节。 .person_info { width: 100%; height: 400rpx; background-image: linear-gradient(180deg, #66ccff 0%, #41b ...
2020-03-15 · 阅读 6009 · 字数 248
在微信小程序中可以放心地使用 flex 布局,所以尝试了一下 flex 的居中布局。 示例模板代码 <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="nav_text_wrapper"> <text>手机认证</text> </view> ...
2020-03-15 · 阅读 4830 · 字数 139
例如,我在微信小程序中想使用 flex 布局来实现如下的一行布局: | 功能图标 | 功能名称 | 引导箭头| 即,水平分割一行。 实现效果 模板代码 <view class="nav"> <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="n ...