CSS

分类下相关文章

点击 div 区域进入链接

需求 在网站的产品列表页或新闻列表页,除了能点击标题能进入详情页之外。 我还希望能点击缩略图进入详情,最好是整个子 item 区域都是可点击的。 在最外层套个 a 标签,既不方便布局,语义上也说不过去。 还有一种常见的,用 js 实现点击跳转,虽然逻辑清晰,但是总感觉啰嗦了点。 简洁的 inset 实现 突然想看看 tailwind 示例组件里是如何实现这种需求场景的。查了一下果然有一个示例: tailwind css 组件里的一个实现非常简洁实用。 参考: https://tailwindui.com/components/ecommerce/components/product-list ...

阅读全文...

多主题对应独立的 tailwind css 编译规则

需求背景 在一套网站代码里,嵌入多套页面模板主题。 这样就需要每个独立的主题都有一个独立的 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 ...

阅读全文...

轮播图上显示文字

参考: 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 ...

阅读全文...

Tailwind CSS 实现网站导航菜单

目标 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 是基于 ...

阅读全文...

Tailwind CSS 实现自适应网页

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 ...

阅读全文...

安装并搭建 Tailwind CSS 开发环境

顺风 CSS Tailwind 中文意思是顺风。而我一直以为这个单词的意思是台风。。。 实际上台风是,typhoon。 为何要使用 Tailwind CSS 在写小程序样式的时候,为了排版方便,我自己也形成了一套基于 flex 的布局 class,跟 tailwind css 的理念是一样的,确实写起来很快 Tailwind CSS 官网整理出来所有的 class,可以一目了然地对比各种样式的区别,比自己去挨个尝试方便多了 安装 Tailwind 如果本机没有 npm 或 npx 可以参考这里安装最新的 node,自带了 npm,npx。 npm install -D tailwindcs ...

阅读全文...

CSS 变量的用法

在查看小程序 UI 库 ColorUI 时,看到这样一段代码: .bg-gradual-red { background-image: var(--gradualRed); color: var(--white); } 查了一下 css 中 var 的用法,才知道原来 CSS3 中已经支持 CSS 变量这种用法了。不需要再依赖 SASS 和 LESS 也能使用变量,非常棒。 CSS 变量用法 要点: 变量名必须以双横杠开头 变量需要定义在一个 css selector 中,用于限制其作用域。如果想全局使用,网页中使用 :root 或者 body;小程序中使用 Page。 使 ...

阅读全文...

css background-size 100% 与 cover 的区别

今天在小程序中使用图片作为 view 背景时,发现背景图显示不完整,使用的是 css background-size: cover; 可是之前这样用时,从来没遇到这种情况。仔细对比了一下,发现: 显示正常的情况是,view 区域很大,背景图没有完整显示的要求 显示不正常的是,view 区域很小,而背景图相对大一些,这种情况背景图没有显示完整 改用 background-size:100% 100%; 之后,就显示正常了。 所以,整理了一下这两者的区别。 100% 使用场景 当背景图必须完整显示全时,使用 background-size:100% 100%; 但是会变形。 cover ...

阅读全文...

移动端强制显示滚动条

例如在手机移动端,一个表格的列数过多,会超出屏幕宽度。所以通常会限制 table 的宽度。 .long_table { width: 100%; overflow-x: auto; } 但是,限制之后显示是正常了。但是手机浏览器一个默认的体验不太好,就是默认不显示横向滚动条。 只有在拖动的时候才会显示,只要不移动,一会就会消失。 这样,会导致部分用户以为只有部分数据,不会主动去滑动查看更多数据。 所以,需要强制显示滚动条 .long_table::-webkit-scrollbar { width: 5px; height: 13px; -webkit-border-ra ...

阅读全文...

flex 布局一行 N 个子元素的实现

例如,我想在微信小程序首页显示多个功能按钮,采用 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 ...

阅读全文...

微信小程序 scroll view 占据页面剩余高度

假设页面 顶部是一个 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 ...

阅读全文...

ul 子元素过多时,显示水平滚动条

当手机端排版时,如果 ul 中 li 过多,一行装不下时,希望显示水平滚动条,而不是折行。 flex 实现: ul display: flex; overflow-x: auto; li flex: none; 如果不加 flex: none; 所有的 li 会自动压缩宽度,以适配当前容器宽度。而这不是我想要的效果。 overflow-x: auto; 与 overflow-x: scroll; 的区别 auto: 只有当内容溢出时,才显示滚动条 scroll: 无论是否溢出都显示滚动条。主要是为了布局统一,防止滚动条有无导致布局偏差。 ...

阅读全文...

CSS 实现 DIV 弧形底部

见过两种实现方式,但是只有第一种的效果更平滑。 以微信小程序模板代码为例: <view class="person_info"> </view> 第一种,两个 div 拼接 实现的逻辑是,利用 after 创建一个相对大的底部圆形的 view,露出下面的部分。 需要注意的是,height 一定要比父级元素高,left 按比例对称调节。 .person_info { width: 100%; height: 400rpx; background-image: linear-gradient(180deg, #66ccff 0%, #41b ...

阅读全文...

flex 布局实现垂直居中和水平居中

在微信小程序中可以放心地使用 flex 布局,所以尝试了一下 flex 的居中布局。 示例模板代码 <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="nav_text_wrapper"> <text>手机认证</text> </view> ...

阅读全文...

flex 水平分割布局

例如,我在微信小程序中想使用 flex 布局来实现如下的一行布局: | 功能图标 | 功能名称 | 引导箭头| 即,水平分割一行。 实现效果 模板代码 <view class="nav"> <view class="nav_icon_wrapper"> <image src="../../images/phone.png" mode="widthFix"></image> </view> <view class="n ...

阅读全文...