（干貨分享） 11張思維導(dǎo)圖詳解JavaScri

（干貨分享） 11張思維導(dǎo)圖詳解JavaScript

習(xí)的道路就是要不斷的總結(jié)歸納，好記性不如爛筆頭。但是，毫無(wú)邏輯的總結(jié)，并無(wú)太大意義，一份有規(guī)劃有流程的總結(jié)往往能有事半功倍的作用。

下面小編將Po出11張JavaScript相關(guān)的思維導(dǎo)圖，圖片高清，建議WiFi下查看，土豪隨意。分別歸類(lèi)為：

Javascript變量

Javascript運(yùn)算符

Javascript數(shù)組

Javascript流程語(yǔ)句

Javascript數(shù)據(jù)類(lèi)型

Javascript字符串函數(shù)

Javascript函數(shù)基礎(chǔ)

Javascript基礎(chǔ)DOM操作

Javascript正則表達(dá)式

Jquery知識(shí)結(jié)構(gòu)圖

Window對(duì)象

能夠認(rèn)真看完就是一次對(duì)Javascript的回顧與提升，可以很好的檢驗(yàn)基礎(chǔ)。希望多大家學(xué)習(xí)和成長(zhǎng)有用。

注：文章綜合自博客園、CSDN等平臺(tái)，最終解釋權(quán)歸原作者所有，侵刪。做一只IT干貨的搬運(yùn)工，只為成就更好的你！

我們的開(kāi)發(fā)工程中經(jīng)常會(huì)使用到各種圖，所謂的圖就是由節(jié)點(diǎn)和節(jié)點(diǎn)之間的連接所形成的系統(tǒng)，數(shù)學(xué)上專(zhuān)門(mén)有一個(gè)分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導(dǎo)圖，流程圖，狀態(tài)機(jī)，組織架構(gòu)圖，等等。今天我要做的是用開(kāi)源的HTML5工具來(lái)快速構(gòu)造一個(gè)做圖的工具。

工具選擇

工預(yù)善其事，必先利其器。第一件事是選擇一件合適的工具，開(kāi)源時(shí)代，程序員還是很幸福的，選擇很多。

flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG創(chuàng)建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各種交互式圖表的創(chuàng)建。有免費(fèi)版和收費(fèi)版
joint.js http://www.jointjs.com/ joint.js 是另一個(gè)創(chuàng)建圖標(biāo)庫(kù)的工具，也提供免費(fèi)版和商業(yè)版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開(kāi)源的流程圖創(chuàng)建工具，小巧精悍，使用簡(jiǎn)單
d3 http://d3js.org 在html5領(lǐng)域，d3可謂是最好的可視化基礎(chǔ)庫(kù)，提供方面的DOM操作，非常強(qiáng)大。

最終，我選擇了jsPlumb，因?yàn)樗耆_(kāi)源，使用很簡(jiǎn)單，用D3的話可能會(huì)多花很多功夫。joint.js也不錯(cuò)。大家可以根據(jù)自己的需要選擇。

構(gòu)建靜態(tài)應(yīng)用

下面我們一步一步的來(lái)使用jsPlumb來(lái)創(chuàng)建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類(lèi)似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個(gè)函數(shù)里：

jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}

創(chuàng)建一個(gè)jsPlumb的實(shí)例，并初始化jsPlumb的配置參數(shù)：

//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});

這里給給出了一些配置包括，連接線（這里配置了一個(gè)貝塞爾曲線），線的風(fēng)格，連接點(diǎn)得風(fēng)格。Container需要配置一個(gè)對(duì)應(yīng)的DIV容器的id。（這里也可以使用setContainer的方法）

下面我們要?jiǎng)?chuàng)建一個(gè)節(jié)點(diǎn)（node），每一個(gè)節(jié)點(diǎn)可以用一個(gè)DIV來(lái)實(shí)現(xiàn)。我這里提供了一個(gè)函數(shù)來(lái)創(chuàng)建節(jié)點(diǎn)。

function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);

??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}

這里做的事情就是創(chuàng)建了一個(gè)DIV元素，并放在對(duì)應(yīng)的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來(lái)操作DOM，大家可能會(huì)更習(xí)慣JQuery，這純屬個(gè)人喜好的問(wèn)題。

