随笔分类 -  css

css 实现textarea标签高度自适应
摘要：<style type="text/css"> .grow-wrap { display: grid; word-break: break-all; } .grow-wrap::after { content: attr(data-replicated-value) " "; white-space 阅读全文
posted @ 2022-06-30 11:38 <_/> 阅读(346) 评论(0) 推荐(0)
css3 nth-child的妙用
摘要：CSS3 nth-child()选择前几个元素 一、选择列表中的偶数标签 :nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的，直到最后:nth-child(n+6) 四、选择第1个到第6个 :nth-child(-n+6) 一、两者结合使 阅读全文
posted @ 2022-04-25 10:51 <_/> 阅读(51) 评论(0) 推荐(0)
css table 表格等宽
摘要：<table border="1" style="table-layout: fixed;width: 200px"> <tbody> <tr> <td>AAA</td> <td>B</td> <td>C</td> </tr> </tbody> </table> 阅读全文
posted @ 2022-01-25 14:55 <_/> 阅读(132) 评论(0) 推荐(0)
display:table-cell实现水平垂直居中
摘要：<style> html,body{height: 100%;margin:0;padding:0;} /*** .table和.cell都将撑满页面，cell的子元素水平垂直居中 ***/ .table{ display: table; width: 100%; height: 100%; } . 阅读全文
posted @ 2021-12-16 17:03 <_/> 阅读(209) 评论(0) 推荐(0)
vue项目在ios从详情页返回到列表页白屏
摘要：问题描述： 进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决； 原因是，经过排查，发现在ios 机器上使用webview 开发Vue项目时候，go history (-1)，无法将body 的高度拉掉，使得遮住，触发轻点击，方可消除该遮罩 解决的理论：用于 阅读全文
posted @ 2020-10-19 11:15 <_/> 阅读(403) 评论(0) 推荐(0)
Flex 布局教程：实例
摘要：一、骰子的布局 骰子的一面，最多可以放置9个点。 下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。 如果不加说明，本节的HTML模板一律如下。 <div class="box"> <span class="item"></span> </div> 上面代码 阅读全文
posted @ 2020-03-17 10:15 <_/> 阅读(278) 评论(0) 推荐(0)
css小技巧 --> 单标签实现单行文字居中，多行文字居左
摘要：可能出现的尺寸场景: 代码如下： 阅读全文
posted @ 2019-09-11 09:53 <_/> 阅读(624) 评论(0) 推荐(0)
css实现 textarea 高度自适应
摘要：此textarea非彼textarea ，有经验的老司机们应该知道html标签contenteditable这个属性。 利用此属性使当前的标签成为可以输入的状态，等同于输入框。 演示地址：https://xibushijie.github.io/static/textareaHeihgAuto.ht 阅读全文
posted @ 2019-07-08 11:31 <_/> 阅读(12634) 评论(0) 推荐(0)
切图常用的布局和效果
摘要：演示地址：https://xibushijie.github.io/static/ui.html 阅读全文
posted @ 2018-06-21 13:44 <_/> 阅读(390) 评论(0) 推荐(0)
loading加载动画
摘要：演示地址：https://xibushijie.github.io/loading/loading.html 阅读全文
posted @ 2017-08-10 16:24 <_/> 阅读(397) 评论(0) 推荐(0)
在线制作css动画——CSS animate
摘要：熟悉CSS的人都知道，CSS可以实现很多漂亮的动画，特别是它的在线功能，能够帮助人们解决很多制作动画的效果。今天特别推荐一个在线CSS插件功能——cssanimate，这个最大的特色就是以图形界面方式让你轻易实现漂亮的CSS3动画效果，下面一起看看这个在线工具的介绍。 CSS3动画制作工具界面介绍 阅读全文
posted @ 2017-07-10 10:18 <_/> 阅读(1612) 评论(1) 推荐(0)
响应式、手机端、自适应 百分比实现div等宽等高的方法
摘要：在百分比布局中, 有时候会遇见一个头疼的问题,就是如果某个布局是正方形的话，我们在这种情况下考虑到适应各种媒体尺寸，又不能给它定固定的宽高。 之前遇见过纯色布局的结果我就用纯色图片代替实现的，现在有了这个方法，再也不用担心高度不等于宽度的问题了。 用这个方法的话无论你设置的宽度是%几，它的高度都和你 阅读全文
posted @ 2017-06-29 16:04 <_/> 阅读(1156) 评论(0) 推荐(0)
手机端自适应字体大小和元素宽度自适应
摘要：以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。 这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。 字体、宽高都用rem来定义，此方法略爽！ 现在找到了一个方法，页面插入一段js，切图时看设计稿多宽页面就定义多大的宽度，字体的大小和内容的宽高就 阅读全文
posted @ 2017-05-11 15:11 <_/> 阅读(13894) 评论(0) 推荐(1)
HTML，CSS，font-family：中文字体的英文名称 （宋体 微软雅黑）
摘要：宋体：SimSuncss中中文字体（font-family）的英文名称 Mac OS的一些： 华文细黑：STHeiti Light [STXihei] 华文黑体：STHeiti 华文楷体：STKaiti 华文宋体：STSong 华文仿宋：STFangsong 儷黑 Pro：LiHei Pro Med 阅读全文
posted @ 2017-04-19 10:50 <_/> 阅读(795) 评论(0) 推荐(0)
css锚点ios不兼容的方法
摘要：css锚点的正常方法： <a href="#1f"></a> <a name="1f"></a> ios出现的问题：1、有时会点击无效2、连点锚点屏幕会一点一点的向上翻 解决方法：用jquery的窗口滚动事件，让需要被锚点的元素设置距离浏览器自定义的高度。 <script> $("#maodian" 阅读全文
posted @ 2017-04-12 15:44 <_/> 阅读(1224) 评论(0) 推荐(0)
html+css底部自动固定底部
摘要：前端在切图过程中，肯定遇见过这种情况。 页面结构由三个部分组成，头部、内容、底部。 当一个页面的内容没撑满屏幕时，底部是跟着内容而并列存在的。 这个时候如果是大屏的话，底部下面会有多余的空白区域，而网页设计需求必须要底部贴近浏览器底部。 固定定位，绝度定位都不好使。 废话不多说，直接上代码实现： 阅读全文
posted @ 2017-03-28 10:32 <_/> 阅读(18838) 评论(0) 推荐(0)
css form表单样式清除
摘要：开发项目中表单常用的清楚样式： 1、改变placeholder默认字体颜色 2、取消input number的上下箭头 3、select下拉选择框option文字右对齐 4、select右边箭头隐藏 5、清除textarea右下角可拖拽功能 6、textarea文本框高度自适应 这里的代码需要引用J 阅读全文
posted @ 2017-03-27 14:43 <_/> 阅读(4147) 评论(0) 推荐(0)