border-radius | 易学教程

vue vuex应用

阅读更多关于 vue vuex应用

vuex为vue的一个插件,用来管理共享数据的,局部数据声明在自己组件内部. 没有使用vuex时,所有共享数据和操作数据的方法都声明在父组件内,数据的通信用props及pubsub等.下面是由vuex改下之前编写的一个小demo: 效果图示: 需求: header 部输入任务,进行添加 ,在list中显示; list 中每个item项, 鼠标移入时, 背景变灰并显示delete按钮 .点击按钮可删除该项; 鼠标移出时,恢复原样; footer 部: 1.根据列表勾选状态及数量显示已完成数和全部数 ; 2.当已完成数为0时,不显示清除已完成任务按钮 ; 3.当已完成数等于全部数量时,全选框勾选. 4.当 list列表为空时,全选框不勾选; 5.当主动勾选全选时,所有项都勾选,去勾选时所有项去勾选. 项目目录: 代码: 1.main.js import Vue from 'vue' import App from './App' import store from './store' import './base.css' // 全局引入base.css文件 /*new Vue({ el: '#app', components: { App }, template: '<App/>', store // 全局注册store对象 })*/ new Vue({ el

PHP为任意页面设访问密码

阅读更多关于 PHP为任意页面设访问密码

代码演示代码简介为你的页面支持加密访问无论什么程序只要是PHP程序都是支持这代码的来实现加密访问你的加密页面或文章等等的页面不保证其他程序可以正常使用麻烦先测试！代码如下 <? php /******************************************** * 使用方法: * * 1、将本段代码保存为 MkEncrypt.php * * 2、在要加密的页面前面引入这个 php 文件 * require_once('MkEncrypt.php'); * * 3、设置页面访问密码 * MkEncrypt('页面密码'); * ********************************************/ // 密码 Cookie 加密盐 if (! defined ( 'MK_ENCRYPT_SALT' )) define ( 'MK_ENCRYPT_SALT' , 'Kgs$JC!V' ); /** * 设置访问密码 * * @param $password 访问密码 * @param $pageid 页面唯一 ID 值，用于区分同一网站的不同加密页面 */ function MkEncrypt ( $password , $pageid = 'default' ) { $pageid = md5 ( $pageid );

个人博客首页博文卡片的实现

阅读更多关于个人博客首页博文卡片的实现

个人博客首页博文卡片的实现最近，在用React全家桶+go+ant做一个个人博客项目，在首页，我想要实现一个博文卡片，既不失美观，又能完整体现一篇文章的简述，所以，就有了下面GIF里的这个博文卡片：具体代码如下： //图片引入 const images = { test: require('../../images/dog.png'), list1: require('../../images/list-1.jpg'), list2: require('../../images/list-2.jpg'), list3: require('../../images/list-3.jpg') } //jsx代码 <li className="card"> <div className="right-scroll-wrapper"> <div className="top-text"> <img src={images.list2} alt="list1"/> <p>每一个你不满意的现在，都有一个你没有努力的曾经。</p> </div> </div> <div className="right-content-description"> <div className="top-title"> <p><Link to="/about">这是一个测试样例</Link></p> </div

美观的PHP跳转页面代码

阅读更多关于美观的PHP跳转页面代码

代码简介代码来源无意中浏览她辰博客也就是现在的SKin博客 go跳转代码感觉很不错页面 F12搞下来了分享给需要跳转的人使用这里我说下第8行代码 11代表是跳转的秒数网址代表是要跳转的网址哦代码如下 <html> <head> <meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > <meta charset = "UTF-8" > <meta http-equiv = "X-UA-Compatible" content = "IE=edge" > <meta name = "renderer" content = "webkit" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" > <meta http-equiv = "refresh" content = "11;url='http://www.tx47.cn';" > <title> 页面加载中,请稍候... </title> </head> <body> <div class = 'center-box'

纯CSS实现两个球相交的粘粘效果

阅读更多关于纯CSS实现两个球相交的粘粘效果

这是一个纯粹利用CSS所做出来的效果，这个效果说穿了就是一个图像处理的原理，做法跟Photoshop里头的几乎一模一样，只是一个用图层和色版来制作，一个则是用CSS（把div当成图层思考就好了）。从PhotoShop开始一开始我们来玩Photoshop，会比直接写CSS来得容易理解（没有Photoshop的人也没关系，看完说明也就懂了），首先我们新增两个图层，一个里头放上红色的小球，另外一个里头放上黑色的大球。接着我们使用高斯模糊的滤镜，分别把小红球和大黑球模糊。再来我们新增一个“亮度与对比”的调整图层，勾选使用旧版，然后把对比数值往上拉，你就会看到神奇的现象。拉到边缘不再模糊之后，你就可以用鼠标尝试着把红球移动，就会发现红球与黑球交界的地方变成粘粘的效果心，这就是我们要做的效果！就这样，你已经知道如何用Photoshop来制作，同理，CSS也是用同样的方法，只是把图层换成了div而已，就这么简单。 CSS效果首先我在HTML里头，放上一个class为redball的div当作红球，class为blackball的是黑球，这就是刚刚在PhotoShop里头的两个图层，接着在最外围放上一个class为effect的div，这就是我们的调整图层，完成后HTML代码的长相应该是这样： <div class="effect"> <div class="blackball"><

