gzheyunying 发布的文章
-
CSS3的content属性1
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 1、插入纯文字 html： <h1>这是h1</h1> <h2>这是h2</h2> css： h1::after{ content:"h1后插入内容" } h2::after{ content:none } 效果图： 2、嵌入文字符号 可以使用content属性的 open-quote 属性值和 c......
-
flexbox布局实践2
1、两端对齐垂直居中 这种布局常用于头部 header{ display:flex; justify-content:space-between; align-items:center; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>t......
-
flexbox布局实践1
1、子元素等分 这种布局常用于底部的导航或者tab等分 ul{ display:flex; } li{ flex:1; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test1</title> <style> ......
-
JS学习笔记——实用的 JS 小技巧2
5. 找到数组中的最大最小值 内部函数Math.max() 和 Math.min() 可以从参数中找到最大值和最小值： Math.max(1, 2, 3, 4); // 4 Math.min(1, 2, 3, 4); // 1 如果要在数组中找最大最小值可以这样用： var numbers = [1, 2, 3, 4]; Math.max.apply(null, numbers) // 4 Math.min.apply(null, numbers) // 1 透过 ES6 的展开运算符来完成： var numbers = [1, 2, 3, 4]; Math.max(...nu......
-
JS学习笔记——实用的 JS 小技巧
1. 安全的串接字串 假设有一些不确定的变量类型，而你想将它们串接成字符串，这样可能会导致错误。 var one = 1; var two = 2; var three = '3'; var result = one + two + three; // 会得到 "33" 而非 "123" 可以用 concat 来串接字符串： var one = 1; var two = 2; var three = '3'; var result = ''.concat(one, two, three); // 得到 "123" 2.......
-
ES6学习笔记——类
在 ES6 之前，我们通过构造函数来创造一个类，并且通过原型来扩展属性： function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } Person.prototype.incrementAge = function () { return this.age += 1; }; 然后可以这样继承类： function Personal(name, age, gender, occupation, hobby) {......
-
ES6学习笔记——参数
在 ES5 中，在函数中我们需要各种操作去处理 默认参数、不定参数 和 重命名参数 等需求，在 ES6 中我们可以使用更简洁的语法完成这些需求。 默认参数 function addTwoNumbers(x, y) { x = x || 0; y = y || 0; return x + y; } ES6 中，函数的参数可以支持设置默认值： function addTwoNumbers(x=0, y=0) { return x + y; } addTwoNumbers(2, 4); // 6 addTwoNumbers(2); // 2 addTwo......
-
ES6实战——字符串
在 ES6 中，标准库升级了很多，在这些变化中有许多新的对于字符串的函数，比如 .includes() 和 .repeat()。 .includes( ) var string = 'food'; var substring = 'foo'; console.log(string.indexOf(substring) > -1); // true 之前我们使用 indexOf() 函数的返回值是否 >-1 来判断字符串是否包含某些字符串，现在我们更简单地使用 .includes() 来返回一个布尔值来判断： const string = 'food'; const ......
-
React学习笔记
学习React的过程中，领悟到了一些基础要点，决定记录下来，以便以后阅读查看。 组件： 组件类首字母必须大写 var Hello = React.createClass({ render: function(){ return <h1>Hello ,{this.props.name}</h1> } }) ReactDOM.render( <Hello name="cxs" />, document.body ) this.props.children this.props对象......
-
React组件间通信
近期为了练习react，自己写了一个Demo，功能很简单，展示员工信息列表，支持按性别和姓名筛选。效果如下： 默认： 筛选： 删除： 引用的文件如下： <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> 核心代码： <body&g......
-
bootstrap3入门运用
相信大家对于bootstrap并不陌生，但是对于传说中优先兼容移动端的bootstrap3，则不一定很熟悉。对此我进行了一番入门实践。 引用的文件如下： <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js&quo......
-
weui+react实践
继上个月使用weui以后，我把react和weui结合起来做了一个表单，对输入的内容进行检验，检验内容有姓名、学号、手机号。 引用的文件如下，均为weui或react的文件： <link rel="stylesheet" href="css/weui.css"/> <link rel="stylesheet" href="css/example.css"/> <script src="js/react.js"></sc......
-
WEUI实践
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。 有时候希望做一些比较简洁、对样式没有特定要求的移动端页面，可以考虑直接使用。不过不知道能否通过组里QA同学的测试，将来等QA同学有空时可以安排测试。 以最常用的表单进行示例 信息填写页面： 提交成功页面： 两个页面只引用了库里的example.css文件和weui.css文件。 信息填写页面的代码如下： <!DOCTYPE html......
