![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
亮子AI
全干程序员
展开
-
【Tailwind】淡入、淡出动画效果
使用 opacity 属性。原创 2024-07-22 09:57:53 · 188 阅读 · 0 评论 -
【Tailwind】footer固定底部
【代码】【Tailwind】footer固定底部。原创 2023-11-22 08:35:54 · 323 阅读 · 0 评论 -
【Tailwind CSS】当页面内容过少,怎样让footer保持在屏幕底部?
footer通常写版权信息等,显示在页面底部。如果页面内容过少,则footer会出现在屏幕中间位置,很尴尬。在 Tailwind 中,你可以使用flex来实现footer保持在屏幕或页面底部。用flex包裹全部页面内容,footer设置类名:mt-auto 即可。原创 2023-10-25 22:19:05 · 744 阅读 · 0 评论 -
【CSS】输入框内凹样式
输入框样式原创 2022-06-13 13:41:10 · 911 阅读 · 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 · 742 阅读 · 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 · 376 阅读 · 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 · 178 阅读 · 0 评论 -
css 伪类 active 在 iphone 上不起作用的解决办法
直接上代码:<body ontouchstart=""></body>https://stackoverflow.com/a/8877902/3054511原创 2020-08-25 21:01:49 · 585 阅读 · 0 评论 -
flexbox 与 grid 比较
两者各有优势,下面是一个简单比较。Flexbox 是一维布局,grid 是二维布局。如果你关注内容在屏幕上的位置,那么 grid 适合你。如果你的重点在于内容流,那么使用 flexbox 更合适。浏览器支持上面 flexbox 更好一些。https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-...原创 2020-01-29 23:58:18 · 399 阅读 · 0 评论 -
前端框架比比看:bootstrap, bulma, foundation, material-design-lite, materialize-css, semantic-ui
Bootstrap 的用户量仍然遥遥领先,但我已经在尝试 Bulma 和 Material.原创 2020-01-28 19:38:59 · 1196 阅读 · 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 · 585 阅读 · 0 评论 -
微信小程序固定顶部的两个问题
使用下面的方法,固定顶部区域(通常是导航菜单):position: fixed;带来两个问题:下拉更新时,固定区域不动,会遮挡住三个点。用户只有尽力下拉,才能看到三个点。滚动条刺穿固定区域。...原创 2019-04-28 21:58:08 · 3210 阅读 · 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 · 235 阅读 · 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 · 5601 阅读 · 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 · 2213 阅读 · 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 · 1954 阅读 · 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 · 50473 阅读 · 9 评论 -
详解微信小程序与HTML5的差异
先从总体上比较开发工具不同区别于H5的开发工具+浏览器Device Mode预览的模式,小程序的开发基于自己的开发者工具,可以实现同步本地文件+开发调试+编译+预览+上传+发布等一整套流程。开发语言不同。小程序自己开发了一套WXML标签语言和WXSS样式语言,并非直接使用标准的HTML5+CSS3。组件封装不同小程序独立出来了很多原生APP的组件,在HTML5需要模拟才...原创 2018-06-08 07:15:34 · 15947 阅读 · 1 评论 -
如何设置小程序页面各个部分的背景颜色?
完整的小程序页面除了在各个.wxml中定义的视图外,还包括导航栏等部分。在.wxss中定义的样式只对页面内容部分起作用,其他部分的背景色如何设置呢?下面就做一个完整的介绍。首先看下图,标出来了三个部分:分别如下设置:app.json -&amp;amp;gt; “window”: {“navigationBarBackgroundColor”: “#EEE”}app.json -&amp;amp;gt; “w...原创 2018-07-02 13:44:15 · 24854 阅读 · 6 评论 -
小程序的按钮按下去的样式(button-hover)为啥不起作用?
微信小程序的button中,可以指定按下去的类名,例如:<button hover-class="button-hover">同意</button>默认的类名就是 button-hover,因此上面的类名定义可以省略。根据官方开发文档,在wxss中定义类名样式,就可以自定义按钮按下去的样式。但是我在开发中,发现直接这样写没有效果:.button-hover...原创 2018-07-10 20:14:19 · 13424 阅读 · 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 · 36696 阅读 · 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 · 63719 阅读 · 11 评论 -
Flex 如何让最后一项右边对齐?(CSS)
Flex 中使用 justify-content, 规定项目之间的对其方法,如果要让最后一项向右边对齐,如下图:有一个简单的方法:margin-left: auto;原文来自stackoverflow...原创 2018-09-05 17:39:08 · 41969 阅读 · 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 · 16689 阅读 · 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 · 6262 阅读 · 0 评论 -
介绍两个微信小程序的 UI 库
一个是腾讯官方发布的:weui另一个是有赞发布的 vant-weapp原创 2018-11-24 07:55:05 · 586 阅读 · 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 · 31117 阅读 · 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 · 4452 阅读 · 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 · 6443 阅读 · 0 评论 -
微信小程序中,数字等宽字体
用下面的设置:font-family: TrebuchetMS,Rotobo,&quot;Microsoft YaHei&quot;,sans-serif;原创 2018-12-04 16:11:21 · 6093 阅读 · 0 评论 -
微信小程序中placeholder的样式
通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理其样式。例如,在模版文件中这样写: <input placeholder-class="place-holder" class="input-text" name="username" plac...原创 2018-04-28 15:49:18 · 27620 阅读 · 0 评论