最后返回創(chuàng)建節(jié)點(diǎn)的實(shí)例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫(kù)，例如Vanilla

下面我使用一個(gè)函數(shù)來(lái)創(chuàng)建端點(diǎn)/錨點(diǎn)（anchor），錨點(diǎn)就是節(jié)點(diǎn)上的連接點(diǎn)，用于連接不同的節(jié)點(diǎn)。

function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;

??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}

????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];

????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}

instance是jsPlumb的實(shí)例

node是我們用addNode方法創(chuàng)建的Node實(shí)例

ports，是一個(gè)string的數(shù)組，指定端點(diǎn)的個(gè)數(shù)和名字

type，可能是output或者input，指定端點(diǎn)的種類(lèi)，一個(gè)節(jié)點(diǎn)的輸出端口可以連接另一個(gè)節(jié)點(diǎn)的輸入端口。

這里anchor是一個(gè)四維數(shù)組，0維和1維分別是錨點(diǎn)在節(jié)點(diǎn)x軸和y軸的偏移百分比。我這里希望把端口畫(huà)在節(jié)點(diǎn)的左右兩側(cè)，并按照端口的數(shù)量均勻分布。

最后使用instance.addEndpoint來(lái)創(chuàng)建端點(diǎn)。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來(lái)連接端點(diǎn)，非常方便。

下面一步我們提供一個(gè)函數(shù)來(lái)連接端點(diǎn)：

function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];

??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;

??instance.connect({uuids:[uuid_source,?uuid_target]});
}

node1和node2是源節(jié)點(diǎn)和目標(biāo)節(jié)點(diǎn)的引用，port1和port2是源端口和目標(biāo)端口的名字。

使用instance.connect方法來(lái)創(chuàng)建連接。 overlays用來(lái)添加連接線的箭頭效果或者其他風(fēng)格，我這里沒(méi)有使用，因?yàn)橛X(jué)得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數(shù)就可以了。

調(diào)用以上方法來(lái)創(chuàng)建節(jié)點(diǎn)，端點(diǎn)和連接線。

var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});

addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');

connectPorts(instance,?node1,?'out2',?node2,?'in');

這里我們創(chuàng)建了兩個(gè)節(jié)點(diǎn)，第一個(gè)節(jié)點(diǎn)有兩個(gè)輸出端口，第二個(gè)節(jié)點(diǎn)有三個(gè)輸入端口，然后把第一個(gè)節(jié)點(diǎn)的out2端口連接到第二個(gè)端點(diǎn)的in端口。效果如下：

最后我們給節(jié)點(diǎn)增加drag&drop的功能，這樣我們就可以拖動(dòng)這些節(jié)點(diǎn)來(lái)改變圖的布局了。

instance.draggable($('.node'));

這里似乎依賴(lài)于JQuery-UI,我還不是很清楚。

交互式創(chuàng)建節(jié)點(diǎn)

我們已經(jīng)初步具有了創(chuàng)建圖的功能，可是節(jié)點(diǎn)的創(chuàng)建必須通過(guò)程序，我們希望用交互的方式來(lái)創(chuàng)建節(jié)點(diǎn)。

通常我們希望有一個(gè)tree view的控件，讓后通過(guò)拖拽來(lái)創(chuàng)建對(duì)應(yīng)類(lèi)型的節(jié)點(diǎn)。這里我使用了這個(gè)開(kāi)源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創(chuàng)建一個(gè)tree view：

function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?

??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});

樹(shù)上有兩個(gè)節(jié)點(diǎn):

然后我實(shí)現(xiàn)從樹(shù)上拖拽對(duì)應(yīng)的節(jié)點(diǎn)，到流程圖上的邏輯。

//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});

$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}

??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';

??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});

這里要注意的是要避免和jsPlumb拖拽端點(diǎn)的邏輯沖突，當(dāng)檢測(cè)到target是jsPlumb對(duì)象是需要直接從drop方法中退出以執(zhí)行對(duì)應(yīng)的jsPlumb的drop邏輯。

好了，一個(gè)繪制流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼托管服務(wù)上了，大家有興趣可以去試試。

