抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

注意:html是可以替换成别的任何类名的还有就是 火狐是只能隐藏 却不能滚动 剩下两个都可以有的说这么写 ::-webkit-scrollbar{display:none} 但是完全不好使至于火狐滚动的问题 以后再想办法吧 123456789101112<style> html { /*隐藏滚动条,当IE下溢出,仍然可以滚动*/...

这个东西还真是浪费了不少时间,网上一些文章写的吧 不知道是原来版本那么做 还是以讹传讹 反正都不太好用
只能大致参考下 好了 进入整体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!--  注意这里 lay-filter 是监听时 或者其他操作时用的 选取用的字段 类似jq的 $('#id')-->
<!-- 注意这里 lay-verify 是你自定义的验证规则名称 这个是必须 如果是简单验证 就写上预设值 就好了 -->
<select name="city" lay-filter="city" lay-verify="city-verify">
<option value="010">北京</option>
<option value="021" disabled>上海(禁用效果)</option>
<option value="0571" selected>杭州</option>
</select>

<!-- 可以是submit提交按钮 也可以是普通按钮 但是呢 必须加上 lay-submit lay-filter="*" 其中 lay-submit 也是不可少的 要不就检测不到提交事件-->
<input type="submit" name="submit" lay-submit lay-filter="*" value="提交">

<script>
//第一步 写自定义规则
form.verify({
cateid: function (value) {
if (value == "") {
return "必须选择一级栏目";
}
},
contact: function (value) {
if (value.length < 4) {
return '内容请输入至少4个字符';
}
},
phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位,只能是数字!'],
email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
});

//第二部 提交监听事件
//只有这样 验证才会执行 submit(*) 就是提交按钮的 lay-filter="*" 这个可以自行更改
//其实回调函数 只是有其他操作要做的时候用的 如果只是验证的话 第二个参数可以不写
form.on('submit(*)', function (data) {
params = data.field;
//alert(JSON.stringify(params))
submit($, params); //这个是提交按钮 当验证通过后就提交
return false;
})
//其实可以直接这么用
//form.on('submit(*)');
</script>

我自己的 因为和h-ui合用 所以有点问题 一些网上的写法不奏效 12345678910111213141516171819202122232425var form = layui.form;form.on('select(cid_1)', function (data) { var cateid = $('#cateid').val(...

有时图省事 直接复制改写就会出现这个问题 所以要注意 错误原因:错误代码改成 复制粘贴害人不浅啊T_T 参考文档css文件报错Uncaught SyntaxError: Unexpected token .

插件名 说明 sweetAlert Alert 美化插件 sweetAlert2 这是2代 效果更华丽些 layer 弹出框 这个和上面的 alert其实效果是差不多的 artDialog 这个是我好久以前就知道的,都忘记了 居然今天又看到了 tipDialog 这个居然不知道 原作者在哪里找到的 网上搜不到 也许自己写的? Simple Switch Sim...

需要做一个滚动后,头部固定的页面
这个用到 css 里的 fixed 就可以实现了

1
2
3
4
5
6
7
8
9
10
11
.headDiv {
position: fixed;
/*固定定位*/
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
border: 1px solid blue;
}

12345678910111213141516171819202122transition: property duration timing-function delay;/*property:执行过渡的属性 all 或者 width 这些css属性duration:执行过渡的持续时间 s 或者 mstiming-function:执行过渡的速率模式 linear:...

align-content:在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。请注意本属性在只有一行的伸缩容器上没有效果。测试效果页说明文章页 justify-content:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进...

IView: 是用vue2开发的前端框架,拿来搭建后台非常省事.官方网站 layui: 国产复古框架.目前刚开发还有点问题,不过以后可以看看.这个相对简单,开发小东西比较适合.官方网站 Element: 网站快速成型工具.放在这里不知道合不合适,这是个’饿了吗’做的基于vue.js 2.0的前端框架,所有东西都被做成了组件了. 相关文档:Element官网 QMUI Web: 一个旨在提...

简介 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 relative 生成相对定位的元素,相对于其正常位置进行定位。因此,”left:20” 会向元素的 LEFT 位置添加 20 像素。 fixed 生成绝对定位的元素...

简介

在使用mui时,遇到 ul li 就会有下边框,可是又跟 border 没有关系, 只要去掉 position: relative 就可以了. 刚开始图省事就这么做了,可后面的问题多多.最后不得已翻看源码才知道,这个东西是拿伪类弄出来的.其实以前也见过,就是没仔细研究,这次遇到了,所以弄明白点了.

讲解

先讲这两个,比较常见的.

“:before” 伪元素可以在元素的内容前面插入新内容。
“:after” 伪元素可以在元素的内容后面插入新内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/*
下面就是困扰我的那行代码,通过变形拉伸,露出页面底色,看上去就是绘制出一个横线.
*/
.mui-table-view
{
position: relative;

margin-top: 0;
margin-bottom: 0;
padding-left: 0;

list-style: none;

background-color: #fff;
}
.mui-table-view:after
{
position: absolute;
right: 0;
bottom: 0;
left: 0;

height: 1px;

content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);

background-color: #c8c7cc;
}
.mui-table-view:before
{
position: absolute;
top: 0;
right: 0;
left: 0;

height: 1px;

content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);

background-color: #c8c7cc;
}

前言

这里只总结了一些只针对APP页面开发的框架.像妹子UI,ZUI,semantic-ui等一些既能开发pc端页面,也能开发APP页面的框架,就不在这里记录了. 可以看这里 不错的前台框架 总结 Semantic UI,slicy,Amaze ui 等等

总结介绍

MUI: 这是个新的UI,应该是国产的.而且还有一整套解决方案.而且有个不错的IDE,所以这个以后可以试试.后台用的是自己的 HTML5+替代手机浏览器内核也就是增强版,Native.js为调用手机硬件的js插件

参考文档
MUI网站
官方主网站

Ionic: 这个不光是个UI库 他和 AngularJS 结合特别深.所以可以算是一套APP解决方案.其他的 UI框架都必须用jquery,Zepto.js,React 等js框架才能使用.

参考文档
官方网站
Ionic开发实战
ionic 安装 | 菜鸟教程

framework7: 这个刚开是因为类似IOS原生页面受到瞩目,而且速度很快.现在也支持安卓,不过貌似不是那么特别好.

参考文档
官方网站

Mint UI: 基于 Vue.js 的移动端组件库 这个可以快速开发不过就是太简单了 不够好看
官方网站

前言 现在框架都放弃了IE9以下的浏览器,不过中国的环境大家都知道的,没办法还是尽量满足吧. 简介禁用IE兼容模式 1234<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">.....

简单说明float原来一直以为float是平面的,浮动就是左右偏移在平面上运动,其实是错的,浮动是立体的,记得用火狐浏览器的debug工具,有一项就是能看到立体的样子.所以当设置浮动后,这个层的宽高就不在瘦父层级的限制了,因为他是立体的,他实际是飘在父层级上.所以需要清浮动才可以让他继续接受父层级的控制,这里就需要overflow:hidden overflow:hidden所以说 over...

前言

今天遇到个很bug的问题.在chrome里当窗口很小的时候,一个div就会偏移,但是当用鼠标调正窗口,又会变好.而且只有在chrome下有这个问题,最后确认原来是margin-top失效的原因.再次说明: 上面那个问题,并没有因使用overflow:hiden而解决.只是放在火狐里这个bug不存在了.后来是通过删除了子容器的 float:left 解决的.但到底是哪里冲突还是不明白.但下面这些方法解决一些浮动漂移是有用的.

问题的解决

正统说法:

1:“在CSS2.1中,水平的margin不会被折叠;垂直margin可能在一些盒模型中被折叠…”
2: 当第一个层浮动,而第二个没浮动层的margin会被压缩,详见–浮动元素后非浮动元素的margin的处理。

一 如果是两个容器并列,一般出现问题,是因为第一个容器加了浮动,第二个没有加 所以造成第二个margin出问题.解决办法是在第二个容器前增加一个<divstyle="clear:both;"></div>.像下面这样,或者给box2也增加float;