界面优化
Clara_G
前端的渣渣一枚
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
js置空html界面中的title标签
上代码,亲测有效document.title='\u200E';document.title=' ',这个方法我试过不可以.效果图如下:但是,在右键检查网页源代码时,title中还是有内容的,截图如下:笔者这边还是会出现闪动一下才清空,在手机浏览器跟app上的h5界面都这样子,如有更好的方法欢迎交流参考文章:https://www.jianshu.com/...原创 2020-03-03 11:27:39 · 981 阅读 · 0 评论 -
移动端H5界面 前端html app 自动清除引入的css js缓存方法
笔者近期在开发移动端h5界面,发现每次改完样式 js都需要强制清除下手机浏览器的缓存,才显示效果,但是通过微信浏览器进行查看时没找到清除缓存的按钮,于是乎,自己上网上找了写方法,又在学习群里交流了下,总结出以下方法1.添加版本号或者标识号在引用的css 跟js 后面,添加一个版本号,至于怎么使用规则,可以跟组内小伙伴约定好,这样子升级到正式环境的时候,就不用用户自己清理缓存了.(原理:增加...原创 2020-01-13 16:38:26 · 3147 阅读 · 1 评论 -
带有图片的的列表实现自适应的方案
自适应是个很长久的话题,尤其是在做PC端界面时,考虑到自适应的过程,图片也不能定高宽.现在来讲一下.一般图片我们用一个div来当容器.里面放置我们要设置的来自服务器或者本地的静态资源图片.结构一般如下所示:<div class="imgContainer"> <img src="images/a.jpg"/></div>这时候有两种方案来...原创 2019-08-07 11:07:19 · 1028 阅读 · 0 评论 -
解决给li添加border兄弟元素浮动的问题(添加border不浮动的方法)
最近笔者在写界面时遇到一个问题,给li添加border边框选中效果的时候,发现它的兄弟元素一直抖动.发现时浏览器的盒模式计算增加了元素的width找了很多资料,说是给li元素添加box-sizing属性,结果还是不行box-sizing属性是css3为了改善盒模型定义的,该属性能事先定义盒模式的尺寸解析方式,box-sizing:content-box|border-box|i...原创 2019-05-13 10:14:23 · 1596 阅读 · 1 评论 -
css实现文章首字下沉显示
要向实现下图文章首字下沉的效果,需要使用css3中的:first-letter属性代码如下:css代码: .first::first-letter { font-size: 50px; float: left; color: #333; text-indent: 0; padding: 2px;...原创 2019-04-26 17:29:56 · 2990 阅读 · 0 评论 -
媒体查询在iPhone iPod touch中使用safari浏览器失效的原因
在iphone和ipod touch中使用的Safari浏览器会出现媒体查询失效这是为什么呢这是因为在iphone中使用Safari浏览器在进行页面显示时,将窗口宽度当做980px像素进行显示。所以即使在界面中已经写好了页面在小尺寸窗口中运行时的样式,iphone中的Safari浏览器也不会使用这个样式,而是选择窗户宽度为980px时所使用的样式。在这种情况下,可以使用<meta>...原创 2019-04-26 14:21:20 · 1250 阅读 · 0 评论 -
@media screen and 不起作用原因汇总。(转载)
@media screen and 不起作用原因汇总。首先确认是不是css本身的问题,而不是媒体查询没有生效;例如div{display:flex;}/*那么div所有的display效果都将无法生效*/第一种错误:格式书写错误and后面必须有空格例如下面代码;@media screen and (max-width:500px){ }第二种错误:样式冲突;@m...转载 2019-04-26 12:04:24 · 3233 阅读 · 0 评论 -
label 标签的for的作用和构建表单结构时改善用户体验的建议
一般我们在构建表单的时候,会用到label标签,label标签页通常是下面两种用法:1.for绑定的时name属性里面的值,<div class="form-group"> <label for="name">用户名:</label> <input type="text" id="userName" name="name"/>&...原创 2019-04-16 14:34:30 · 725 阅读 · 0 评论 -
ie8及以下浏览器使用HTML5新标签
由于有些浏览器并不支持HTML5中新增的元素(header,footer, section,article,nav等),如早期的IE8或更早版本。为了让其支持新增的HTML5元素,可以使用document.createElement 的方法思路:先判断浏览器--ie8及以下使用该方法创建元素 var DEFAULT_VERSION = 8.0; var ua = navigat...原创 2019-03-21 17:37:34 · 256 阅读 · 0 评论 -
input框取消自动回填账号密码等信息的解决方法
最近在开发注册界面的时候,发现了一个问题,chorme浏览器中账号和密码老是回填到input框中(浏览器保存的用户名和密码自动填充).刚开始给input框添加autocomplete="off",没管用给form 加这个也没管用最终通过这个方法解决的阻止浏览器自动回填表单功能<form role="form" autocomplete="off"> &l...原创 2019-03-04 14:21:46 · 6808 阅读 · 2 评论 -
前端js实现上传图片大于2M时压缩,预览
最近有个需求,用户在上传图片预览时,需要显示大小为2M一下,大于2M的需要压缩后上传,小于2M的原图显示一.先说下限制图片大小的好处直接上传特别占用带宽,上传速度慢,对程序考验以及影响用户的体验 图片资源直接上传,占用的服务器空间过大,容易造成空间浪费二.实现思路只要是借用canvas和FileReader函数,以下是代码,其中添加了需求,大于2M的图片才进行压缩,小于的原图显示...原创 2019-02-26 16:30:37 · 11536 阅读 · 2 评论 -
iframe根据子界面高度自适应的情况--子界面table异步
iframe根据子界面高度自适应的情况--子界面table异步最近笔者遇到一个问题,需要在后台管理系统界面中右侧区域iframe根据子界面的高度进行自适应.开始用的方法是这样的&lt;iframe scrolling="no" frameborder="0" name="mainFrame" id="mainFrame" src=&quo原创 2018-10-23 12:13:56 · 671 阅读 · 0 评论
分享