CSS
、不知不觉、
这个作者很懒,什么都没留下…
展开
-
writing-mode、flex实现css多列布局,从上到下,从左到右
需求: 实现list从上到小排列,一列三行;余下的另起一列。效果直接运行html<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>多列布局</title> <style> .container { writing-mode: vertical-lr; .原创 2021-06-28 17:13:23 · 1420 阅读 · 1 评论 -
使用rem单位实现布局自适应
css代码* { margin: 0; padding: 0; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-appearance: none; -moz-appearance: none; app原创 2017-04-05 17:58:17 · 647 阅读 · 0 评论 -
使用flex布局解决安卓手机上固定在底部的按钮,在键盘弹起后挡住input输入框的问题
移动端经常会出现,一个表单里面,确定按钮固定在底部这样的布局,一般会让按钮absolute或者fixed,这样在ios上没有问题,但是在安卓手机上,当表单里面的input输入框获得焦点的时候,按钮会挡在表单上,影响美观。这个可以采用flex布局完美解决。HTML代码 这里面是input输入框等。。。。 提交 css代码html,body{p原创 2017-05-27 15:00:05 · 15928 阅读 · 0 评论 -
记录一下开发过程中遇到的一些让人纠结的bug
iphone6p或者iphone7p上给swiper-container设置overflow-y:auto,界面出来后不到1s马上消失.swiper-container{ overflow-y:auto}解决办法:给slider元素设置overflow-y:auto即可。原创 2017-11-28 16:59:20 · 467 阅读 · 0 评论 -
css小技巧:表单的label在字体个数不同的时候,让字体间距相等
html结构 <ul> <li><label>姓名</label></li> <li><label>身份证</label></li> <li><label>手机号码&am转载 2018-01-20 14:46:32 · 945 阅读 · 0 评论 -
border-radius:50%在安卓机上无效
页面上写了个小红圆点,在电脑和iphone上正常的,但是在安卓手机上,红点变成了带圆角的正方形或长方形,不同安卓手机还有点不一样,代码如下:{ background-color: #f1464a; width:.2rem; height:.2rem; border-radius:50%;}后面百度了下,原来安卓部分低版本系统,不支持border-radiu原创 2018-01-30 10:03:19 · 3871 阅读 · 0 评论 -
css实现transform实现tabbar跟随动效
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8&gt; &lt;meta name=viewport content="width=device-width,initial-scale=1,minimum-scal原创 2018-07-23 14:19:12 · 2371 阅读 · 0 评论 -
vue里transition实现动画,在ios10.3上无效;打包后低版本安卓系统webview动画失效
页面有个弹窗,我要实现的效果就是弹窗从底部滑上来,并伴随轻微的抖动效果。 HTML部分:&amp;amp;lt;transition name=&amp;quot;bounce&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;my-popup&amp;quot; v-show=&amp;quot;showPo原创 2018-07-25 13:08:09 · 4160 阅读 · 0 评论 -
css设置滚动条样式,隐藏滚动条
css部分/* 横向滚动容器 */.scroll-wrapper { width: 100%; overflow-x: auto; height: 22px; white-space: nowrap; display: flex; -webkit-overflow-scrolling: touch;}.scroll-wrapper span...原创 2018-08-06 15:11:17 · 4730 阅读 · 2 评论 -
安卓上文字垂直居中解决方案
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalab转载 2018-10-31 18:09:49 · 5087 阅读 · 0 评论 -
vue中使用v-html加载的富文本,css中定义样式不生效
如题,使用v-html加载一段富文本,富文本里包含图片,在手机上图片宽度可能会溢出 <div v-html="htmlContent" class="rich"></div> <style scope> .rich>>> img{ display:block; max-width: 100%} &转载 2018-10-30 14:29:43 · 11335 阅读 · 0 评论 -
css使用字体文件
@font-face { font-family: yapi; font-weight: normal; font-style: normal; src: url('yapi.ttf') format('truetype');}*{font-family: yapi;}原创 2017-02-24 11:25:47 · 1700 阅读 · 0 评论 -
css实现图片遮罩高亮效果
html代码 css代码* { font-family: Arial "微软雅黑"; margin:0; padding:0; } .img-box{ position: relative; width:200px; margin-bottom: 20px; } .img-box p{ po原创 2017-03-02 17:02:39 · 11581 阅读 · 0 评论 -
去掉链接、图片、按钮等点击时出现的虚框
safari chrome等默认就没有边框的主要是IE和firfox火狐IEZH原创 2014-08-27 15:48:55 · 807 阅读 · 0 评论 -
css控制文本最后用省略号代替
css控制文本 超过3行则最后用省略号代替div{display: -webkit-box;text-overflow: ellipsis;overflow : hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}-webkit-line-原创 2015-08-31 19:40:43 · 514 阅读 · 0 评论 -
html5去掉元素交互时出现的背景色
在手机浏览器上事件交互会出现背景色,设备浏览器不一样,颜色也不一样,很是影响交互效果。使用css3来解决代码如下:-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;转载 2016-03-04 11:53:25 · 1486 阅读 · 0 评论 -
CSS Overflow Hidden在iPhone & Safari不起作用
overflow hidden在iPhone和Safari上不起作用!其他浏览器和手机都可以,唯独iPhone和Safari不行方法一:网上找到的一种方法,在body上添加下面的CSS:body { position:relative; overflow-y:hidden;}方法一:同样是在网上找到的方法,和第一种方法大同小异,在bod转载 2016-04-08 16:22:23 · 14285 阅读 · 0 评论 -
利用@media screen实现网页布局的自适应
@media screen and (min-width:1200px){ #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}}@media screen and (min-width: 960px) and (max-width: 1199px) { #page{ width: 960p转载 2016-04-29 15:56:45 · 675 阅读 · 0 评论 -
css实现鼠标悬停图片放大显示
* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; width: 300px; margin: 0 auto; overflow: hidden; } .avatar img { display: blo原创 2016-07-15 15:05:08 · 37583 阅读 · 0 评论 -
圣杯布局
圣杯布局 *{margin:0;padding:0} body {background-color: #ffffff; font-size:14px;} #hd, #ft {padding:20px 3px; background-color: #cccccc; text-align: center;} .bd-lft, .bd-rgt, .bd-3-lr, .bd-3-ll, .b转载 2016-07-26 10:47:31 · 560 阅读 · 0 评论 -
html5 ,css3, js 一些要很实用的代码片
禁止input控件输入空格,input输入身份证号码,input输入电话号码input只能输入数字和点text-align:right在Android4.4(或某些浏览器下)以下,placeholder无法居右html唤起手机QQ原创 2016-06-12 10:21:20 · 2010 阅读 · 0 评论 -
css3阴影设置发光边框效果,阴影按钮
input内阴影.border-shadow{ -moz-box-shadow:1px 1px 1px #e0e0e0 inset; -webkit-box-shadow:1px 1px 1px #e0e0e0 inset; box-shadow:1px 1px 1px #e0e0e0 inset; }原创 2015-09-16 17:42:05 · 2602 阅读 · 0 评论 -
css使用text-shadow实现字体模糊效果
不知不觉p{color: transparent;text-shadow: 0 0 9px rgba(0,0,0,0.3);}最终效果原创 2017-03-02 16:41:31 · 2544 阅读 · 0 评论 -
css伪元素实现有序编号
年龄在18-60岁 有淘宝账号 手机实名制 开通网银的银行卡(或信用卡) .content { counter-reset: index; padding: .5rem 1.6rem; line-height: 3rem; border-bottom: .1rem原创 2017-03-02 16:50:09 · 2018 阅读 · 1 评论 -
如何使用css sprites 确定小图在整图中的位置
css sprites确定小图在整图中的位置原创 2014-08-27 14:30:47 · 1984 阅读 · 0 评论