前端参考文献

分手后的思念是犯贱 2024-04-17 15:44 74阅读 0赞

声明：以下内容大多转载，或直接指向原文（本文仅供个人记录内容便于后期查阅，他人查阅建议直接查看原文）

## css 布局： ##

*  [flex布局教程][flex]：原文地址http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
 *  [Flex 布局语法][Flex] ：原文地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm\_source=tuicool)

## 前端调试： ##

如何使用电脑上的[谷歌浏览器来调试安卓手机][Link 1]上的移动端页面：原文地址https://www.cnblogs.com/JinQingsong/p/6591830.html

## 插件集合： ##

1.  目录树插件  
    [zTree 演示][zTree]：原文地址http://www.treejs.cn/v3/demo.php\#\_208
2.  [requireJS][]  
    RequireJs简单使用:原文地址https://www.jianshu.com/p/c90fff39c225  
    requireJS 从概念到实战：原文地址https://www.cnblogs.com/HCJJ/p/6611669.html

## 技术集合： ##

1.  [ECMAScript 6 入门][ECMAScript 6]：原文地址http://es6.ruanyifeng.com/\#docs/arraybuffer\#TypedArray-%E8%A7%86%E5%9B%BE
2.  [reduce的使用][reduce]：原文地址https://www.runoob.com/jsref/jsref-reduce.html

## jQuery集合： ##

1.  [jQuery的编写原则][jQuery]：原文地址https://www.cnblogs.com/lishaofei/p/3616557.html

--------------------

flex布局

<!DOCTYPE HTML lang="zh-CN">
    <html>
        <div class="first-face">
    	  <span class="pip"></span>
    	</div>
    	<div class="second-face">
    	  <span class="pip"></span>
    	  <span class="pip"></span>
    	</div>
    	<div class="third-face">
    	  <span class="pip"></span>
    	  <span class="pip"></span>
    	  <span class="pip"></span>
    	</div>
    	<div class="fourth-face">
    	  <div class="column">
    		<span class="pip"></span>
    		<span class="pip"></span>
    	  </div>
    	  <div class="column">
    		<span class="pip"></span>
    		<span class="pip"></span>
    	  </div>
    	</div>
    	<div class="fifth-face">
    	  <div class="column">
    		<span class="pip"></span>
    		<span class="pip"></span>
    	  </div>
    	  <div class="column">
    		<span class="pip"></span>
    	  </div>
    	  <div class="column">
    		<span class="pip"></span>
    		<span class="pip"></span>
    	  </div>
    	</div>
    	<div class="sixth-face">
    	  <div class="column">
    		<span class="pip"></span>
    		<span class="pip"></span>
    		<span class="pip"></span>
    	  </div>
    	  <div class="column">
    		<span class="pip"></span>
    		<span class="pip"></span>
    		<span class="pip"></span>
    	  </div>
    	</div>
    	<style>
    		.first-face {
    		  display: flex;
    		  justify-content: center;
    		  align-items: center;
    		}
    
    		.second-face {
    		  display: flex;
    		  justify-content: space-between;
    		}
    
    		.second-face .pip:nth-of-type(2) {
    		  align-self: flex-end;
    		}
    
    		.third-face {
    		  display: flex;
    		  justify-content: space-between;
    		}
    		  
    		.third-face .pip:nth-of-type(2) {
    		  align-self: center;
    		}
    
    		.third-face .pip:nth-of-type(3) {
    		  align-self: flex-end;
    		}
    
    		.fourth-face, .sixth-face {
    		  display: flex;
    		  justify-content: space-between;
    		}
    
    		.fourth-face .column, .sixth-face .column {
    		  display: flex;
    		  flex-direction: column;
    		  justify-content: space-between;
    		}
    
    		.fifth-face {
    		  display: flex;
    		  justify-content: space-between;
    		}
    		  
    		.fifth-face .column {
    		  display: flex;
    		  flex-direction: column;
    		  justify-content: space-between;
    		}
    		  
    		.fifth-face .column:nth-of-type(2) {
    		  justify-content: center;
    		}
    
    		/* OTHER STYLES */
    
    		* {
    		  box-sizing: border-box;
    		}
    
    		html, body {
    		  height: 100%;
    		}
    
    		body {
    		  display: flex;
    		  align-items: center;
    		  justify-content: center;
    		  vertical-align: center;
    		  flex-wrap: wrap;
    		  align-content: center;
    		  font-family: 'Open Sans', sans-serif;
    		  
    		  background: linear-gradient(top, #222, #333);
    		}
    
    		[class$="face"] {
    		  margin: 16px;
    		  padding: 4px;
    		  
    		  background-color: #e7e7e7;
    		  width: 104px;
    		  height: 104px;
    		  object-fit: contain;
    		  
    		  box-shadow:
    			inset 0 5px white, 
    			inset 0 -5px #bbb,
    			inset 5px 0 #d7d7d7, 
    			inset -5px 0 #d7d7d7;
    		  
    		  border-radius: 10%;
    		}
    
    		.pip {
    		  display: block;
    		  width: 24px;
    		  height: 24px;
    		  border-radius: 50%;
    		  margin: 4px;
    
    		  background-color: #333;
    		  box-shadow: inset 0 3px #111, inset 0 -3px #555;
    		}
    	</style>
    </html>```

[flex]: http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
[Flex]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool%29
[Link 1]: https://www.cnblogs.com/JinQingsong/p/6591830.html
[zTree]: http://www.treejs.cn/v3/demo.php#_208
[requireJS]: https://requirejs.org/
[ECMAScript 6]: http://es6.ruanyifeng.com/#docs/arraybuffer#TypedArray-%E8%A7%86%E5%9B%BE
[reduce]: https://www.runoob.com/jsref/jsref-reduce.html
[jQuery]: https://www.cnblogs.com/lishaofei/p/3616557.html