經過5天的快速學習之後，我開始學著做網頁了，有一些心得體會，在這裡記錄一下。

  快速學習只是為了知道在真正實戰的時候，你可以知道你想要的東西到底在哪裡，這樣就可以快速地進行查詢到你所需要的東西。快速學習不是為了將所有你看到的東西全部都記住，而是有一個大概的印象。在真正實戰的時候確實是這樣的：在實戰做網頁的過程中，我基本都是一邊做一遍查的，有時候連網頁的背景都要查一下怎麼調大小。但是我可以很清楚的知道他們在w3school的哪裡，這樣我在做的時候並沒有費很大的功夫。

  在做網頁的時候，首先接觸的是bootstrap。這是一個很好的網站：因為如果靠自己的力量是做不出一個很優秀的網頁的，如果只是自己寫css，當然可以做，但是這個很費時間的。所以我在做的時候，用的是bootstrap的模板。以此為依據進行創造。我覺得在別人寫的基礎上把他轉化成你自己想要的也是一個挑戰。

  我做的第一個頁面是登入介面，使用的bootstrap的登入模板。在修改的時候用到了火狐的偵錯程式（就是在網頁上按F12會出現一個-介面），裡面的檢視器是一個很好的工具。因為根據這個工具，一切的網頁在你眼中都是“可見”的，你可以在右邊看到他的css樣式，可以在上面進行修改來看看能否達到你想要的效果，這個可謂是做網頁的神器。下面就寫一下用偵錯程式的心得吧。

  在做登入介面的時候，我借鑑了西工大翱翔門戶的登入介面的樣式。然後在西工大的登入介面上用偵錯程式看一下它的css的樣式是什麼樣的，然後開啟西工大的css複製了head-top-box的css然後把它加到我自己的css檔案中，然後將html也一併複製，但是你會發現它的位置是不對的，這是因為我的網頁和西工大的網頁的body大小是不一樣的，所以導致了它的位置是不一樣的。但是如果你改你自己的body的大小，然後把head-box調到了頂部，但是這是時候會發現登入介面的位置就被確定死了，這個是有就不能改body了。你要改的是head-box-top的引數。我在改的時候用的是position，改成absolute然後在慢慢調整。然後就是登入框的調整了，用的是同樣的方法，如果遇到不能修改的地方（就是修改css檔案的引數不起作用{具體原因我感覺是應為檔案的路徑問題，偵錯程式會告訴你你要修改的css的路徑，如果修改的不是這個路徑，那麼實際上是沒有作用的}），那麼在這個時候，可以點偵錯程式右邊的元素，在那裡面改引數，實際上是用內聯的方法修改引數。當然如果你可以準確的找到所對應的css檔案，那麼你是可以在裡面修改的。但是你會發現在txt裡面看css簡直就是一種煎熬。還好在txt裡面可以用查詢(CTRL+F)然後把頁面上的你要修改的地方的名字複製並進行查詢，一般都可以找到，然後修改就行了，如果不行，就用上面的方法，用內聯來改。修改到合適的時候就可以複製貼上，是複製到你的html的相應的地方。

  做完登陸介面之後，我在網上找了一個css3的模板，然後做了主頁面，css3的動畫很炫酷，就是用ul做了一本書然後實現了翻書的效果，真的被驚豔到了。只有深入學習才能自己做自己想要的效果吧，要不然永遠都是用別人的，這不是我的風格。

  做完主頁面之後然後做了一個點歌的頁面。這個只有導航欄是用的bootstrap的模板，剩下的都是自己做的，也是我經過前面兩個頁面之後自己獨立做的一個網頁。歌單我用的是表格，但是一般的歌單用的都是ul，然後在li裡面加一個div，然後完成一個歌單。但是我開始並沒有這樣寫，在修改的時候就發現了問題，不能整體進行改動，只能一個一個進行修改，這也就是為什麼一般歌曲網站用的都是ul吧。還有就是修改hover。說實話，Bootstrap的hover是真的不好看，尤其是有下劃線。但是我碰到的問題是，hover是寫在less檔案裡面的，可是我在修改less檔案的時候不起作用。於是只能騷操作了。我在自己的html檔案中寫了hover的格式，然後在每一個後面加上一個!importan，表示相同檔案的時候這個是最重要的，也就是優先用你寫的style。然後就可以修改顏色和去掉下劃線了。還有就是如果用背景圖片的話，我是直接在body裡面使用的，這樣做是不好的。但是如果非要在body裡面寫的話，大小不夠的話，可以使用badckground-attachment:fixed來進行固定，這樣不管怎麼滑動都是可以的了。還有一點就是可以用background-position的百分比來進行定位，這個是用在頁面的高度如果比較大的時候，這個時候如果使用center來定位的話其實不是在你視線的中間而是在整個頁面的中間，這個時候可以用background-position:50% 0%來定位。

  在做網頁的時候主要都是靠偵錯程式。真的很好用，很適合初學者快速入門。