background | 易学教程

js+css实现移动端抽屉式导航

阅读更多关于 js+css实现移动端抽屉式导航

前言移动端导航多种多样，抽屉式导航就是常见之一，下面我们通过javascript和css相结合来实现移动端的抽屉式导航。先看看实现的效果： index.html <!DOCTYPE html> < html lang = " zh-CN " > < head > < meta charset = " UTF-8 " > < meta http-equiv = " X-UA-Compatible " content = " IE=edge " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > 抽屉式demo </ title > < link rel = " stylesheet " href = " ./css/index.css " > </ head > < body > < div id = " root " > < div class = " box " > < div class = " btn-box " > < button id = " btn " class = " btn " > < span > </ span > < span > </ span > < span > </ span > </ button > </

css 居中的汇总

阅读更多关于 css 居中的汇总

前言对css居中的几种方式汇总，并且分析适用情况。正文 margin+position .CenterParent { position: relative; height: 200px; width: 200px; background-color:yellow; } .CenterChild{ position:absolute; height: 100px; width: 100px; top:50%; left: 50%; margin-top:-50px; margin-left:-50px; background-color: red; } <div class="CenterParent"> <div class="CenterChild"> </div> </div> 后续不展示效果。优点：兼容全部浏览器缺点：需要知道子元素的宽高。 margin:aotu+postion .CenterParent { position: relative; height: 200px; width: 200px; background-color:yellow; } .CenterChild{ position:absolute; height: 100px; width: 100px; top:0px; left: 0px; bottom: 0px; right:

关于jQuery中实现放大镜效果

阅读更多关于关于jQuery中实现放大镜效果

1.1.1 摘要相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似的图片查看效果。在接下来的博文中，我们将向大家介绍通过jQuery实现放大镜效果。目录实现原理 mousemove事件相对坐标 background-position属性 mousewheel事件 1.1.2 正文实现原理首先，我们讲解一下放大镜效果的实现方式：方法一：准备一张高像素的大图，当鼠标放到原图上，加载显示大图的对应位置。方法二：对原图片进行放大，也就是调整原图的长和宽。上面我们介绍了通过两种方式实现放大镜效果，接下来，我们将以上的两种方式应用到我们的jQuery插件中。首先，我们需要一个img元素显示原图对象，还需要一个容器作为显示框；显示框里面存放大图对象。当鼠标移动到原图上时，通过对大图进行绝对定位来显示对应的部位，实现类似放大镜的效果。接下来，让我们定义Index.html页面，具体实现如下： <!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>jQuery Image Zoom Demo</title>

Vue2学习笔记:class和style

阅读更多关于 Vue2学习笔记:class和style

1.用法 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="vue.js"></script> <script type="text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ color:'color', //值color是定义的样式名 background:'background', test:{color:"#666", fontWeight:"bold"} }, }); } </script> <style type="text/css"> .color{color: #000} .background{background: #ccc} </style> </head> <body> <div id="box">   <span v-bind:class="color">方式1</span> 等价 <span :class="color">方式1</span> <br> <span v-bind:class="[color,background]">方式2</span> <span v

Intel x86_64 Architecture Background 2

阅读更多关于 Intel x86_64 Architecture Background 2

　　这里是在学习Intel x86_64体系架构时学习到的一些概念，记录下来以供日后参考。如果有错的地方，欢迎指正！ CPU上下文切换(context switch): 　　这个概念第一次听到对我来说是完全陌生的，但了解之后发现和老师讲的东西有很多联系。现在 linux 是大多基于抢占式，CPU给每个任务一定的服务时间，当时间片轮转的时候，需要把当前状态保存下来，同时加载下一个任务，这个过程叫做上下文切换。时间片轮转的方式，使得多个任务利用一个CPU执行成为可能，但是保存现场和加载现场，也带来了性能消耗。缓存一致性协议：　　在多核系统中，各个核的cache存储相同变量的副本，当一个处理器更新cache中该变量的副本时会造成各个核之间的缓存不一致，这就是缓存一致性问题。我们要保证在一个核的缓存更新时，其他处理器应该知道该变量已更新，即其他处理器中cache的副本也应该更新，需要使用缓存一致性协议。 CPU处理输入输出的简要过程: 进程内存分配映射方式：　　通过地址转换单元，让每个设备都像拥有了一块独立的DRAM。地址转换单元将虚拟地址转化为物理地址（页到页的模式）。地址映射基本思想页到页的映射在多个操作系统同时工作下的地址映射超线程技术：　　尽管提高CPU的时钟频率和增加缓存容量后的确可以改善性能，但这样的CPU性能提高在技术上存在较大的难度

CSS的水平居中和垂直居中方式

阅读更多关于 CSS的水平居中和垂直居中方式

水平居中 1.行内元素或行内块元素水平居中，即给其父元素添加text-align：center 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 padding: 0; 11 margin: 0; 12 } 13 14 .wrapper { 15 height: 400px; 16 background-color: pink; 17 text-align: center; 18 } 19 </style> 20 </head> 21 22 <body> 23 24 <div class="wrapper"> 25 <span class="center">text-align：center</span> 26 </div> 27 28 </body> 29 30 </html> 2.块级元素水平居中可以用margin：0 auto 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta

