近期開展了Affablebean專案的開發。該專案是在於開發一個網路線上商店。初步實現類似於天貓、淘寶等網頁版的效果。

一.專案介紹

二.開發背景

三.實際需求分析

四.開發過程

五.知識筆記

（一）CSS

     1.margin

         margin為調節位置的屬性。它後面可以跟1~4個引數。因此共有四種使用方式。下面進行依次舉例。

margin：10px 20px 30px 40px

margin：10px 20px 30px；

margin：10px 20px；
 

margin：10px；

     可以通過margin函式來實現浮動專案的上下左右位置的移動。

     在此專案中的應用舉例：

.category_categoryBox{
    height:50px;
    width:180px;
    margin:15px 0 15px 30px;
    float:left;
    background:#aaa;
}

     2.font-size

      font-size屬性用來設定文字字型的大小。它的值

     在此專案中的應用舉例：

.category_selectedText{
    line-height:150%;
    font-size:large;
    margin:10px 0 10px 35px;;
    float:left;
}
 

      該屬性用來設定以百分比計的行高。且不允許使用負數。該屬性會影響行框的佈局。在應用到一個塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。line-height 與 font-size的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。原始數字值指定了一個縮放因子，後代元素會繼承這個縮放因子而不是計算值。

.category_RightText_Left{
    line-height:150%;
    font-size:medium;
    margin:40px 30px 30px 30px;
    float:left;
}

   position屬性規定元素的定位型別。這個屬性定義建立元素佈局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。

此專案中應用舉例：

#category_indexRightColumn{
    position:absolute;
    left:536px;
    top:270px;
    height:400px;
    width:600px;
    float:left;
    background:#eee;
    z-index:0;
}

5.z-index

  該屬性設定元素的堆疊順序，擁有更高堆疊順序的元素總會處於堆疊順序較低的元素前面。元素的堆疊順序可以出現負數。且z-index僅能在定位元素上奏效。如：position：absolute。該屬性設定一個定位元素沿Z軸位置，Z軸定義為垂直延伸到顯示區的軸。如果屬性值為正數，表示距離使用者更近，為負數則表示距離使用者更遠。

6.font-weight

該屬性用於控制文字物件的加粗。物件值從100到900，一般常用的為bold。

http://www.divcss5.com/rumen/r122.shtml

7.border

http://www.w3school.com.cn/css/css_border.asp