css
关注
分享
扫一扫
亮子AI
全干程序员
展开
-
【Tailwind】淡入、淡出动画效果
使用 opacity 属性。原创 2024-07-22 09:57:53 · 601 阅读 · 0 评论 -
【Tailwind】footer固定底部
【代码】【Tailwind】footer固定底部。原创 2023-11-22 08:35:54 · 516 阅读 · 0 评论 -
【Tailwind CSS】当页面内容过少，怎样让footer保持在屏幕底部？
footer通常写版权信息等，显示在页面底部。如果页面内容过少，则footer会出现在屏幕中间位置，很尴尬。在 Tailwind 中，你可以使用flex来实现footer保持在屏幕或页面底部。用flex包裹全部页面内容，footer设置类名：mt-auto 即可。原创 2023-10-25 22:19:05 · 963 阅读 · 0 评论 -
【CSS】输入框内凹样式
输入框样式原创 2022-06-13 13:41:10 · 1045 阅读 · 0 评论 -
【 CSS 】如何在 select 选项中使用 awesome 图标？
在如下的 select 结构中，option 不能嵌套标签：<select> <option>选项一</option> <option>选项二</option></select>如果想要如下的效果：方法在这里：https://stackoverflow.com/a/40662530/3054511下面是全部 Awesome 4.7.0 的图标示例：<link href="https://maxcdn.bo原创 2021-08-22 09:55:16 · 837 阅读 · 0 评论 -
推荐一本 Bulma 的书《使用Bulma来创建用户界面》
Bulma 是最流行的前端框架之一，文档详尽，社区活跃。这里推荐一本Bulma官方书籍《Creating Interfaces with Bulma》，本书目录如下：CHAPTER 1: Understanding Bulma, terminology, and conceptsHow is Bulma unique?Simple columns systemReadabilityCustomizableModularColumnsModifiersComponentsHelper原创 2021-05-04 09:54:52 · 421 阅读 · 2 评论 -
js css 下拉动画
初始css：.wrapper { transition:height 1s ease-out; height:0; overflow:hidden;}用js设置类：.show { height: 30px;}如果不知道元素的高度，可以用下面的方式，计算出元素高度，再设置：const slideDown = elem => elem.style.height = `${elem.scrollHeight}px`;slideDown(document.ge原创 2020-10-30 00:33:09 · 208 阅读 · 0 评论 -
css 伪类 active 在 iphone 上不起作用的解决办法
直接上代码：<body ontouchstart=""></body>https://stackoverflow.com/a/8877902/3054511原创 2020-08-25 21:01:49 · 659 阅读 · 0 评论 -
flexbox 与 grid 比较
两者各有优势，下面是一个简单比较。Flexbox 是一维布局，grid 是二维布局。如果你关注内容在屏幕上的位置，那么 grid 适合你。如果你的重点在于内容流，那么使用 flexbox 更合适。浏览器支持上面 flexbox 更好一些。https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-...原创 2020-01-29 23:58:18 · 435 阅读 · 0 评论 -
前端框架比比看：bootstrap, bulma, foundation, material-design-lite, materialize-css, semantic-ui
Bootstrap 的用户量仍然遥遥领先，但我已经在尝试 Bulma 和 Material.原创 2020-01-28 19:38:59 · 1236 阅读 · 0 评论 -
Bulma 使图片居中
代码：<figure class="image container is-256x256"> <img src="http://placehold.it/256x256"></figure>图片大小可以使用变量：You can add 256 to the dimensions variable. $dimensions: 16 24 32 48...原创 2019-12-23 09:36:20 · 609 阅读 · 0 评论 -
微信小程序固定顶部的两个问题
使用下面的方法，固定顶部区域（通常是导航菜单）：position: fixed;带来两个问题：下拉更新时，固定区域不动，会遮挡住三个点。用户只有尽力下拉，才能看到三个点。滚动条刺穿固定区域。...原创 2019-04-28 21:58:08 · 3288 阅读 · 1 评论 -
css transition 笔记
/* property name | duration */transition: margin-right 4s;/* property name | duration | delay */transition: margin-right 4s 1s;/* property name | duration | timing function */transition: margin-r...原创 2019-04-27 14:24:37 · 284 阅读 · 0 评论 -
flex 如何使中间项真正居中？
使用 flexbox，子项的宽度不一时，无论我们使用 justify-content 的什么配置（space-between, space-around, 等），都无法使中间项真正居中。要让中间项真正居中，需要对 HTML 结构做一些调整，具体如下：#container { display: flex;}.flex { flex: 1;}<div id="conta...原创 2019-03-27 11:05:36 · 5834 阅读 · 1 评论 -
textarea 使用 padding，同时避免被拉伸
解决办法就是改用 box sizing 盒模型：width:100%;height:100%; box-sizing: border-box; /* For IE and modern versions of Chrome */-moz-box-sizing: border-box; /* For Firefox */...原创 2019-03-21 11:01:10 · 2297 阅读 · 0 评论 -
微信小程序 scroll-view 组件的几个要点
微信小程序 scroll-view 组件横向滚动需要设置 scroll-x 属性为true。 还需要设置 white-space: nowrap 强制不换行，以及设置内部的 view 为 display: inline-block。例如：&amp;lt;scroll-view scroll-x style=&quot;white-space: nowrap;&quot;&amp;gt; &amp;lt;view sty原创 2019-03-02 09:22:27 · 1986 阅读 · 0 评论 -
微信小程序上实现 <table> 表格
微信小程序不支持 table 标签，在网上找到一个使用 flex 来实现表格的简明例子，记录一下。table.wxml<view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th转载 2018-05-26 11:36:58 · 50676 阅读 · 9 评论 -
详解微信小程序与HTML5的差异
先从总体上比较开发工具不同区别于H5的开发工具+浏览器Device Mode预览的模式，小程序的开发基于自己的开发者工具，可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。开发语言不同。小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3。组件封装不同小程序独立出来了很多原生APP的组件，在HTML5需要模拟才...原创 2018-06-08 07:15:34 · 16106 阅读 · 1 评论 -
如何设置小程序页面各个部分的背景颜色？
完整的小程序页面除了在各个.wxml中定义的视图外，还包括导航栏等部分。在.wxss中定义的样式只对页面内容部分起作用，其他部分的背景色如何设置呢？下面就做一个完整的介绍。首先看下图，标出来了三个部分：分别如下设置：app.json -&amp;amp;gt; “window”: {“navigationBarBackgroundColor”: “#EEE”}app.json -&amp;amp;gt; “w...原创 2018-07-02 13:44:15 · 25166 阅读 · 6 评论 -
小程序的按钮按下去的样式（button-hover）为啥不起作用？
微信小程序的button中，可以指定按下去的类名，例如：<button hover-class="button-hover">同意</button>默认的类名就是 button-hover，因此上面的类名定义可以省略。根据官方开发文档，在wxss中定义类名样式，就可以自定义按钮按下去的样式。但是我在开发中，发现直接这样写没有效果：.button-hover...原创 2018-07-10 20:14:19 · 13545 阅读 · 1 评论 -
微信小程序 button 的样式设置为图片
方法一：将button设为 opacity:0 然后定位放在那副图片的上边。方法二：background-image。背景图片是不支持在css中被引用资源的，但可以使用网络资源。&lt;button open-type='share' class="share" style="background-image:url(https://example.com/imgs/icon_2_forw...原创 2018-08-13 10:17:58 · 37166 阅读 · 5 评论 -
CSS：怎么样给背景图加透明度 opacity ?
CSS 中无法直接给背景图片加 opacity 属性，可以使用下面的方法绕过这个限制：div { width: 200px; height: 200px; display: block; position: relative;}div::after { content: ""; background: url(image.jpg); opacity: 0.5;...原创 2018-08-19 17:41:31 · 64545 阅读 · 11 评论 -
Flex 如何让最后一项右边对齐？（CSS）
Flex 中使用 justify-content, 规定项目之间的对其方法，如果要让最后一项向右边对齐，如下图：有一个简单的方法：margin-left: auto;原文来自stackoverflow...原创 2018-09-05 17:39:08 · 42215 阅读 · 5 评论 -
小程序固定底部、居中的悬浮按钮
.wxml:<view class="add-wrap"hover-class="plus-hover"> <image src="/assets/plus_new.png"></image></view>.wxss:add-wrap { position:fixed; bottom:0; display:fle原创 2018-10-04 06:44:36 · 16973 阅读 · 0 评论 -
仅仅使用 CSS 做个下拉菜单的动画
关键是使用 max-height, 只要设置的值大于要显示的元素的高就可以：HTML&lt;div id="menu"&gt; &lt;a&gt;hover me&lt;/a&gt; &lt;ul id="list"&gt; &lt;!-- Create a原创 2018-10-08 13:58:28 · 6394 阅读 · 0 评论 -
介绍两个微信小程序的 UI 库
一个是腾讯官方发布的：weui另一个是有赞发布的 vant-weapp原创 2018-11-24 07:55:05 · 619 阅读 · 0 评论 -
flex 布局时，如何固定一栏宽度？
简单使用 width，可以。下面介绍一个更好的方法：flex: 0 0 200px;上面的样式就是固定宽度 200px。具体每个参数的意思是：0 - 不拉长（flex-grow）0 - 不缩短（flex-shrink）200px - 开始于 200px （flex-basis)来源：https://stackoverflow.com/a/23794791/3054511...原创 2019-02-21 19:51:46 · 31963 阅读 · 2 评论 -
css 如何设置 margin-top 最小值？
代码：#div1 { min-height:50px; background-color: #fee; margin-bottom:-50px;}#div2 { margin-top:50px; background-color: #efe}解释：When div1 is hidden, div2 has a top property of ...原创 2019-02-28 12:19:50 · 4566 阅读 · 0 评论 -
微信小程序如何才能拉伸背景图，以适合页面大小？
直接上代码：WXML：&lt;view class="container"&gt; ...&lt;/view&gt;WXSS:.container::after { content: ""; background: url(https://example.com/bg.jpg) no-原创 2019-02-24 05:07:43 · 6513 阅读 · 0 评论 -
微信小程序中，数字等宽字体
用下面的设置：font-family: TrebuchetMS,Rotobo,&quot;Microsoft YaHei&quot;,sans-serif;原创 2018-12-04 16:11:21 · 6262 阅读 · 0 评论 -
微信小程序中placeholder的样式
通常，现代浏览器大多支持::placeholder选择器，用于设置placeholder的样式，但是在微信小程序中并不支持这种方式，而是提供了一个专门的属性（placeholder-class）来处理其样式。例如，在模版文件中这样写： <input placeholder-class="place-holder" class="input-text" name="username" plac...原创 2018-04-28 15:49:18 · 27706 阅读 · 0 评论