前端——“一看就會的”菜鳥教程首頁製作！
阿新 • • 發佈：2018-12-12
之前在複習網頁製作，仿照菜鳥教程的首頁寫了一個仿菜鳥首頁。效果如下：
製作網頁之前先佈局。原網頁如下：
分析該網站的佈局，我們可以發現，菜鳥教程的首頁主要有四個模組，分別是頂端，頂端導航， 左邊選單，右邊選單內容。
先在原網站檢視原始碼，找到相應模組的引數，根據這些引數來設定自己的模組，這樣就可以增加自己網頁與原網頁的相似度。
1、頂端LOGO和搜尋框
頂端LOGO和文字框的製作都很簡單，文字框的搜尋功能的實現在另一篇部落格中有詳細介紹，這裡就不多加贅述。
2、導航條
其次需要製作的就是導航條。菜鳥教程首頁的導航條的下方是帶小三角形的。我製作的沒有加上。這個製作方法並不困難，說白了就是給div設定一個帶小三角形的背景圖片，等滑鼠滑動到相應的div就會顯現出來。
原網站：
我做的：
3、左邊選單
左邊選單為一個大的div，該div又被分割成了數個小的div，每個div中都寫上相應的名字，名字前面再加一個img，img的引數可以參照原網頁的引數來設定，如果原網頁設定的引數和自己網頁的引數有出入，則自己看著調整一下就可以。選單中的邊框可以用border來設定。字型的引數參照原網頁引數。這種選單都很簡單，只要做出一個小div，剩餘的div按照模式來就可以大量製作。
原網站圖： 效果圖：
4、右邊選單內容
右邊選單欄是一個大的div，該div的邊框可以通過border屬性來設定。每一個內容塊的標題（如HTML/CSS）也是一個div，頁面中的下劃線也是通過border來實現。
注：需要設定選單欄div的padding，這樣會留白，使得標題的下劃線才不會直接頂到邊框，
原網頁：
我製作的：
我製作的這個網頁只是簡易的網頁，如果想做成和菜鳥首頁完全一樣的，則可以在原網頁中找到對應的引數，為文字、圖片、以及div等新增超連結，以此實現點選進入對應頁面的功能。
這裡貼一下我寫的這個仿菜鳥首頁的原始碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html";charset="utf-8"/>
<title><菜鳥教程首頁></title>
<link href="div.css" rel="stylesheet" type="text/css"/>
</head>
<body style="background-color:#fbfbfb">
<!--頭部-->
<div class="div_top">
<!--LOGO-->
<div class="div_top div_logo "style="width:80%" >
<div ><img height="100" width="380"src="images/logo.png"style="float:left" alt="LOGO">
</div>
<!--搜尋框-->
<div class="div_top div_text" >
<form action="http://www.baidu.com/s" method="get"id="submit">
<input id="usename" name="wd" placeholder="搜尋......" type="text" style="width:380px;height:35px; border:3px #f1f1f1 solid; ">
</div>
</form>
</div>
<!--頂部導航-->
<div class="div_topnav">
<div class="div_navmenu "style="margin-left:15%;"><font color="#FFF">首頁</font></div>
<div class="div_navmenu"><font color="#FFF">菜鳥筆記</font></div>
<div class="div_navmenu "><font color="#FFF">菜鳥工具</font></div>
<div class="div_navmenu "><font color="#FFF">參考手冊</font></div>
<div class="div_navmenu "><font color="#FFF">使用者筆記</font></div>
<div class="div_navmenu "><font color="#FFF">測驗/考試</font></div>
<div class="div_navmenu "><font color="#FFF">設計神器</font></div>
<div class="div_navmenu "><font color="#FFF">本地書籤</font></div>
<div class="div_navmenu "><font color="#FFF">登入</font></div>
</div>
<div class="div_whole">
<!--左側選單-->
<div class="div_menu">
<div class="div_tab0 " style="line-height:4px;"><img height="20"width="20" src="images/logo2.png"style="margin-top:-1px;"alt="logo2">全部教程</div>
<div class="div_menu1"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3 ">HTML/CSS</div>
<div class="div_tab"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">JavaScript</div>
<div class="div_menu1" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">服務端</div>
<div class="div_tab" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">資料庫</div>
<div class="div_menu1" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">移動端</div>
<div class="div_tab"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">XML教程</div>
<div class="div_menu1"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">ASP.NET</div>
<div class="div_tab" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">Web Service</div>
<div class="div_menu1" ><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">開發工具</div>
<div class="div_tab"><img height="20"width="20" src="images/logo3.png"style="float:left;margin-top:5px"alt="logo3">網站建設</div>
</div>
<!--主題內容-->
<div class=" div_whole div_list ">
<div class="div_block">
<div class="div_head1"><img height="20"width="20" src="images/logo4.png"style="float:left;margin-top:5px"alt="logo3 "><font size="5px">HTML/CSS</font></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習HTML】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,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"style="float:left">
<small style="color:#666;">HTML，即超文字標記語言（Hyper Text Markup Language）</small></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習HTML】</h2>
<img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA9dJREFUWIXFl09sVFUUh79738y8mY7WN1RQakDCVNpp1TQtiE2LQTYNxCYQF0QXbkQWshEiLly4wMTEYMLGGI11YYxxg5ooihsXplSkkLak1JamkLjQCq3tzOh05s303evidTotTOe94iC/1cvc3znnm3PufX8Ei0ofTuxXSh0VgnaQUe6ClMIW6IsaTsU+Gf8KQAAkDzW+K4R8424UXU1a6/es3vHjIn04sV9rvv4/ixclBAekUurovSgOoLQ6Jt2Z3ysCuT3gZ8MJ6yECHc/jjP6EqG8mGG9BhEIUro9h1D2Mff4M5s5u8lcvE9iSwD7zAdLwri8kEekHVERrCXe/hHnwLcTW7WRHBjESXWSGhwm0dRN97UPMvYfQdVsJPPEs2TkH5fjJDL4AAFR6jtzQOQCyg+dRuXnyV4cByHz7GdlzZwEw6jcTe/MjbNb5ghCpVxLa0xUMkzc3UbjxJ7LWwrnxO4Et2yhMjhJqeJz89TECGx5BOwsY6zcCUJi8glA2kZhRcRyeAIGmpzEeawcNhaxGK+9/VZR9ZYDC2IWKEAGvJPLRZsyeIwCY/msDoHrfwR65QHbOWRXCcw/o9F9rLFuSk3Rj1QKrbkzPDiwHsEcGUMnpin65bgNmyw63cKoUW4S4tRPeAH+XkmS+/5xs/w8V/ZFnnisBJGdWrJWD8ARQyzogrQcBCD+1h+CmeFl/qLF16bo4gkoQ/kagNQiBYdW5AG27iO570YPcQaWT5ZeWQXgCoBz0fAoRtZCLAPN93+FM/1HWHunaSzDegpOao9KZLUJ4A+B2QUQtjAdcgPzoJfKjl8p6Q83tBOMtt81/NQhfACo9g9wYJ9jYSuzYybKef778mMJvE8jYejfGBwD4BNDp2aXrzNkvCG5uwDry9gpP5ptPAZb2iZOaxY/8ASweRRmJkh8bxJmeQufmEeEadz2bwZm96XoWx1TlDrjJRDiCCNfgzEwx9cIOQs1toCE/Noh2FpD31SKCIaD8EbxjgOX3AuvVE+QGfsS+/DP2yAAA8n6LcGsnkZ17SjHV7UAJoGZ3DzW7e0A55CdHQQhC8WZufdJUFUAlb97+ozQIbXtyFWKNM1v5mVGUvxcSIC/rMJo6Cbd1YbZ2ImtjKyFTs+SG+rGH+sgN9fvugG8AgFxaUZjXICShhhbMtl2gFLmhPgrXfnVv2WuUmHs5kZPS/7vGEkSVJAX64loCwrWSYI2oSnEjSFJqOLXWwGpBBIK8v/hx2nRSCPH6WhP8l3FIk1/qT090SACrd/y4EBzQqD6tyPpNciedkAGSZkScqD890QHwL8sTnqjY5DriAAAAAElFTkSuQmCC"style="float:left;">
<small style="color:#666;">HTML5 是下一代 HTML 標準</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習CSS】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,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"style="float:left;">
<small style="color:#666;">層疊樣式表（Cascading StyleSheet）</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習CSS3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6ZJREFUWIXFlktsG1UYhb+58dgTj13bpG4TJ6WqQitSUEsQNCIg8ZCQUNmhKpuyqVggsUJiwwIR2ICABbBFiO4QLUJFVUHdQhseAZKWAg5phUjdxE4auzZ+j8d3WLg2E8WPSeOEs5rR/Pec8z/unasAHD45G9QMdVJaTAghImwtEhacLqvlycsnRtPK4ZOzQa3imQIObrHwGkhJ1PCUx4VmqJPbLQ4gBCPuiucNIS0mtlu8YQI54XLac7VH4fOJYQC+ms8wGy/w2uMDALx9Ic7ogJdn7gkA8Nxn15CWIwsDwqlbBej3qbw3leDr+TSxjIFQIJYxiN4sMXezRNjr4vzVjEPx2xach9bw/KE+xu/2sVN3UahIHh7UGQlr7PapZA3J8UN9CMU5n8tpoCktXj4fAyCRrZAumXzwwwoA88kyK3mThYwBgLWBCihjH/3RMrzP62KX7thjUyznTFJFs+X3tuxP7fPzynj/pgy8czHBmeitlt/bzkCyUN2UeI2jdfadDbQpnWMDHTjatsDeu5l4gU9mVhvvFrXRsQ9c/fHVxwbYG3Sv49iwAXv53D0KPy/l25LVodi2YacWtDVQqEhKpkRzCYbv8vD6ExGEAgoK0rL45u8s3y5kGwePVxUc3R9gt64CkDMkRrX9nuy4x1LFKhG/oNdVI18tmHwZvcWZuXQju70BN8fuC/HsgSBeVdjWdp6hjgaSBZOIv5bRuxcTnP0zjWk7ax/o93JkUCdnSE79lsLv6eHYwVBj7eYN2LKYTRTWiANcShS4lCg03g/0aQ0DXalAypbF0f0BlrKVpnHXUiWuLBcJ9fb8Z74bFbBn8eQ+Pyt5k36f2mhLHR/PrHJluUhQc9nWdj7IOv4NkzaSc/MZXjq3wKe/JtfF5cq1uJBmq0C3hrCOOvn0Yp6zc2nG9ugATC3k+D6WAyC4lS0I9dbCr2cM3roQbxq/tgVd3gVPD+9gzw4338VyTF3PMbdaxLLg3rDG2JCPR4Z07t/V23TtnRuwlVEBRsIaI2GNFx7cSbpU63vQ1vc6LJwNYUcDRtUib0h09/p5bSZcxz+lKlUHl0NH153jX/zFkSGdsUGdhyI6gRbC6VKVnxbzTC/mmb7h8MfV7krWDEKpnXY1Qz6kZTG9mOfHG3muJktsiOy2gTiwuXvXHUJKuSQsOP1/iAMIoZwSZbU8KSXRbVeX/G5a2pvi8onRtOEpj0v4EGTz06WbulIugfW+qXge/eXF4cy/C7eVCw87IhIAAAAASUVORK5CYII="style="float:left;">
<small style="color:#666;">CSS3是CSS技術的升級版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Bootstrap3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA3VJREFUWIXtlktsG0UYx3+7a3v9JnUoJQ8U4pI0dR/QQtNEalFDhEC0BfGSQK3EBVXihARCuSBACEEOCIR6Qz2hIsEFCQ7kUhRe5VBUWlJaJW15hDQkTeJsHNu763g9w8EQMLHdxUnlS//Sandn5vvvT9/MfLPKof43JXWUWs+P3wC4AVAVoL2zids7bkXTyg/R/d6q726lbY/3v1auY/DYs8Q3NZFJW3Rtu431TQ0IIbnvwA6srM3A4FNM/DpLb18CieTFN55kdnqB7bviBIM6PX0JsmmL3r4EN8VCTE3MlwXwVCITBUnKyNIW30DjLVE2tMRIXk0xOvI7PfsS2OYSwZDOxq5mZqYMbHOJjkQrU1fm2Xp3O02tMZAQaQjQs28zP3x36f9lQPf7MObSnDxxAZ/uYWxkglNfj7Kxq5nhz8/iOAXSKQukZPTcBEIIJn+b45exP/DpXpIzKdIpi233xDnx2Wkmx+fKAijXsxIGQzqhSIDZ6YWKYypOwX/V//Cd7Nh9BygKAAoKKIAE28ozPTnPV0M/MjOVWo4xsznMbK6qr2uAlrZG7trdWXXMg4/t4q2B41w+f9WtrXuAf+vTj79cftY0jebWm9nZsxnd7+PISwd5/tB76N7Q9QN4/91PVrS98Mph+h/qprl1Pf6IQnYhRdAfpThPlbVmldBILgIghcQybXKOScYykFJUjaspA/HOFhQUFFVB01TaO1rY//heAL754gyWWVx4+UKOtJkkHIihqtraARz9YKBs+9j5cY4OflTSVpAOaWuOkD+GR1tZrtf0MNq0pY1nnjuIopTOu5CCjJUk79grYmrKwOH9L/9j4NVYF4vy6NN93Hv/Tg48sZeR05c4OXy2JEYiydgGQT1askNqyoCRXFy+ZqcNLl4Y553Xj7OUywPQvWdLxVgzt4iVS68OoJw8Xg1VLdr9fa8kO5/BtFOArG0KuvdsBYo7XNVUQuEADzzSi8dbXOnnzly+pkfOMZG2qA3g1bePVOz7+eIVhoe+d+Wz5NjuAYSUCFFaVKQEIQROvsCCkebUtz/x4bEh8nnHra3741iIAhlrnoJ0b+5GrhehqmpEgo14Nb0+AACKohIOrMPnCdQH4C8MQv4G/L5wvQCKCvgihPwNxT+jegAA+DwBwoEYyipsVl0JPZqPaLARVSl/3F5LfwK/oDDJxNRfbAAAAABJRU5ErkJggg=="style="float:left;">
<small style="color:#666;">Bootstrap，來自 Twitter，是目前最受歡迎的前端框架</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Bootstrap4】</h2><img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAIAAABuYg/PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REVCRDg5NzlCNjI4MTFFN0EyRkNBODVFRjEyMTIzRjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REVCRDg5N0FCNjI4MTFFN0EyRkNBODVFRjEyMTIzRjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERUJEODk3N0I2MjgxMUU3QTJGQ0E4NUVGMTIxMjNGNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERUJEODk3OEI2MjgxMUU3QTJGQ0E4NUVGMTIxMjNGNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjRUavEAAAW3SURBVHjahFdbaBxVGD5n5szsLZvLZmOzSXMxkSC0DxUrvhTsSxCNPvjgi+2TiMUX+6CCUinog9A+SsXbS0HfbKWgRcEapCL1giDVYosSU0OatUk2t73N7sz8/mdu57KbdFhmZ87tv33f//9DX5u9CAQvAALBnT/jvzRIwqnoAeRBaSOI9fpGiB6YeugekpTjFPH3kCRembwoMEyRRJJDkxuJtUokiZVdPSTcwJS5DknRUl0JsT85lXR4COLHRATrHicKvg+e68diuvlHKAHxfqCUGIziXYiSxLOucWo1XTvD8gMZCK4uQUo8K49T/l/bcRo1x04xom4hYcx0SU67fyibzdtO0+UzVD8U9fb5ybrP0Q+U0OJwvl61Kv/tsJQpBYg/sUhQsAfNd5pcUs9Aury46TTaxFAOBREO0AASssL3fTvNShMDuG2tvG2lzWRxaJnQDpemMgxtQkmu66WyDAB255MEk2gKLTNdz1teXB8e68vkrFbLNQyS6MdksLqu39efcZw22mRnQ6O5vyiFrUrDa3syqREI6Zxlp0wfIKYN/zOZ0Wy06rVWKmvhA0VpsfcU6KMb+HqfUCPxFY6BBzA2XWC2ISMbDyrf3lhd2RweHzAM6vM4xkAxKA+hDyFEE8cwOYahwABVkIy4ba/ZaL/67tzUwX1Eve78U7nwwbXvLv1RHMlTqjE1SQjCz0yjM79RAjJ7Aot7B7P4On/h92bDRRNRg5HJgUNH7n/5zJznevOXro9MFhJUJ/vUREPimMXEkVeBZJ9p8kCfe+PrjdVqT38Ko9uoOs+cePTkmaeOv3L02pVbLYcrQcR2AAHgaMSQcprIbzJqQph4HoaTjE4VxmcGR6cHJx8cGpspXv3iBgZmaKQXuYXslJyvZ9FwyojPEwKSigCJOHRtEJNGADOn0UKzlhfW+os5hAbyaWWpgvQSSSxOY6ByhqkZT46WTOQIVJZtItYN0wDqP3x0+oU3ZxE7505d9j3gWAWQ9CadRYCBzs0YkqBgaXujXizl37/yogbIsyc///KTnw8dmeIQ9ndRNPYWU4AQ6UWljBejlnGA/HV9BbGHluEdyfTAgdKJ04+jEhc//qE0UdCKbRwRIldqoT5IeU91AvT0pfH91LFPN9aqud4UMhaZPjkz9Pb5Y8+/Pntncf2n+Vv3jfYl6yVpwpOGjL09SrAf5IfCcA/HXik/tL8Ps9+v3//93unLOD53/JFWq+2HCUihs6I60worqItAoJ9fiD0a/HCMmkZvIbtVqeF4rjedQjSiQiYVdRU0mCS5ERSnab0Cp0hA6vJSBUmd4y4FrJDIrSefO4zjC3+W61VnsJTXFFW1J6yzt5E5Hl0E3JaL77PPPlTfaWIRx44BifXY0wcPHJ7AEvjZh1f7ilmJxnqNjqEPSvqSUpSolDxgAalfeusJDfo3frn90TtfIakxN/KeJepFhNZymJgWw7BXkehJmGVke+zzZ79FEBoYkjgoWPbK/27c/G3J87zRyYLr+Sr2lKwUHUW6dE40KEWRddSkFjN//OamE2e/MJ2gWljWewsZTCuuK0viFZ/rbUg9IHRkECy+2BsNDufttIn6GkhkiAwtDOc7ms7owfd9EBkVJXlYrDNZu7K6jeiVSoqoZyRseJo1p1G1SpMDywvrDi/qZM9uNX6IKxkKRkn7p4oIzlq1aWFDB6C2clLHgtPrd6sYmH3j/Qju6BR6j08NGWKZnF2vNVfLW+jeOJNEBjEJ5dGgZRtr5a10zk5nrcBDndQh6kdN3AnySJD1u9v1apOhpI7WliV8kuesNENibTZbmtYKZ6GDSUHPg4hVvae1BaB+sAT6YrRY1IVB6MdgAxXygMpTJOz6RGeuSQrTFXT51AGiuFa3TP1y0ZsqASKiFFJQ65nUhZGuSsiFcRdYdvsEiZwHTFNNkijXbqndA60eKZJIN0nJaf8LMABlrhVsnvvxsgAAAABJRU5ErkJggg=="style="float:left;">
<small style="color:#666;">Bootstrap4 目前是 Bootstrap 的最新版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Font Awesome】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAYAAAA3WXuFAAADLklEQVR42s2Yu0srQRjFN1F8gaiYQhAVREJULAQljaWdgoW1kCqChX+BYCGxiOADwUoLNSqW2uifoFYWVmKCsQi+wEQQxMcc98x1w+46m2Tv9a4uHJLszu7+5sw3830T7fT0VPT19Yny8nLh8/k8l9/vF42NjWJqakrc398LbWhoSFRUVPAiKL2BpzLeW1lZibW1NWjV1dUGrecwZih+hkIhaLTsp4EMlZWV/QH6lMVCs7wcOk2nyjtEdXZ2YnFxEYlEAsPDw6itrfUESgkUCASgzzq8vLzg/f0duVwOIyMj0OPM8QHf5ibvJZB5yOjI9fW1hBFCSM3OzqK5ufkLBH8TlJ3Qpy2qqqosbUp1JN/e55eyBHVHRwdSqRTe3t4kFD8jkUh+2Iw2k5OTODg4wM3NDV5fX6X4/fDwEBMTE2hra1M6Z/7NAGZH2FlHIGpsbAyZTEYCLS8vo6WlRd48ODiI3d1d3N3dWRy0i524vLxEPB5HMBj8AkZXe3t7sbCwgKurK2xsbDgPGdXV1YVkMikfHo1GpSPr6+synpwgnMDoGp3ky+fm5rCzs4OzszMZo2zz9PSE7e3tr0FdCGh6ehrpdNoVjEp01Sw7kKGiDq2srOD29hY83EIUu0fpUKlA/+qQKyBz6ijkkP34TqD8kBWLIQIxOP+3QwWBLi4uZOB5CqRah34N0G8I6vzCaE6uvMBsb3dIBfTdQV1wYSwFSAXodva5Durx8XElENMCzx0fH2Nvbw/7+/s4OTmR53itVKBsNotYLGapDpQxpHKIL2JiZY9YI7HssJcbPDc6OiohHx8fHVMIn8XrzG3M+ObkWzSoWQ8dHR1hZmYG7e3tBYszQ6yNBgYGsLW1hYeHh3w58/z8jPPzc8zPz6O/v99S4Je8DjU0NKgLqhKLL97Pl4fDYbS2tioLPVdBXVdX99flqasS11iH7NPeGDIDqL6+3pttUKECzeyQV0CO2Z4ArPA4mzju3OJ66pB9yCxTUNM83+9rugO/ayvd3d0tPoftx2F6enqgra6uipqamh/7O8YQF9PNzU1o+h5M6Nsc0dTUpFw5vRAn0tLSklzJPwCn+oCzFPMzYgAAAABJRU5ErkJggg=="style="float:left;">
<small style="color:#666;">Font Awesome 是一套絕佳的圖示字型庫和CSS框架。</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Foundation】</h2><img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,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"style="float:left;">
<small style="color:#666;">Foundation 用於開發響應式的 HTML, CSS and JavaScript 框架</small>
</div>
</div>
<div class="div_block">
<div class="div_head1"><img height="20"width="20" src="images/logo4.png"style="float:left;margin-top:5px"alt="logo3 "><font size="5px">HTML/CSS</font></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習HTML】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,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"style="float:left">
<small style="color:#666;">HTML，即超文字標記語言（Hyper Text Markup Language）</small></div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習HTML】</h2>
<img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA9dJREFUWIXFl09sVFUUh79738y8mY7WN1RQakDCVNpp1TQtiE2LQTYNxCYQF0QXbkQWshEiLly4wMTEYMLGGI11YYxxg5ooihsXplSkkLak1JamkLjQCq3tzOh05s303evidTotTOe94iC/1cvc3znnm3PufX8Ei0ofTuxXSh0VgnaQUe6ClMIW6IsaTsU+Gf8KQAAkDzW+K4R8424UXU1a6/es3vHjIn04sV9rvv4/ixclBAekUurovSgOoLQ6Jt2Z3ysCuT3gZ8MJ6yECHc/jjP6EqG8mGG9BhEIUro9h1D2Mff4M5s5u8lcvE9iSwD7zAdLwri8kEekHVERrCXe/hHnwLcTW7WRHBjESXWSGhwm0dRN97UPMvYfQdVsJPPEs2TkH5fjJDL4AAFR6jtzQOQCyg+dRuXnyV4cByHz7GdlzZwEw6jcTe/MjbNb5ghCpVxLa0xUMkzc3UbjxJ7LWwrnxO4Et2yhMjhJqeJz89TECGx5BOwsY6zcCUJi8glA2kZhRcRyeAIGmpzEeawcNhaxGK+9/VZR9ZYDC2IWKEAGvJPLRZsyeIwCY/msDoHrfwR65QHbOWRXCcw/o9F9rLFuSk3Rj1QKrbkzPDiwHsEcGUMnpin65bgNmyw63cKoUW4S4tRPeAH+XkmS+/5xs/w8V/ZFnnisBJGdWrJWD8ARQyzogrQcBCD+1h+CmeFl/qLF16bo4gkoQ/kagNQiBYdW5AG27iO570YPcQaWT5ZeWQXgCoBz0fAoRtZCLAPN93+FM/1HWHunaSzDegpOao9KZLUJ4A+B2QUQtjAdcgPzoJfKjl8p6Q83tBOMtt81/NQhfACo9g9wYJ9jYSuzYybKef778mMJvE8jYejfGBwD4BNDp2aXrzNkvCG5uwDry9gpP5ptPAZb2iZOaxY/8ASweRRmJkh8bxJmeQufmEeEadz2bwZm96XoWx1TlDrjJRDiCCNfgzEwx9cIOQs1toCE/Noh2FpD31SKCIaD8EbxjgOX3AuvVE+QGfsS+/DP2yAAA8n6LcGsnkZ17SjHV7UAJoGZ3DzW7e0A55CdHQQhC8WZufdJUFUAlb97+ozQIbXtyFWKNM1v5mVGUvxcSIC/rMJo6Cbd1YbZ2ImtjKyFTs+SG+rGH+sgN9fvugG8AgFxaUZjXICShhhbMtl2gFLmhPgrXfnVv2WuUmHs5kZPS/7vGEkSVJAX64loCwrWSYI2oSnEjSFJqOLXWwGpBBIK8v/hx2nRSCPH6WhP8l3FIk1/qT090SACrd/y4EBzQqD6tyPpNciedkAGSZkScqD890QHwL8sTnqjY5DriAAAAAElFTkSuQmCC"style="float:left;">
<small style="color:#666;">HTML5 是下一代 HTML 標準</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習CSS】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,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"style="float:left;">
<small style="color:#666;">層疊樣式表（Cascading StyleSheet）</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習CSS3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6ZJREFUWIXFlktsG1UYhb+58dgTj13bpG4TJ6WqQitSUEsQNCIg8ZCQUNmhKpuyqVggsUJiwwIR2ICABbBFiO4QLUJFVUHdQhseAZKWAg5phUjdxE4auzZ+j8d3WLg2E8WPSeOEs5rR/Pec8z/unasAHD45G9QMdVJaTAghImwtEhacLqvlycsnRtPK4ZOzQa3imQIObrHwGkhJ1PCUx4VmqJPbLQ4gBCPuiucNIS0mtlu8YQI54XLac7VH4fOJYQC+ms8wGy/w2uMDALx9Ic7ogJdn7gkA8Nxn15CWIwsDwqlbBej3qbw3leDr+TSxjIFQIJYxiN4sMXezRNjr4vzVjEPx2xach9bw/KE+xu/2sVN3UahIHh7UGQlr7PapZA3J8UN9CMU5n8tpoCktXj4fAyCRrZAumXzwwwoA88kyK3mThYwBgLWBCihjH/3RMrzP62KX7thjUyznTFJFs+X3tuxP7fPzynj/pgy8czHBmeitlt/bzkCyUN2UeI2jdfadDbQpnWMDHTjatsDeu5l4gU9mVhvvFrXRsQ9c/fHVxwbYG3Sv49iwAXv53D0KPy/l25LVodi2YacWtDVQqEhKpkRzCYbv8vD6ExGEAgoK0rL45u8s3y5kGwePVxUc3R9gt64CkDMkRrX9nuy4x1LFKhG/oNdVI18tmHwZvcWZuXQju70BN8fuC/HsgSBeVdjWdp6hjgaSBZOIv5bRuxcTnP0zjWk7ax/o93JkUCdnSE79lsLv6eHYwVBj7eYN2LKYTRTWiANcShS4lCg03g/0aQ0DXalAypbF0f0BlrKVpnHXUiWuLBcJ9fb8Z74bFbBn8eQ+Pyt5k36f2mhLHR/PrHJluUhQc9nWdj7IOv4NkzaSc/MZXjq3wKe/JtfF5cq1uJBmq0C3hrCOOvn0Yp6zc2nG9ugATC3k+D6WAyC4lS0I9dbCr2cM3roQbxq/tgVd3gVPD+9gzw4338VyTF3PMbdaxLLg3rDG2JCPR4Z07t/V23TtnRuwlVEBRsIaI2GNFx7cSbpU63vQ1vc6LJwNYUcDRtUib0h09/p5bSZcxz+lKlUHl0NH153jX/zFkSGdsUGdhyI6gRbC6VKVnxbzTC/mmb7h8MfV7krWDEKpnXY1Qz6kZTG9mOfHG3muJktsiOy2gTiwuXvXHUJKuSQsOP1/iAMIoZwSZbU8KSXRbVeX/G5a2pvi8onRtOEpj0v4EGTz06WbulIugfW+qXge/eXF4cy/C7eVCw87IhIAAAAASUVORK5CYII="style="float:left;">
<small style="color:#666;">CSS3是CSS技術的升級版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Bootstrap3】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAA3VJREFUWIXtlktsG0UYx3+7a3v9JnUoJQ8U4pI0dR/QQtNEalFDhEC0BfGSQK3EBVXihARCuSBACEEOCIR6Qz2hIsEFCQ7kUhRe5VBUWlJaJW15hDQkTeJsHNu763g9w8EQMLHdxUnlS//Sandn5vvvT9/MfLPKof43JXWUWs+P3wC4AVAVoL2zids7bkXTyg/R/d6q726lbY/3v1auY/DYs8Q3NZFJW3Rtu431TQ0IIbnvwA6srM3A4FNM/DpLb18CieTFN55kdnqB7bviBIM6PX0JsmmL3r4EN8VCTE3MlwXwVCITBUnKyNIW30DjLVE2tMRIXk0xOvI7PfsS2OYSwZDOxq5mZqYMbHOJjkQrU1fm2Xp3O02tMZAQaQjQs28zP3x36f9lQPf7MObSnDxxAZ/uYWxkglNfj7Kxq5nhz8/iOAXSKQukZPTcBEIIJn+b45exP/DpXpIzKdIpi233xDnx2Wkmx+fKAijXsxIGQzqhSIDZ6YWKYypOwX/V//Cd7Nh9BygKAAoKKIAE28ozPTnPV0M/MjOVWo4xsznMbK6qr2uAlrZG7trdWXXMg4/t4q2B41w+f9WtrXuAf+vTj79cftY0jebWm9nZsxnd7+PISwd5/tB76N7Q9QN4/91PVrS98Mph+h/qprl1Pf6IQnYhRdAfpThPlbVmldBILgIghcQybXKOScYykFJUjaspA/HOFhQUFFVB01TaO1rY//heAL754gyWWVx4+UKOtJkkHIihqtraARz9YKBs+9j5cY4OflTSVpAOaWuOkD+GR1tZrtf0MNq0pY1nnjuIopTOu5CCjJUk79grYmrKwOH9L/9j4NVYF4vy6NN93Hv/Tg48sZeR05c4OXy2JEYiydgGQT1askNqyoCRXFy+ZqcNLl4Y553Xj7OUywPQvWdLxVgzt4iVS68OoJw8Xg1VLdr9fa8kO5/BtFOArG0KuvdsBYo7XNVUQuEADzzSi8dbXOnnzly+pkfOMZG2qA3g1bePVOz7+eIVhoe+d+Wz5NjuAYSUCFFaVKQEIQROvsCCkebUtz/x4bEh8nnHra3741iIAhlrnoJ0b+5GrhehqmpEgo14Nb0+AACKohIOrMPnCdQH4C8MQv4G/L5wvQCKCvgihPwNxT+jegAA+DwBwoEYyipsVl0JPZqPaLARVSl/3F5LfwK/oDDJxNRfbAAAAABJRU5ErkJggg=="style="float:left;">
<small style="color:#666;">Bootstrap，來自 Twitter，是目前最受歡迎的前端框架</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Bootstrap4】</h2><img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAIAAABuYg/PAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6REVCRDg5NzlCNjI4MTFFN0EyRkNBODVFRjEyMTIzRjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6REVCRDg5N0FCNjI4MTFFN0EyRkNBODVFRjEyMTIzRjQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpERUJEODk3N0I2MjgxMUU3QTJGQ0E4NUVGMTIxMjNGNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpERUJEODk3OEI2MjgxMUU3QTJGQ0E4NUVGMTIxMjNGNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjRUavEAAAW3SURBVHjahFdbaBxVGD5n5szsLZvLZmOzSXMxkSC0DxUrvhTsSxCNPvjgi+2TiMUX+6CCUinog9A+SsXbS0HfbKWgRcEapCL1giDVYosSU0OatUk2t73N7sz8/mdu57KbdFhmZ87tv33f//9DX5u9CAQvAALBnT/jvzRIwqnoAeRBaSOI9fpGiB6YeugekpTjFPH3kCRembwoMEyRRJJDkxuJtUokiZVdPSTcwJS5DknRUl0JsT85lXR4COLHRATrHicKvg+e68diuvlHKAHxfqCUGIziXYiSxLOucWo1XTvD8gMZCK4uQUo8K49T/l/bcRo1x04xom4hYcx0SU67fyibzdtO0+UzVD8U9fb5ybrP0Q+U0OJwvl61Kv/tsJQpBYg/sUhQsAfNd5pcUs9Aury46TTaxFAOBREO0AASssL3fTvNShMDuG2tvG2lzWRxaJnQDpemMgxtQkmu66WyDAB255MEk2gKLTNdz1teXB8e68vkrFbLNQyS6MdksLqu39efcZw22mRnQ6O5vyiFrUrDa3syqREI6Zxlp0wfIKYN/zOZ0Wy06rVWKmvhA0VpsfcU6KMb+HqfUCPxFY6BBzA2XWC2ISMbDyrf3lhd2RweHzAM6vM4xkAxKA+hDyFEE8cwOYahwABVkIy4ba/ZaL/67tzUwX1Eve78U7nwwbXvLv1RHMlTqjE1SQjCz0yjM79RAjJ7Aot7B7P4On/h92bDRRNRg5HJgUNH7n/5zJznevOXro9MFhJUJ/vUREPimMXEkVeBZJ9p8kCfe+PrjdVqT38Ko9uoOs+cePTkmaeOv3L02pVbLYcrQcR2AAHgaMSQcprIbzJqQph4HoaTjE4VxmcGR6cHJx8cGpspXv3iBgZmaKQXuYXslJyvZ9FwyojPEwKSigCJOHRtEJNGADOn0UKzlhfW+os5hAbyaWWpgvQSSSxOY6ByhqkZT46WTOQIVJZtItYN0wDqP3x0+oU3ZxE7505d9j3gWAWQ9CadRYCBzs0YkqBgaXujXizl37/yogbIsyc///KTnw8dmeIQ9ndRNPYWU4AQ6UWljBejlnGA/HV9BbGHluEdyfTAgdKJ04+jEhc//qE0UdCKbRwRIldqoT5IeU91AvT0pfH91LFPN9aqud4UMhaZPjkz9Pb5Y8+/Pntncf2n+Vv3jfYl6yVpwpOGjL09SrAf5IfCcA/HXik/tL8Ps9+v3//93unLOD53/JFWq+2HCUihs6I60worqItAoJ9fiD0a/HCMmkZvIbtVqeF4rjedQjSiQiYVdRU0mCS5ERSnab0Cp0hA6vJSBUmd4y4FrJDIrSefO4zjC3+W61VnsJTXFFW1J6yzt5E5Hl0E3JaL77PPPlTfaWIRx44BifXY0wcPHJ7AEvjZh1f7ilmJxnqNjqEPSvqSUpSolDxgAalfeusJDfo3frn90TtfIakxN/KeJepFhNZymJgWw7BXkehJmGVke+zzZ79FEBoYkjgoWPbK/27c/G3J87zRyYLr+Sr2lKwUHUW6dE40KEWRddSkFjN//OamE2e/MJ2gWljWewsZTCuuK0viFZ/rbUg9IHRkECy+2BsNDufttIn6GkhkiAwtDOc7ms7owfd9EBkVJXlYrDNZu7K6jeiVSoqoZyRseJo1p1G1SpMDywvrDi/qZM9uNX6IKxkKRkn7p4oIzlq1aWFDB6C2clLHgtPrd6sYmH3j/Qju6BR6j08NGWKZnF2vNVfLW+jeOJNEBjEJ5dGgZRtr5a10zk5nrcBDndQh6kdN3AnySJD1u9v1apOhpI7WliV8kuesNENibTZbmtYKZ6GDSUHPg4hVvae1BaB+sAT6YrRY1IVB6MdgAxXygMpTJOz6RGeuSQrTFXT51AGiuFa3TP1y0ZsqASKiFFJQ65nUhZGuSsiFcRdYdvsEiZwHTFNNkijXbqndA60eKZJIN0nJaf8LMABlrhVsnvvxsgAAAABJRU5ErkJggg=="style="float:left;">
<small style="color:#666;">Bootstrap4 目前是 Bootstrap 的最新版本</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Font Awesome】</h2> <img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAYAAAA3WXuFAAADLklEQVR42s2Yu0srQRjFN1F8gaiYQhAVREJULAQljaWdgoW1kCqChX+BYCGxiOADwUoLNSqW2uifoFYWVmKCsQi+wEQQxMcc98x1w+46m2Tv9a4uHJLszu7+5sw3830T7fT0VPT19Yny8nLh8/k8l9/vF42NjWJqakrc398LbWhoSFRUVPAiKL2BpzLeW1lZibW1NWjV1dUGrecwZih+hkIhaLTsp4EMlZWV/QH6lMVCs7wcOk2nyjtEdXZ2YnFxEYlEAsPDw6itrfUESgkUCASgzzq8vLzg/f0duVwOIyMj0OPM8QHf5ibvJZB5yOjI9fW1hBFCSM3OzqK5ufkLBH8TlJ3Qpy2qqqosbUp1JN/e55eyBHVHRwdSqRTe3t4kFD8jkUh+2Iw2k5OTODg4wM3NDV5fX6X4/fDwEBMTE2hra1M6Z/7NAGZH2FlHIGpsbAyZTEYCLS8vo6WlRd48ODiI3d1d3N3dWRy0i524vLxEPB5HMBj8AkZXe3t7sbCwgKurK2xsbDgPGdXV1YVkMikfHo1GpSPr6+synpwgnMDoGp3ky+fm5rCzs4OzszMZo2zz9PSE7e3tr0FdCGh6ehrpdNoVjEp01Sw7kKGiDq2srOD29hY83EIUu0fpUKlA/+qQKyBz6ijkkP34TqD8kBWLIQIxOP+3QwWBLi4uZOB5CqRah34N0G8I6vzCaE6uvMBsb3dIBfTdQV1wYSwFSAXodva5Durx8XElENMCzx0fH2Nvbw/7+/s4OTmR53itVKBsNotYLGapDpQxpHKIL2JiZY9YI7HssJcbPDc6OiohHx8fHVMIn8XrzG3M+ObkWzSoWQ8dHR1hZmYG7e3tBYszQ6yNBgYGsLW1hYeHh3w58/z8jPPzc8zPz6O/v99S4Je8DjU0NKgLqhKLL97Pl4fDYbS2tioLPVdBXVdX99flqasS11iH7NPeGDIDqL6+3pttUKECzeyQV0CO2Z4ArPA4mzju3OJ66pB9yCxTUNM83+9rugO/ayvd3d0tPoftx2F6enqgra6uipqamh/7O8YQF9PNzU1o+h5M6Nsc0dTUpFw5vRAn0tLSklzJPwCn+oCzFPMzYgAAAABJRU5ErkJggg=="style="float:left;">
<small style="color:#666;">Font Awesome 是一套絕佳的圖示字型庫和CSS框架。</small>
</div>
<div class=div_menu2><h2 style="color:#64854c;font-size:16px;margin-top:10px;margin-bottom:10px;line-height:1.1;text-align:left">【學習Foundation】</h2><img class="codeicon codeicon-36" height="36" width="36" src="data:image/png;base64,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"style="float:left;">
<small style="color:#666;">Foundation 用於開發響應式的 HTML, CSS and JavaScript 框架</small>
</div>
</div>
</div>
<!--底部-->
<div class="div_under" style="clear:both">Copyright © 2013-2018 菜鳥教程 runoob.com All Rights Reserved. 備案號：閩ICP備15012807號-1
</div>
</div>
</body>
</html>