This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>vitual dom</title> | |
<script src="./build/compiled.js"></script> | |
</head> | |
<body> | |
<div id="root"></div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// src/common.js | |
console.log('common file'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> | |
<title>Image preview example</title> | |
<script type="text/javascript"> | |
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; | |
oFReader.onload = function (oFREvent) { | |
document.getElementById("uploadPreview").src = oFREvent.target.result; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The first commented line is your dabblet’s title | |
*/ | |
background: #f06; | |
background: linear-gradient(45deg, #f06, yellow); | |
min-height: 100%; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
一般情况下,使用link标签而只希望响应事件后什么都不做,所以将href设置为"#",但是: | |
设置为"#"会出现页面跳到页首,和url变化的问题,影响用户体验,于是可以使用"###"代替"#",让浏览器不能识别这个锚,but | |
这个仅仅解决了页面跳到页首的问题,但是没有解决url改变的问题,实在不希望用户看到让他们疑惑的东西,为什么url改变了, | |
所以可以使用href="javascript:void(0);",出自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void,but | |
mozilla有时会不考虑IE的感受,有时候会不兼容ie加载,所以可以使用javascript:;作为href的值,这样最好啦!貌似!哈哈 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
li[class|="test3"]{color:#f00;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* reset css | |
*/ | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
/** |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* The first commented line is your dabblet’s title | |
*/ | |
ul{ | |
list-style-type:none; | |
width:300px; | |
} | |
ul li.item{ | |
background-color:#FFCCCC; | |
margin-top:5px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<style> | |
img{ | |
display:block; | |
} | |
ul{ | |
list-style-type:none; | |
} | |
li{ | |
width:50px; | |
float:left; |