自寫網站——第一部

標籤：模糊   網上      png   頁面配置   代碼   顏色   src   article   

在老師還沒有開始培訓之前，看書自學了一點點CSS，之後又自己在網上看了一點視頻，那時候對CSS概念很模糊，大概是就是知道是給頁面做裝飾的，大概是因為之前只是簡單瞭解到功能，自己並沒有嘗試寫點正式代碼去做樣式，是小瞧了CSS的功能了。直到自己寫了大概的架構，只是給架構用了一點定位內容，才感覺CSS是個神器。培訓老師也沒有講到定位的內容，自己也是瞭解不多，在中間遇到了很多問題，一步步摸索著去敲代碼，一遍又一遍的看效果，也算有點眉目了。

模仿QQ空間寫一個首頁架構，雖然只是把前期的模組劃分出來，然後給各個模組定位，用的代碼也非常簡單，但是看到效果還算符合預期的時候，還是很有成就感的。總結了一些自己做這個架構的感想，如下：

第一步：把頁面簡圖用鉛筆畫出來，因為我還不會用axure做介面，就按照自己構想稍稍又鉛筆畫出來，畫得確實有點爛，比做出來的簡單介面還醜，所以就不放出來，就放一個最後做出來的板塊劃分出來，用大塊的顏色區分。後面還需要花時間去把axure給弄熟悉。

 

第二步：按照畫出來簡圖，寫HTML代碼，這次充分利用div標籤，因為只是劃分板塊，也就只用了div。在還沒有做這個頁面之前，並不知道如何去做一個簡潔的板塊代碼，做完之後算是有個“顛覆”的認識了。這會是充分瞭解到div這個標籤對於頁面配置的重要性了。做完之後我決定以後自己要做網站之前，不管有多簡單，一定要用思維導圖把網站架構寫出來。

<div class="banner">
    banner
</div>
<div class="head" id="nav">
    <div class="logo">
        logo
    </div>
    <div class="inNav">
        <div id="main"class="inNav1">
            首頁
        </div>
        <div id="dairy"class="inNav1">
            日誌
        </div>
        <div id="album"class="inNav1">
            相簿
        </div>
        <div id="note"class="inNav1">
            說說
        </div>
        <div id="music"class="inNav1">
            音樂
        </div>
        <div id="more"class="inNav1">
            更多
        </div>
    </div>
</div>
<div class="body">
    <div class="leftNav">
        左導航
    </div>
    <div class="article">
        主要內容列表/具體內容
    </div>
    <div class="ad">
        廣告
   </div>
</div>
<div class="footer">
    <div class="outNav">
        友情連結
    </div>
    <div class="inf">
        本人連絡方式
    </div>
</div>

第三步：做好板塊劃分之後，就要開始給各個板塊在CSS代碼中定位。這一步是我花時間最多的地方，因為還沒有學到定位的內容，要一步步去看相對定位到底是怎麼一回事，float又是怎麼一回事。

頁面目前實在太簡單了，敢拿出來，也是需要勇氣的，也就用來看看自己學習成果。後面這個頁面持續完善，我再部落格上更新。

*{
    margin: 0px;
}
.banner{
    width: 1280px;
    height: 100px;
    background-color: aqua;
    text-align: center;
    vertical-align: middle;
}
.head{
    width: 1280px;
    height: 80px;
}
.logo{
    border-radius: 80px;
    height: 80px;
    width: 80px;
    background-color: antiquewhite;
    text-align: center;
    position: relative;
    float: left;
}
.inNav{
    width: 1200px;
    height: 80px;
    background-color: burlywood;
    position: relative;
    float: left;
}
#main,#dairy,#album,#note,#music,#more{
    position: relative;
    top: 10px;
    border-radius: 60px;
    height: 60px;
    width: 60px;
    background-color: aqua;
    float: left;
    margin-left: 100px;
    text-align: center;
    vertical-align: middle;
}
.body{
    width: 100%;
    height: 500px;
}
/*.leftNav,.article,.ad{*/
    /*position: relative;*/
    /*top: 0px;*/
    /*float: left;*/
/*}*/
.leftNav{
    position: relative;
    float: left;
    width:20%;
    height: 500px;
    background-color: cadetblue;
}
.ad{
    position: relative;
    float: left;
    width: 30%;
    height: 500px;
    background-color: cornflowerblue;
}
.article{
    position: relative;
    float: left;
    width: 50%;
    height: 500px;
    background-color: crimson;
}
.footer{
    width: 100%;
    height: 100px;
    background-color: lemonchiffon;
}
.outNav,.inf{
    position: relative;
    float: left;
    width: 50%;

自寫網站——第一部