VSCode

阅读更多关于 VSCode

咳咳，本来用的一直是IDEA，但是IDEA在我电脑上跑起来非常~非常慢，所以果断弃用，转战VSCode。 VSCode是一款轻量级的编辑器，电脑跑起来毫无压力，简直不要太爱~~~~ 颜值也是杠杠滴，无图无真相，来，上图是不是马上就有一种敲代码的欲望，，，嘎嘎嘎 ……奥利给 VSCode创建web工程也是非常方便的，不像IDEA还得经过n多步。进入VSCode之后，满满的都是英文，对于我这种英语二级都勉强的人来说，简直是恶魔，话不多说，立马换中文。嘎嘎嘎 Ctrl+Shift+P 进入控制面板，在输入框敲上【Configure Display Language】。点击【install additional language】添加语言包。安装中文简体。 OK，重启。亲切感马上倍增。想用VSCode跑Web程序，还得装一个必要的插件。【Live Server】点击扩展框搜索 Live Server install 设置配置信息设置默认打开的浏览器。建议Chrome 创建web工程：点击【文件】—>打开文件夹在桌面是建一个存放web工程的文件夹。选择该文件夹新建文件输入文件名，注意：后缀是.html 写好HTML程序后，在代码界面右键，点击【Open with Live Server】，在网页上插看结果。到这一步，编辑器可能会提示 “找不到Chrome文件

水平垂直居中div的3中方式

阅读更多关于水平垂直居中div的3中方式

flex方式 <div class="dv"> <div class="dv2"></div> </div> .dv{ width: 400px; height: 400px; background-color: red; display: flex; justify-content: center; align-items: center; } .dv2{ width: 200px; height: 200px; background-color:blue; } position方式 <div class="dv3"> <div class="dv4"> </div> </div> <style> .dv3 { width: 400px; height: 400px; background-color: yellow; position: relative; } .dv4 { width: 200px; height: 200px; position: absolute; background-color: purple; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } </style> position+transform 方式 <div class="dv5"> <div class="dv6"> </div> <

VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列

阅读更多关于 VUE实现Studio管理后台（九）：开关（Switch）控件，输入框input系列

接下来几篇作文，会介绍用到的输入框系列，今天会介绍组普通的调用方式，因为RXEditor要求复杂的输入功能，后面的例子会用VUE的component动态调用，就没有今天的这么直观了，控件的实现原理都一样，只是调用方式的区别，今天的例子的调用代码为了写作文特殊制作的，写完作文还要恢复回去。开关控件（Switch）的实现效果：给组件取个好听的名字，叫RxSwitch吧。调用代码： <RxSwitch :onValue = "'on-value'" :offValue = "'off-value'" v-model = "inputValue" > </RxSwitch> 组件代码： <template> <div class="rx-switch" :class="onValue === inputValue? 'on' : ''" @click="click"> </div> </template> <script> export default { name: 'RxSwitch', props:{ value:{ default:'' }, onValue:{ default:'on' }, offValue:{ default:'off' }, }, computed:{ inputValue: { get:function() { return this.value; }

微信小程序_1 view组件的运用

阅读更多关于微信小程序_1 view组件的运用

思路：就是对其中图案的分解与拼装。方案一：分解成8个小块实现 //index.wxml < view class = "section" > < view class = "section__title" > flex - direction : row < / view > < view class = "flex-wrp" style = "flex-direction:row;" > < view class = "flex-item bc_green1" > 1 < / view > < view class = "flex-item bc_red2" > 2 < / view > < view class = "flex-item bc_blue3" > 3 < / view > < view class = "flex-item bc_red" > 2 < / view > < view class = "flex-item bc_blue" > 3 < / view > < / view > < view class = "flex-wrp" style = "flex-direction:row;" > < view class = "flex-item bc_green" > 1 < / view > < view class = "flex-item

订阅 background