給大家看一張喜歡的圖片，緩解下心情，最近敲敲代碼累的時(shí)候都會(huì)看看這幾個(gè)小活寶，每次都忍不住伸手去摸一下屏幕，可愛(ài)到爆，不由自主的就笑了出來(lái)。這個(gè)是電影《鼠來(lái)寶》系列的海報(bào)圖。不知道有沒(méi)有人喜歡這幾只會(huì)唱歌的小活寶。

這幾天看了一下之前整理的html和css的知識(shí)點(diǎn)，發(fā)現(xiàn)很多東西都有點(diǎn)忘了，趁此機(jī)會(huì)，復(fù)習(xí)了一下，也重新整理了一下，決定放出來(lái)，也給剛?cè)腴T(mén)的孩紙們一個(gè)參考，之前有簡(jiǎn)友說(shuō)圖片看不清，電腦的話可以點(diǎn)擊放大，或者另存為，放大還是挺清楚的，手機(jī)app也可以下載圖片或者放大，其實(shí)可以下載下來(lái)，地鐵上或者等人的時(shí)候，拿出手機(jī)看一看，感覺(jué)還可以。

圖片比較大，建議大家看的時(shí)候先看下分支，然后點(diǎn)擊放大查看具體，如果有Xmind軟件的小伙伴也可以私聊我要文件

第一張 HTML基本結(jié)構(gòu)與css選擇器

主要介紹html的基本結(jié)構(gòu)和css選擇器，話不多說(shuō)，都在圖里。

基本概括.png

第二張 html常用基本標(biāo)簽

html基本標(biāo)簽

已分類(lèi)，需要注意的部分已標(biāo)注。看完這一張，還有下一張。

HTML標(biāo)簽.png

第三張 CSS的常用屬性

主要介紹css的屬性

css屬性.png

第四張表格和表單

表格和表單.png

第五張浮動(dòng)、定位、overflow

浮動(dòng)、定位、overflow.png

第六張補(bǔ)充小知識(shí)

小知識(shí).png

最后給大家給大家詳細(xì)說(shuō)一下border-radius的用法

普通用法不做詳細(xì)介紹；

其實(shí)我們?cè)O(shè)置border-radius參數(shù)的時(shí)候，最多可以設(shè)置8個(gè)參數(shù)，每個(gè)參數(shù)的位置和代指圓角方向已經(jīng)在圖上表明；簡(jiǎn)單明了。

示意圖.jpg

下面放一張我主要用 border-radius 畫(huà)的一個(gè)小企鵝（命名比較low，可以忽略。）

最后的效果圖

QQ小企鵝.PNG

html標(biāo)簽部分

<div class="qie">
 <!-- 頭部 -->
 <div class="tou">
 <div class="eye_1">
 <div class="eye_1_1"></div>
 </div>
 <div class="eye_2">
 <div class="eye_2_1"></div>
 <div class="eye_2_2"></div>
 </div>
 <div class="zui"></div>
 <div class="tou_2"></div>
 </div>
 <!-- 圍巾 -->
 <div class="weijin">
 <div class="weijin_left"></div>
 <div class="weijin_content"></div>
 <div class="weijin_right"></div>
 <div class="weijin_bottom"></div>
 <div class="weijin_1"></div>
 </div>
 <!-- 身體 -->
 <div class="body">
 <div class="duzi"></div>
 <div class="hand"></div>
 <div class="hand_2"></div> 
 </div>
 <!-- 腳 -->
 <div class="footer"></div>
 </div>

