随笔分类 - css
vue-cli3.0 引入外部字体并使用
摘要：遇到要在项目中引入一些外部字体，我使用的是思源字体 cli2的我还没试过，现在的方法是cli3的， 不用配置config文件就可以 第一步： 去下载想要引入的字体的字体包，找ui要或者网上自己去搜 第二步：将要的字体放在资源目录下，看自己项目需求要放哪里，创建一个css文件 第三步： 在fonts.
阅读全文
优化浏览器进度条（兼容性不是很好在谷歌浏览器生效）
摘要：*定义滚动条宽高及背景,宽高分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; height: 16px; background-color: #f5f5f5; } /*定义滚动条的轨道,内阴影及圆角*/ ::-webkit-scrollbar-tra
阅读全文
device-aspect-ratio与aspect-ratio单屏布局
摘要：1 移动端自适应布局 按我的理念来看，移动端自适应布局中，最常用的应该算是rem为单位的基准点布局了吧。 而在rem的布局中，其实最重要的点是，如何来计算这个html的font-size的大小。 还有一些不是需要那么细致的处理，也可以直接使用CSS的media属性，根据元素的宽度进行设置html元素
阅读全文
CSS text-indent段落首行文字缩进
摘要：DIV CSS text-indent段落首行文字缩进，CSS段首缩进，可控制缩进距离样式教程篇 让每个段落首行开头文字缩进，如缩进2个文字距离样式，我将用到text-indent属性样式。 一、text-indent缩进语法与结构 - TOP .divcss5{text-indent:25px}这
阅读全文
css3 flex 详解,可以实现div内容水平垂直居中
摘要：先说一下flex一系列属性： 一、flex-direction: （元素排列方向） ※ flex-direction:row （横向从左到右排列==左对齐） ※ flex-direction:row-reverse （与row 相反） ※ flex-direction:column （从上往下排列=
阅读全文
如何解决两个相邻的span中间有空隙
摘要：span中间不要有换行、或者空格 或者在样式上加上float：left
阅读全文
如何去掉IE文本框后的那个X css代码
摘要：在IE10以上版本中，页面上的文本框控件在输入文字时候会被自动加上一个X。但是IE这个自作聪明的功能有时候会让我们的页面爆掉，比如当文本框宽度过小，X显示不下时候会顶掉你的文本。 要隐藏这个X可以用IE预留的一个vendor属性：::-ms-clear 现在这个自作聪明的X就木了： 本文来自 day
阅读全文
解决input 有readonly属性 各个浏览器的光标兼容性问题
摘要：<input type='text' readonly unselectable='on' onfocus='this.blur()'/> 目标：input 只能读，但是在ie、火狐浏览器下，设置了readonly属性还是会有光标出现！（希望去掉光标） 解决办法： 设置 unselectable='
阅读全文
CSS总结div中的内容垂直居中的五种方法
摘要：转载：https://www.cnblogs.com/moqiutao/p/4807792.html 一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： 这段代码可以达到让文字在段落中垂直居中的效果 二、内边距（
阅读全文
详解用CSS3制作圆形滚动进度条动画效果
摘要：转载自：https://www.cnblogs.com/jr1993/p/4677921.html 今天手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底是什么东东呢？先不急，之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》，但是呢，那篇博客只是制作出来效
阅读全文
CSS-calc 兼容写法
摘要：我们想要实现页面自适应布局时，通常因为margin的存在，而比较麻烦；有时候想要实现宽度自适应的输入框时，也因为padding或margin的存在，而相当繁琐，同时由于浏览器兼容性而导致最终效果不一致。css3新添加属性box-sizing，在一定程度上解决了上面的问题，而在今天的文章中我们来通过c
阅读全文
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
摘要：在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题？ 百度源代码如下： 可以打开百度，右键查看源码看下！我们可以看下文件头是否存在这样一行代码，这句话的意思是强制使用IE7模式来解析网页代码！ 在这里送上几种
阅读全文
获取字体图标（阿里图标网站）
摘要：网站：http://www.iconfont.cn/
阅读全文
CSS-解决苹果点击高亮、安卓select灰色背景（select下拉框在IOS中背景变黑、出现阴影问题）
摘要：1.在苹果手机上，用点击事件后会出现一个高亮的阴影； 面对click事件的阴影，解决办法： 2.在安卓手机上的select有灰色背景，解决办法： 3.解决select右侧下拉箭头在ios上不兼容的问题 解决select右侧小三角箭头在ios上不显示的问题 原文链接:https://jingyan.b
阅读全文
移动端 input 输入框实现自带键盘“搜索“功能并修改X
摘要：主要利用html5的，input[type=search]属性来实现，此时input和type=text外观和功能没啥区别； html代码入下: 但要实现点击键盘右下角搜索，来发送请求，js代码如下（以下代码段记得引入jquery）： 需要注意的是，input[type=search]，在用户输入时
阅读全文
input，textarea在ios和Android上阴影和边框的处理方法（在移动端）
摘要：1.去掉ios上阴影的方法只需要在css文件上添加input，textarea{-webkit-appearance: none;}就可以了 2.在移动端上input和textarea边框问题，也是在css上添加outline: none;就可以完美解决。 问题： 在苹果上点击时依然有灰色的高亮效果
阅读全文
input 原生上传文件（type = file）
摘要：1.表单上传文件的步骤： - 1）设置enctype - 2）设置method：提交方式 因为get方式携带的信息量太小，而且传输的数据都会显示在地址栏，对于图片等文件无法处理 2.上传文件 一次只能选择一个文件上传 伪代码 运行结果 此时我们可以看到一次只能选择一个文件，进行上传。 一次能同时选中
阅读全文
手机访问网站,点击手机号码直接拨打电话
摘要：手机访问网站,点击手机号码直接拨打电话:< a href=”tel://158xxxxxxxx”>号码< /a>这种方式塞班、安卓与iphone都支持。经过测试这段拨号代码< a href=”wtai://wp/mc;158xxxxxxxx ”>拨打电话只在塞班与安卓上支持，而iphone是不支持的
阅读全文
转 移动端-webkit-user-select:none导致input/textarea输入框无法输入
摘要：移动端webview中写页面的时候发现个别Android机型会导致input、textareat输入框无法输入（键盘可以弹起，不是webView.requestFocus(View.FOCUS_DOWN);的问题） 由于移动端我习惯统一初始化样式： 经过试错发现是-webkit-user-selec
阅读全文
