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

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

browser-sync html 实时预览页面插件

2018-10-22 钟建超

// --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files "css/*.css"官方地址:http://www.browsersync.cn/ 安装: 1、需要node环境     2、npm install -g browser-sync 使用方法: browser-sync start --server --files "css/*.css" // --files 路径是相对于运行该命令的项目(目录) browser-sync start ...

阅读全文>>

标签: html

评论(0) 浏览(34)

CSS选取第几个标签元素:nth-child(n)、first-child、last-child

2018-10-21 钟建超

nth-child(n)、first-child、last-child用法 注:nth-child(n)选择器匹配父元素中的第n个子元素。 n可以是一个数字,一个关键字,或者一个公式。 nth-child(n)用法: 1、nth-child(3) 表示选择列表中的第3个标签,代码如下: li:nth-child(3){background:#fff} 2、nth-child(2n) 表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签,代码如下: li:nth-child(2n){background:#fff} 3、nth-child(...

阅读全文>>

标签: html

评论(0) 浏览(45)

js 星期操作

2018-7-31 钟建超

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> td{ border:1px solid; } button{ margin: 5px; } </style> ...

阅读全文>>

标签: html js

评论(0) 浏览(101)

将ajax方式设置为同步

2018-7-29 钟建超

最近在做一个含有多个下拉框页面的保存和获取功能时,发现获取下拉框的选项值有时正确有时不正确。 故从源头查起: 1、下拉框的值均是在页面加载时去后台通过异步请求数据动态生成的 2、在加载页面获取数据进行判断时,下拉框值的信息有可能还未获取 3、将ajax请求方式设置为同步,解决。 有两种方式: 1、每个ajax请求中添加属性async:false; 2、全局设置ajax属性 $.ajaxSetup({ async:false }); 因为该页面涉及到多个ajax请求,所以采用第二种方式。

阅读全文>>

标签: html js

评论(0) 浏览(85)

mui 设置mui.prompt 为密码框

2018-7-29 钟建超

mui.prompt('text','deftext','title',['true','false'],null,'div') document.querySelector('.mui-popup-input input').type='password'

阅读全文>>

标签: html js

评论(0) 浏览(96)

mui消息框alert,confirm,prompt,toast

2018-7-29 钟建超

<script type="text/javascript" charset="utf-8"> //mui初始化 mui.init({ swipeBack: true //启用右滑关闭功能 }); var info = document.getElementById("info"); document.getElementById("alertBtn").addEventListener('tap', function(...

阅读全文>>

标签: html js

评论(0) 浏览(94)

a标签下载文件指定文件名

2018-7-17 钟建超

<a href="https://cdn.shopify.com/s/files/1/1545/3617/files/SH01_User_Manaul.pdf" download="test.pdf">download</a> 注意这个 download  不一定兼容所有的浏览器

阅读全文>>

标签: html

评论(0) 浏览(215)

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) 浏览(121)

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

2018-5-28 钟建超

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

阅读全文>>

标签: html

评论(0) 浏览(139)

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

2018-5-28 钟建超

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

阅读全文>>

标签: html

评论(0) 浏览(96)

css 换行

2018-5-13 钟建超

word-wrap:break-word

阅读全文>>

标签: html

评论(0) 浏览(123)

css 文字间距

2018-5-10 钟建超

letter-spacing:2px;

阅读全文>>

标签: html

评论(0) 浏览(169)

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

2018-4-29 钟建超

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

阅读全文>>

标签: html

评论(0) 浏览(164)

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) 浏览(204)

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) 浏览(198)

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) 浏览(206)

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) 浏览(186)

移动终端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) 浏览(220)

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) 浏览(235)

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) 浏览(297)