css樣式部分

 .qie{
 margin-left: auto;
 margin-right: auto;
 width: 200px;
 }
 .tou{
 height: 80px;
 width: 120px;
 background-color: #000;
 border-radius: 60px 60px 0px 0px;
 position: relative;
 }
 .eye_1,.eye_2{
 width: 20px;
 height: 30px;
 background-color: #fff;
 border-radius: 10px 10px 10px 10px/15px 15px 15px 15px;
 }
 .eye_1{
 position: absolute;
 left: 35px;
 top: 25px 
 }
 .eye_2{
 position: absolute;
 right:35px;
 top: 25px; 
 }
 .eye_1_1{
 height: 13px;
 width: 10px;
 background-color: #000;
 border-radius: 5px 5px 5px 5px/6px 6px 6px 6px;
 position: absolute;
 left: 9px;
 top:10px;
 }
 .eye_2_1{
 height: 6px;
 width: 15px;
 background-color: #000;
 border-radius: 7px 7px 0px 0px/6px 6px 0px 0px;
 position: absolute;
 left: 2px;
 top: 12px;
 }
 .eye_2_2{
 width: 13px;
 height: 6px;
 background-color: #fff;
 border-radius: 6px 6px 0px 0px/6px 6px 0px 0px;
 position: absolute;
 left: 3px;
 top: 14px;
 }
 .zui{
 height: 20px;
 width: 72px;
 background-color: #ffad00;
 border-radius: 36px 36px 36px 36px/8px 8px 12px 12px;
 position: absolute;
 left: 23px;
 top: 58px;
 }
 .tou_2{
 height: 10px;
 width: 120px;
 background-color: #000;
 position: absolute;
 top: 80px;
 border-radius: 0 0 62px 62px/ 0 0 10px 10px;
 z-index: 3;
 }
 .weijin{
 position: relative;
 z-index: 2;
 }
 .weijin_left{
 height: 0px;
 width: 0px;
 border-style: solid;
 border-width: 10px 5px;
 border-color: transparent #e91f1f #e91f1f transparent ;
 position: absolute;
 left: -9px;
 }
 .weijin_content{
 height: 20px;
 width: 120px;
 background-color: #e91f1f;
 }
 .weijin_right{
 height: 0px;
 width: 0px;
 border-style: solid;
 border-width: 10px 5px;
 border-color: transparent transparent #e91f1f #e91f1f ;
 position: absolute;
 left: 120px;
 bottom:0px;
 }
 .weijin_bottom{
 height: 10px;
 width: 140px;
 background-color: #e91f1f;
 border-radius: 0 0 70px 70px/0 0 10px 10px;
 position: absolute;
 left: -10px
 }
 .weijin_1{
 height: 30px;
 width: 24px;
 background-color: #e91f1f;
 position: absolute;
 left: 20px;
 }
 .body{
 height: 85px;
 width: 120px;
 background-color: #000;
 border-radius: 0 0 60px 60px/0 0 50px 50px;
 position: relative;
 z-index: 1
 }
 .duzi{
 height: 78px;
 width: 90px;
 background-color: #fff;
 border-radius: 0 0 45px 45px/0 0 45px 45px;
 position: absolute;
 left: 15px;
 }
 .hand{
 height: 54px;
 width: 20px;
 background-color:#000;
 z-index: 4px;
 position: absolute;
 left: -18px;
 top: -4px;
 border-radius: 18px 0px 18px 2px/52px 0px 28px 2px ;
 }
 .hand_2{
 height: 54px;
 width: 20px;
 background-color:#000;
 z-index: 4px;
 position: absolute;
 right: -18px;
 top: -4px;
 border-radius:0px 18px 2px 18px / 0px 52px 2px 28px 
 } 
 .footer{
 height: 16px;
 width: 120px;
 background-color: #fcb117;
 border-radius: 40px 40px 3px 3px/13px 13px 2px 2px;
 position: relative;
 bottom: 16px;
 }

