實習了一周，基礎太差，只做了寫頁面一件事，真正做起來才發現要對接後臺，我寫的完全不合格，最後還得麻煩老大幫忙重新改了一遍才能給後臺綁定數據，前路漫漫啊（年紀輕輕為啥這麼想不開，打什麼代碼呢？ ） 1.position：absolute 與定位問題使用了position：absolute之後發現想要居 ...
實習了一周，基礎太差，只做了寫頁面一件事，真正做起來才發現要對接後臺，我寫的完全不合格，最後還得麻煩老大幫忙重新改了一遍才能給後臺綁定數據，前路漫漫啊（年紀輕輕為啥這麼想不開，打什麼代碼呢？-----）
1.position：absolute 與定位問題
使用了position：absolute之後發現想要居中，margin不起作用了，一查資料發現，absolute以後，盒子模型脫離了文檔流，如果他的父級元素沒有定義relative，那麼這個盒子模型會以body為父級元素相對定位。而 absolute與margin-left好像是天生的冤家，你在我就走。這裡就需要absolute和top、left、bottom、right配合使用。當然不知道還有沒有其他辦法，我是使用了這種方法，下麵是例子：
1 <style type="text/css"> 2 .l1{ 3 width: 100px; 4 height: 100px; 5 background-color:red; 6 position: relative; 7 margin: 0 auto; 8 } 9 .bg{ 10 width: 50px; 11 height: 50px; 12 position: absolute; 13 left: 0px; 14 right:0px; 15 top: 0px; 16 bottom: 0px; 17 margin: auto; 18 19 background-color: green; 20 } 21 </style> 22 </head> 23 <body> 24 <div class="l1"> 25 <div class="bg"></div> 26 </div>
效果如圖：
2、代碼命名要規範，代碼重覆利用率高，以及簡潔！！！能用最少的代碼就不要balabala寫一堆，效率要高！！！
3.扎扎實實學好JS！！！
4.css滑鼠經過效果，如果效果一樣，可以不需要命名多個CLASS類名，只要一個就可以了，每個元素對應的滑鼠事件會有對應的響應，不會因為類名相同都發生滑鼠事件。
錯誤的代碼：
1 <!--左邊內容--> 2 <div class="container-left" id="CLeft"> 3 <img src="images/jianbian.png" class="box-img"> 4 <div class="slide-img-left"></div> 5 <img src="images/3.1P.png" alt="圖片載入失敗" class="BG"> 6 <div class="moveBox-left"> 7 <p class="p1">浙江大學B校區</p> 8 <p class="p2">面積：1240m² 資產：1247 當前警告：2</p> 9 </div> 10 <div class="btn-left"> 11 <a href="#" class="btn1">運行模式</a> 12 <a href="#" class="btn2">編輯模式</a> 13 <a href="#" class="btn3">後臺</a> 14 </div> 15 </div> 16 17 <!--中間內容--> 18 <div class="container-center" id="CCenter"> 19 <img src="images/jianbian.png" class="box-img"> 20 <div class="slide-img-center"></div> 21 <img src="images/3.2P.png" alt="圖片載入失敗" class="BG"> 22 <div class="moveBox-center"> 23 <p class="p1">浙江大學B校區</p> 24 <p class="p2">面積：1240m² 資產：1247 當前警告：2</p> 25 </div> 26 <div class="btn-center"> 27 <a href="#" class="btn1">運行模式</a> 28 <a href="#" class="btn2">編輯模式</a> 29 <a href="#" class="btn3">後臺</a> 30 </div> 31 </div> 32 33 <!--右邊內容--> 34 <div class="container-right" id="CRight"> 35 <img src="images/jianbian.png" alt="" class="box-img"> 36 <div class="slide-img-right"></div> 37 <img src="images/3.3P.png" alt="圖片載入失敗" class="BG"> 38 <div class="moveBox-right"> 39 <p class="p1">浙江大學B校區</p> 40 <p class="p2">面積：1240m² 資產：1247 當前警告：2</p> 41 </div> 42 <div class="btn-right"> 43 <a href="#" class="btn1">運行模式</a> 44 <a href="#" class="btn2">編輯模式</a> 45 <a href="#" class="btn3">後臺</a> 46 </div> 47 </div> 48 </div>View Code
正確寫法：
1 <style type="text/css"> 2 .l1{ 3 width: 100px; 4 height: 100px; 5 background-color:red; 6 position: relative; 7 margin: 0 auto; 8 top: 10px; 9 } 10 .bg{ 11 width: 50px; 12 height: 50px; 13 position: absolute; 14 left: 0px; 15 right:0px; 16 top: 0px; 17 bottom: 0px; 18 margin: auto; 19 background-color: green; 20 } 21 .l1:hover .bg{ 22 transition: all 0.3s ease; 23 transform: translate(0px,-20px); 24 } 25 </style> 26 </head> 27 <body> 28 <div class="l1"> 29 <div class="bg"></div> 30 </div> 31 <div class="l1"> 32 <div class="bg"></div> 33 </div> 34 <div class="l1"> 35 <div class="bg"></div> 36 </div> 37 <div class="l1"> 38 <div class="bg"></div> 39 </div>View Code
5.下一步弄明白如何讓選中的事件後面加上active,自動顯示為當前發生的事件。方便別人知道選中的是哪一個。
6.暫時沒想起來，想起來再說吧。
