随笔分类 -  css/html

css3的calc属性不生效问题
摘要：css3的 calc：计算属性。由于自己做的项目中这个属性不常用到，偶尔用一次还没效果。 后来研究了下是因为运算符两边没加空格。 错误示例：.content{width:calc(100%-50px)}这样是不生效的 运算符"+ - * /"左右两边均要留空格 正确示例：.content{width 阅读全文
posted @ 2019-07-03 16:29 小兔额乖乖 阅读(7263) 评论(0) 推荐(2)
webkitdirectory 实现文件夹上传
摘要：文件夹上传这个功能在web端可能有需求，这里就简单介绍下用法。 目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进 阅读全文
posted @ 2019-06-24 09:14 小兔额乖乖 阅读(10979) 评论(4) 推荐(2)
web前端处理订单待支付倒计时计算显示问题
摘要：在商城类项目的时候，有很多待支付的订单，有时候在订单列表页面会分别显示倒计时，就是页面会有很多倒计时的订单。 处理方法： 1.调用后端接口拿到所有的订单，获取所有的倒计时订单，获取到期时间(尽量时间戳，不行就自己转换)。 2.渲染列表的时候把未支付的订单加上计数器dom,然后把到期时间戳写在dom属 阅读全文
posted @ 2019-04-01 11:15 小兔额乖乖 阅读(3082) 评论(0) 推荐(0)
移动端video播放时不弹出页面层
摘要：移动端视频在播放时会主动弹出页面，有的浏览器不会。对那些会的浏览器进行处理： 直接加上下面三个属性即可，兼容方面就不说了，微信上是很ok的。 <video x5-playsinline="" playsinline="" webkit-playsinline=""></video> 阅读全文
posted @ 2018-04-27 10:28 小兔额乖乖 阅读(1686) 评论(0) 推荐(0)
flex布局下img变形的问题
摘要：flex-shrink 加上：flex-shrink：0；定义了缩小比例,默认为1,即如果空间不足,项目将会缩小所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0;数值代表被缩小的程度!负值无效者缩小 阅读全文
posted @ 2018-04-12 15:23 小兔额乖乖 阅读(2650) 评论(0) 推荐(1)
autocomplete="off" 不起作用解决方案
摘要：autocomplete属性是表单字段中的HTML5新属性，该属性有两种状态值，分别为"on" 和 "off"，该属性可省略：省略属性值后默认值为"on"，也可以省略属性名，直接写入关键字on或off。 但是有时候不起作用，解决方法如下：换成 autocomplete="new-password" 阅读全文
posted @ 2018-03-22 14:00 小兔额乖乖 阅读(7390) 评论(0) 推荐(0)
css实现左右两端对齐均匀排列 text-align: justify
摘要：1.实现一行文字的两端对齐均匀排列 为了实现效果只是加上一个text-align: justify;是没效果的。所以需要加上一个空标签<span><i>都可以，也可以用伪类来写，为了不让页面有多余的标签，所以最好使用伪类写 加标签的方法： 伪类法： 2.实现标签内标签的左右对齐均匀排列（当然这个效果 阅读全文
posted @ 2017-12-14 11:13 小兔额乖乖 阅读(2492) 评论(0) 推荐(0)
移动端1px细线问题
摘要：1可以用伪类实现 2.直接0.02rem border:0.02rem solid #ccc; 阅读全文
posted @ 2017-10-30 19:57 小兔额乖乖 阅读(383) 评论(0) 推荐(0)
移动端调用数字键盘
摘要：移动端调用数字键盘的两种方案，键盘的按键显示的还是有区别的 <input placeholder="输入数字" type="text" pattern="[0-9]*" maxlength="11"><input placeholder="输入数字" type="tel" maxlength="11 阅读全文
posted @ 2017-10-30 19:42 小兔额乖乖 阅读(1586) 评论(0) 推荐(0)
滚动条样式属性，以及去掉移动端滚动条解决方案
摘要：第一部分： ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb） ::-webkit- 阅读全文
posted @ 2017-10-30 11:11 小兔额乖乖 阅读(10924) 评论(0) 推荐(0)
css文字换行问题white-space:pre-line或者white-space:pre-wrap，解决word-wrap:break-word解决不了的
摘要：想让文字换行必须要写的那几个css样式就略过了。当一行文字是数字或字母时或者数字字母组合时会出现不换行局面，这时候加个word-wrap:break-word；就基本可以解决但是有种情况是它解决不了的。 这里是项目中遇到的问题，朋友们如果没遇见也没事加深印象即可：前台页面用户输入文字的时候没有换行没 阅读全文
posted @ 2017-10-27 19:07 小兔额乖乖 阅读(16156) 评论(0) 推荐(0)
移动端 input 获取焦点后弹出带搜索、确定、前往的键盘，以及隐藏系统键盘
摘要：一：调出系统带回车键的键盘 在项目中经常有输入框，当输入完成后点击确定执行相应的动作。但是有些设计没有确定或者搜索按钮，这就需要调用系统键盘，点击系统键盘的确定后执行相应动作。 但是单纯的input是无法实现的，要想调出带回车的键盘必须把input放在form表单里面才可以，并且得加上action( 阅读全文
posted @ 2017-09-19 00:02 小兔额乖乖 阅读(1998) 评论(0) 推荐(0)
上传文件时文件类型限制 <input id="File1" type="file" accept=""/>
摘要：在做项目项目中经常需要上传文件，类型也就那几种。虽然在js中加了上传文件类型的限制，但是为了减少因为用户选择不当而造成的反复检验。可以在input标签上加上accept属性。这种限制只是优化了选择文件的过程，但是没法真正做到限制文件类型因为： 看到没有，是可以选择的。所以还得以自己的验证代码为准。 阅读全文
posted @ 2017-09-06 23:47 小兔额乖乖 阅读(1951) 评论(0) 推荐(0)
移动端 input光标问题 以及 监听输入
摘要：1. input 框光标问题： input框 在ios上显示的与Android是不一样的 显示是这样的 而且在输入的时候 光标位置变化了 是这样的 为了达到一致的效果 在行高加上\9 如：line-height:32px\9; 得到正常效果： 有人说 在safari 不兼容这个 但是我在ios10. 阅读全文
posted @ 2017-02-20 10:43 小兔额乖乖 阅读(2419) 评论(0) 推荐(0)
html 移动端关于长按图片弹出保存问题
摘要：在做html5项目的时候有个需求是要拖动一个图片，但是又不要用户长时间按着弹出保存框。首先想到的就是在点图片的时候阻止默认事件的发生： js停止冒泡· function myfn(e){ window.event? window.event.cancelBubble = true : e.stopP 阅读全文
posted @ 2017-02-16 23:29 小兔额乖乖 阅读(21982) 评论(2) 推荐(0)