如果看的不舒服，合在一起給你看

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 .qie{
 margin-left: auto;
 margin-right: auto;
 width: 200px;
 }
 .tou{
 height: 80px;
 width: 120px;
 background-color: #000;
 border-radius: 60px 60px 0px 0px;
 position: relative;
 }
 .eye_1,.eye_2{
 width: 20px;
 height: 30px;
 background-color: #fff;
 border-radius: 10px 10px 10px 10px/15px 15px 15px 15px;
 }
 .eye_1{
 position: absolute;
 left: 35px;
 top: 25px 
 }
 .eye_2{
 position: absolute;
 right:35px;
 top: 25px; 
 }
 .eye_1_1{
 height: 13px;
 width: 10px;
 background-color: #000;
 border-radius: 5px 5px 5px 5px/6px 6px 6px 6px;
 position: absolute;
 left: 9px;
 top:10px;
 }
 .eye_2_1{
 height: 6px;
 width: 15px;
 background-color: #000;
 border-radius: 7px 7px 0px 0px/6px 6px 0px 0px;
 position: absolute;
 left: 2px;
 top: 12px;
 }
 .eye_2_2{
 width: 13px;
 height: 6px;
 background-color: #fff;
 border-radius: 6px 6px 0px 0px/6px 6px 0px 0px;
 position: absolute;
 left: 3px;
 top: 14px;
 }
 .zui{
 height: 20px;
 width: 72px;
 background-color: #ffad00;
 border-radius: 36px 36px 36px 36px/8px 8px 12px 12px;
 position: absolute;
 left: 23px;
 top: 58px;
 }
 .tou_2{
 height: 10px;
 width: 120px;
 background-color: #000;
 position: absolute;
 top: 80px;
 border-radius: 0 0 62px 62px/ 0 0 10px 10px;
 z-index: 3;
 }
 .weijin{
 position: relative;
 z-index: 2;
 }
 .weijin_left{
 height: 0px;
 width: 0px;
 border-style: solid;
 border-width: 10px 5px;
 border-color: transparent #e91f1f #e91f1f transparent ;
 position: absolute;
 left: -9px;
 }
 .weijin_content{
 height: 20px;
 width: 120px;
 background-color: #e91f1f;
 }
 .weijin_right{
 height: 0px;
 width: 0px;
 border-style: solid;
 border-width: 10px 5px;
 border-color: transparent transparent #e91f1f #e91f1f ;
 position: absolute;
 left: 120px;
 bottom:0px;
 }
 .weijin_bottom{
 height: 10px;
 width: 140px;
 background-color: #e91f1f;
 border-radius: 0 0 70px 70px/0 0 10px 10px;
 position: absolute;
 left: -10px
 }
 .weijin_1{
 height: 30px;
 width: 24px;
 background-color: #e91f1f;
 position: absolute;
 left: 20px;
 }
 .body{
 height: 85px;
 width: 120px;
 background-color: #000;
 border-radius: 0 0 60px 60px/0 0 50px 50px;
 position: relative;
 z-index: 1
 }
 .duzi{
 height: 78px;
 width: 90px;
 background-color: #fff;
 border-radius: 0 0 45px 45px/0 0 45px 45px;
 position: absolute;
 left: 15px;
 }
 .hand{
 height: 54px;
 width: 20px;
 background-color:#000;
 z-index: 4px;
 position: absolute;
 left: -18px;
 top: -4px;
 border-radius: 18px 0px 18px 2px/52px 0px 28px 2px ;
 }
 .hand_2{
 height: 54px;
 width: 20px;
 background-color:#000;
 z-index: 4px;
 position: absolute;
 right: -18px;
 top: -4px;
 border-radius:0px 18px 2px 18px / 0px 52px 2px 28px 
 } 
 .footer{
 height: 16px;
 width: 120px;
 background-color: #fcb117;
 border-radius: 40px 40px 3px 3px/13px 13px 2px 2px;
 position: relative;
 bottom: 16px;
 }
 </style>
</head>
<body>
 <div class="qie">
 <!-- 頭部 -->
 <div class="tou">
 <div class="eye_1">
 <div class="eye_1_1"></div>
 </div>
 <div class="eye_2">
 <div class="eye_2_1"></div>
 <div class="eye_2_2"></div>
 </div>
 <div class="zui"></div>
 <div class="tou_2"></div>
 </div>
 <!-- 圍巾 -->
 <div class="weijin">
 <div class="weijin_left"></div>
 <div class="weijin_content"></div>
 <div class="weijin_right"></div>
 <div class="weijin_bottom"></div>
 <div class="weijin_1"></div>
 </div>
 <!-- 身體 -->
 <div class="body">
 <div class="duzi"></div>
 <div class="hand"></div>
 <div class="hand_2"></div> 
 </div>
 <!-- 腳 -->
 <div class="footer"></div>
 </div>
</body>
</html>

字少，圖多，還請(qǐng)想學(xué)習(xí)的菜鳥(niǎo)耐心點(diǎn)，嘿嘿。

在線咨詢

上一篇：JavaScript 面試?yán)讌^(qū)之預(yù)解析
下一篇：睿哲信息：Sitecore網(wǎng)站表現(xiàn)不佳？會(huì)不會(huì)是因?yàn)?/a>

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

（ 干貨分享 ） 11張思維導(dǎo)圖詳解JavaScri

工具選擇

構(gòu)建靜態(tài)應(yīng)用

交互式創(chuàng)建節(jié)點(diǎn)

您的項(xiàng)目需求

（干貨分享） 11張思維導(dǎo)圖詳解JavaScri