為更好的學習軟體工程這門課，我做出如下規劃：

一、自主學習一門網課（在MOOC學習《網頁設計》）

二、學習進度報告

到目前為止，已學習網站的概念與開發流程，瞭解網站的整體規劃，且正在學習網頁效果圖的設計製作，從這段時間的學習中，我瞭解到網站設計與開發的流程如下：

1、網站的開發流程

（1）需求分析：當拿到一個專案時，必須進行需求分析，清楚知道網站的型別、具體功能、業務邏輯以及網站的風格，此外還要確定域名、網站空間或者伺服器以及網站備案等。

2、網站的整體規劃

（1）定位網頁的主題和CI形象

（2）確網站的欄目板塊和目錄結構

（3）確定網站的風格

（4）瞭解網頁風格的發展趨勢

3、網頁效果圖的設計製作

3.1、盒子hover盒子

這裡插入一個規則。覆蓋優先順序規則：1、同級 有長寬空div 文字 圖片先有誰誰就全顯示，排在後面的地方不夠排就被覆蓋。覆蓋優先順序位置決定。

主要知識點：position：fixed固定在介面中央。position：relative 用在外框。position：absolute用在內盒。

　　　　　　　　　　text-align：center ------>局中位置總結：a）文字局中，text-align：center 。b）盒子局中，margin：0 auto；

　　　　　　　　　　滑鼠停滯動態圖片總結：先想到用hover，a）兩個盒子，滑鼠停滯後顯示的盒子，格式為 標籤屬性（先顯示） ：hover 標籤屬性（後顯示），常用，hover，visibility屬性，hidden和visible值。b）一個盒子滑鼠停滯先顯示的透明，然後顯示效果。常用比如，border：20px，solid，transparent。

　　　　　　　　　　兩種圖片透明：opacity：0.6 background-color：rbga(0,0,0,0.7)注意一定帶著a

3.2、邊框效果

3.2.1、去邊框閃爍

效果：滑鼠放在內容上時，邊框不自然呈現，有閃爍現象。

本質：未處理的，在滑鼠放置時，因為多加了邊框所以大小變化了。導致閃爍的效果。 處理的思路就是先加上邊框設定為透明。

3.2.2、利用邊框構圖

　　　　利用邊框特性構造一個小的黑色三角形。當兩邊都出現不一致的顏色邊框的時候就會出現銳角。兩種顏色在一起匯聚到一個直角，就會按照各自的寬度比例產生銳角。

　　　　使用margin-top或margin-left移動位置。如下例子滑鼠停滯後尖角在原位置改變指向。注意：這裡盒子顯示時 間距調節用的margin-top，在hover調節時使用margin-bottom不起作用，hover只能用margin-top調節位置。 這可能由於display：inline-block的原因，inline無論怎麼移動都不能將圖示移動出界面，但是block是可以。

3.3、引入更形象的圖案

3.3.1、原理及使用方法簡介

　　　　基於unicode編碼格式製圖，每個小圖示都對應一個unicode編碼。載入awesome的.CSS檔案，使用時引用即可。

　　　　下載網址http://www.fontawesome.com.cn/

　　　　注意：他們不是內容，只是CSS渲染效果。

3.3.2、偽類和偽元素

　　　　：：before是偽元素，修飾元素後作用在選擇器

　　　　：before偽類，修飾選擇器。

3.3.4、模態對話方塊

引用E:\python\zuoye\chouti\appro\loadIcon

top：50%；是以圖形的左上角為基準，用margin-top：-1px；調節。z-index：2；確定顯示順序。

　　　　局中用fixed。用JS實現模態對話方塊

　小結

　　　　常見樣式的構造思路：

　　　　1）拼接，a）多圖基本拼接。b）多圖position。3）附加圖漂浮在基礎圖之上或附近。注意在某種程度position可以代替flowt.

　　　　2）層疊，a） hover及hover+標籤。b）透明transparent。c）隱藏+可見，使用visibility：visible和hidden。

　　　　3）局域以上的所有帶有非覆蓋效果，均可使用設定內部內容帶有內邊距的辦法。

　　　　綜上，元素定位margin，組合定位position，元素內容定位padding。基本可以解決一切定位問題。