CSS 预处理器 Stylus分享

阅读更多关于 CSS 预处理器 Stylus分享

CSS 预处理器 Stylus分享 ps:为了分享，内容东拼西凑，并非原创，很多参考了张鑫旭大大翻译的中文文档。这里放上两个不错的stylus链接： https://github.com/leeseean/stylus-style-guide github stylus语法规范 http://blog.hooperui.com/561-2/ 预处理器的作用ect 写的很好。。一、简介由于原生css有一些缺陷，一些CSS预处理器应运而生使用最多的是变量（variables），代码混合（ mixins），嵌套（nested rules）以及代码模块化(Modules)。复用，逻辑能力和抽象能力。 Stylus 相较于SASS更加简洁，甚至冒号也都可以省略，初学Stylus时感到它太神奇了，仅仅以空格分隔属性名和多个属性值就可以生成想要的CSS，而且还可以拼接字符串等等。与此同时，类似Ruby或Python完善的缩进语法，Stylus在简约自由中有效的防止了语法歧义。安装 npm install stylus --save 例子 Stylus由Javascript编译，其结构语句也和Javascript相差不多。Stylus较之LESS则要优越不少，不仅仅是可定义变量，如Javascript般的条件语句和循环语句也为Stylus带来各种可能，加上丰富的内置函数

vue组件化编程应用2

阅读更多关于 vue组件化编程应用2

写几个小案例来理解vue的组件化编程思想,下面是一个demo. 效果图示: 需求: header 部输入任务,进行添加 ,在list中显示; list 中每个item项, 鼠标移入时, 背景变灰并显示delete按钮 .点击按钮可删除该项; 鼠标移出时,恢复原样; footer 部: 1.根据列表勾选状态及数量显示已完成数和全部数 ; 2.当已完成数为0时,不显示清除已完成任务按钮 ; 3.当已完成数等于全部数量时,全选框勾选. 4.当 list列表为空时,全选框不勾选; 5.当主动勾选全选时,所有项都勾选,去勾选时所有项去勾选. 项目目录: 代码: 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue_demo</title>  </head> <body> <div id="app"></div>  <

移动前端开发经验小结

阅读更多关于移动前端开发经验小结

一、概要本文档针对移动前端开发，包括 Hybrid 里面的web页面，非 Native 应用。二、适用所有经验适用于：iOS6.0+, Android4.0+ 三、小结 <1>css伪类:active 如果你想使用元素的伪类来实现按下激活状态，那么你需要知道以下问题： iOS上的几乎任何浏览器，定义元素的伪类 :active 都是无效； Android上，Android Browser 和 Chrome 都支持伪类 :active ，其它第三方浏览器有部分不支持；定义了 :active 并且当前浏览器环境支持，当手指在滚动或者无意间的划过时，:active 状态都会被激活；为了规避上述所有的问题，如果需要按下激活状态，推荐使用 js 新增一个 className <2>清除输入框内阴影 iOS上的几乎任何浏览器输入框（input, textarea）默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： input, textarea { /* 方法1: 去掉边框 */ border: 0; /* 方法2: 边框色透明 */ border-color: transparent; /* 方法3: 重置输入框默认外观 */ -webkit-appearance: none; appearance: none; } <3>圆角Bug

前端Vue框架（三）

阅读更多关于前端Vue框架（三）

子组件补充子组件案列 <!DOCTYPE html> <html lang="en"> <head> <meta charset='UTF-8'> <title>子组件案例</title> <style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 360px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { width: 100%; /*height: 200px;*/ border-radius: 50%; /*width:10%;*/ /*height:15%;*/ float:right; /*margin-left:20px;*/ } .b1{ text-align: center; } </style> </head> <body> <div id="app"> <div class="wrap"></div> <my-tag1 ></my-tag1> <my-tag2 ></my-tag2>

【100个前端小项目-2】KnockoutJS 实现To-do list

阅读更多关于【100个前端小项目-2】KnockoutJS 实现To-do list

最近接手的任务用的是KnockoutJS + TypeScript，所以第二个项目就采用KnockoutJS做一个老生常谈的TODO List。 https://codepen.io/xinxhe/pen/qBBMoVL KnockoutJS的特点是双向绑定，在ViewModel中定义一系列的变量，然后用data-bind绑定到对应的HTML元件中即可。做这个项目的时候有几个难点：1.实现输入to-do后按回车键添加； 2. 实现动态组件变化，如点击编辑按钮后变成储存按钮，点击编辑按钮后to-do文字部分变成编辑框； 3. 修改样式让to-do变得好看（没错，这个花费时间最长！）☺ 下面上代码： HTML <div class="todo-container"> <div class="todo-sub-container todo-title"> <h2>To-do list by KnockoutJS</h2> </div> <div class="todo-sub-container todo-input"> <input data-bind="value: itemToAdd, valueUpdate: 'afterkeydown', event: { keyup : addItem }" placeholder="Add a to-do" /> </div> <div

订阅 border-radius