• 設計感

       當前端大部分基礎學完以後，做前端頁面其實不需要花花綠綠的各種特效，，它更注重的是你網頁的設計感強不強，佈局是否

        新穎，擺脫一些格式的框框，弄點不一樣的頁面設計，即使頁面簡單，反而讓人有簡潔的好感。而且現在前端競爭越來越激

        烈，慢慢就要注重你的設計能力了。

• 細節處理

        看各種網站你就會發現他們的特效其實不多，他們內容不管多少，細節處理一定是好的人性化的，就好比在各個點的滑鼠的變

        化，就是一些小的點，你不做也不會有什麼，但是做了雖然有些麻煩但絕對會有意想不到的效果。這點我現在做的很差，我總

        是嫌各種麻煩不去處理細節，這點要好好審視一下自己。

• tab標籤分頁設計

        這次網頁除了大量運用網格系統，bootstrap就使用了tab分頁，所以大致講一下這個：

         先上程式碼，再詳解

			<div class="fenye2">
				<ul id="myTab" class="nav nav-tabs">
				   <li class="active col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="#dingcan" data-toggle="tab"><strong>web組</strong></a></li>
				   <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="#yonghu" data-toggle="tab"><strong>軟體組</strong></a></li>
				   <li class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><a href="#dingdan" data-toggle="tab"><strong>硬體組</strong></a></li>
				</ul>
				<div id="myTabContent" class="tab-content">
				   <div class="tab-pane fade in active" id="dingcan">
				      <p class="mid">Web組主要學習超文字標記語言HTML，指令碼語言JavaScript，程式語言java PHP .NET。後臺資料庫，web後臺伺服器的管理。組內成員在完成自己專業的學習以及前端學習的前提下可以根據自己的興趣選擇後臺學習的語言。等基礎牢固，自己的水平到達一定程度後可以做自己的網站，也可以幫別人做網站。前期的學習每週都會有固定的任務需要成員拿出每週的學習成果來，每個學期結束亦有寒暑假任務進行學期答辯。組內答辯優秀者可進一步完善作品參加組間答辯。</p>
				   </div>
				   <div class="tab-pane fade" id="yonghu">
				      <p class="mid">軟體組主要學習java、C++、C、QT、OC等程式語言和競賽演算法以及android，COCOS-2dx,WP等平臺的軟體開發和遊戲開發。組內成員在完成自己專業學習的前提下，根據自己的喜歡來選擇自己做哪方面的深入學習。每學期都要進行學期答辯，通過假期自主學習，獨立或合作完成一個答辯作品。軟體組可以參加的專業性競賽有ACM/ICPC、藍橋杯、“網際網路+”、程式設計大賽等。</p>
				   </div>
				   <div class="tab-pane fade" id="dingdan">
				      <p class="mid">硬體組主要學習51,AVR,STM32,Arduino微控制器開發，涉足嵌入式系統及智慧硬體開發。聚集了眾多喜歡程式設計，熱愛硬體設計與開發的三大學子。硬體組思想自由，開容幷包，每位同學都可以盡情闡述自己的觀點和想法。我們每個週日的晚安排有例會，每位成員輪流總結一週的學習情況，其他成員可提問和補充，輪流總結完畢後是我們的每週一講，大約進行40分鐘，每位同學都有機會將自己最近一段時間學到的新知識或者新的想法分享給大家，感興趣的同學可以下去後查閱瞭解更多或者更加深入的學習。</p>
				   </div>
				</div>
				
			</div>
 

       首先最基礎的格式：                 <ul id="myTab" class="nav nav-tabs">                    <li class="active col-md-4"><a href="#dingcan" data-toggle="tab"><strong>web組</strong></a></li>                    <li class="col-md-4"><a href="#yonghu" data-toggle="tab"><strong>軟體組</strong></a></li>                    <li class="col-md-4"><a href="#dingdan" data-toggle="tab"><strong>硬體組</strong></a></li>                 </ul>                 <div id="myTabContent" class="tab-content">                     <div class="tab-pane fade in active" id="dingcan">                        <p>Web組內容。</p>                     </div>                     <div class="tab-pane fade" id="yonghu">                        <p>軟體組內容。</p>                     </div>                     <div class="tab-pane fade" id="dingdan">                        <p>硬體組內容。</p>                     </div>                 </div>            ul要設定固定類名nav nav-tabs讓網頁知道這是tab分頁的頭元件

            li裡面的連結要利用data-toggle進行網頁互動值為tab，跳轉地點href為接下來的各個分頁小盒子

            分頁大盒子要設定tab-content的固定類名讓網頁知道這是tab分頁的全部內容

            分頁大盒子要設定tab-pane的固定類名讓網頁知道這是tab分頁的一個分頁內容。fade時切換的過渡效果，可換

• 表單簡單驗證

         表單驗證主要使用了pattern的正則表達，使用格式pattern="^[\u4e00-\u9fa5]{1,7}$"，^[\u4e00與\u9fa5就是所有漢字的範圍

         碼代表只能輸入漢字，1，7代表最多輸入1-7個漢字；再例如：pattern="[0-9]{10}"代表只能輸入10個數字。常與title屬性一

         起使用，例如pattern="[0-9]{10}" title="輸入有誤，請輸入10位數字" 兩個一起使用當你輸入不符合規則時就會提醒你。