安然不哭-西坝阿超个人博客

做技术一定要一颗恒心,这样才不会半途而废。

input file选择图片后 预览

2018-5-30 钟建超

简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> <img src="" class="img"> </div> <input type="file" class="imgInput"> 注:img就是用来显示预览图片的 然后就是jQuery代码,很简单 $(".imgInput").change(function(){ $(".img").attr("src",URL.createObjectURL($(this)[0].files...

阅读全文>>

标签: html

评论(0) 浏览(55)

CSS自动换行、强制不换行、强制断行、超出显示省略号

2018-5-28 钟建超

P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是最近的项目中发现,使用ajax加载数据之后,p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,虽然解决了问题,但是并没有发现本质原因,本质在于,我当时获取的数据是一长串的数字,浏览器应该是对数字和英文单词处理方式相近,不会截断。 先给出各种方式,再具体介绍每一个属性。 强制不换行 p { white-space:nowrap; } 自动换行 p { word-wrap:break-word; } 强制英文单词断行 p { word-break:break-all; } *注意...

阅读全文>>

标签: html

评论(0) 浏览(72)

手机端页面中去除a标签点击时的默认样式

2018-5-28 钟建超

在写手机端页面的时候,遇到一个问题,当你写的a标签,在手机上点击时,会有一个蓝色或者其他颜色的边框,对用户体验比较差 可以在css里添加样式,去除默认样式  a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

阅读全文>>

标签: html

评论(0) 浏览(36)

css 换行

2018-5-13 钟建超

word-wrap:break-word

阅读全文>>

标签: html

评论(0) 浏览(58)

css 文字间距

2018-5-10 钟建超

letter-spacing:2px;

阅读全文>>

标签: html

评论(0) 浏览(73)

如何解决div里面img图片下方有空白的问题?

2018-4-29 钟建超

如何解决div里面img图片下方有空白的问题? 给img 设置属性display:blok

阅读全文>>

标签: html

评论(0) 浏览(89)

rem 移动端布局

2018-4-24 钟建超

js 设置 //获取视窗宽度 let htmlWidth=document.documentElement.clientWidth||document.body.clientWidth; //获取视窗高度 let htmlDom=document.getElementsByTagName("html")[0]; htmlDom.style.fontSize= htmlWidth / 20 +"px"; window.addEventListener('resize',(e)=>{ let htmlWidth=document.documentEl...

阅读全文>>

标签: html

评论(0) 浏览(95)

iframe一般情况下都会有边框而影响美观,以下这段iframe是无边框:

2018-4-9 钟建超

<iframe src="http://blog.csdn.net/spring21st” width=”750″ height=”30″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>

阅读全文>>

标签: html

评论(0) 浏览(100)

MUI对话框

2018-4-4 钟建超

一、alert告警框 用法  .alert(message,title,btnvalue,callback[,type]); document.getElementById("noclick").addEventListener('tap', function() { mui.alert("欢迎使用Hello MUI", "Hello MUI","确定关闭", function() { mui.alert("你刚关闭了警告框","操作提示","确定"); }); ...

阅读全文>>

标签: html

评论(0) 浏览(96)

WdatePicker的日期设置格式

2018-4-1 钟建超

WdatePicker是要结合My97datePicker使用的,首先我们需要下载My97datePicker的资源包,然后在页面引入相应资源才能使用。 使用方法如下所示: <input type="text" id="begin" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd',minDate:'2012-01-01',maxDate:'%y-%M-%d'})" class="Wdate"/> skin:皮肤颜色, dateFmt:日期初始化格式, minDate:最小选择时间, maxDat...

阅读全文>>

标签: html

评论(0) 浏览(104)

移动终端h5页面常用的meta属性

2018-3-25 钟建超

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-de...

阅读全文>>

标签: html

评论(0) 浏览(125)

html5 中input type=‘file’实现文件图片等的上传的文件类型限制

2018-3-16 钟建超

可以直接设置input标签的accept属性来限制上传文件的类型 <input type="file" accept="application/msword" > 1.accept=”application/msexcel” 2.accept=”application/msword” 3.accept=”application/pdf” 4.accept=”application/poscript” 5.accept=”application/rtf” 6.accept=”application/x-zip-compressed” 7.accep...

阅读全文>>

标签: html

评论(0) 浏览(131)

H5页面背景音乐,C33 360°旋转效果

2018-2-24 钟建超

在做H5页面的时候,经常会需要用到背景音乐,比如电子贺卡、动态音乐相册等,右上角有个360°旋转的音乐图标,点击可以控制音乐是否播放,那这个效果是如何实现的呢? 我现整理了一下代码: <div id="audio_btn" class="rotate"> <audio loop src="bg_audio.mp3" id="media" autoplay="" preload=""></audio> </div> CSS代码如下: #audio_btn { width: 30px; he...

阅读全文>>

标签: html

评论(0) 浏览(159)