首先，最近很多人都來問我問題，我列舉幾個比較典型的說明一下。

1. 一定要通過註解和反射的方式生產建表語句嗎，我能不能直接在mysql中建表？

當然可以，我只是為了說明一下註解和反射可以用在這個地方，實際開發肯定不會這麼做啦。一般都使用框架，比如hibernate，mybatis，sping-jdbc等。

2. 如果我自己開發一個小專案，jdbc用什麼框架比較好？

這個看具體情況，我個人比較喜歡sping-jdbc，因為我覺得還是自己寫sql來得直觀，mybatis雖然也是自己寫sql，但是需要花很多時間配置，如果不熟練的話，會在這部分花很多時間去排錯。至於hibernate，不得不說，這個思想很好，可是現在用的人也不是很多了。

如果有精力，可以自己將這些框架做一個封裝或者整合，弄一套適合自己的框架，也是可以的。

如果只是一個小專案，資料量不是很多的話，mybatis是個不錯的選擇，網上可以搜到一個逆向生成工具，直接生產bean層和dao層，一行程式碼不用寫。

3. 一般企業開發用mysql多還是oracle多？

都有吧，看具體情況的，一般那種大型專案用oracle比較多。小專案的話，mysql用得比較多，我個人感覺是這樣，雖然我經歷的幾個公司都是用oracle。

4. 馬上面試了，好緊張啊，萬一被問到不會的咋辦？（校招）

校招的話，其實對方也知道你的情況，我建議如實說就好了。但你要堅信一點，就是程式設計這玩意其實真的好簡單的，沒有一般人想得那麼複雜。

你要堅信只要給你時間，最多兩年，你就基本上什麼都會了，新技術也一樣，沒什麼大不了的。你現在可能還無法體會，以後慢慢會明白我說的。

我們畢竟不是去專門做什麼演算法研究，或者搞科研。

我們更多的是學著怎麼應用，怎麼去網上搜索已有的技術和demo完成功能。

說實話，從程式設計小白到熟能生巧，真的只是時間問題罷了。

所以完全沒必要緊張，如果碰到實在不會的題，就如實說不清楚唄。但你要給別人一種自信的感覺，就是一種“我只是現在沒接觸罷了，所以不會，但我知道這些東西都沒什麼難的，給我點時間，自然就會了。”

1. 內容區回顧

本節繼續上一次的內容，把首頁來完善一下。

上次我們繪製了內容區，根據文章分類依次垂直排開：

我們接下來，需要給文章的展示做一個封面，展示文章的標題，作者名稱等資訊。

每個灰色小塊的html程式碼：

<div class='category'>
    <div class='title'>連載小說</div>
    <ul class='items'>
        <li class='item'></li>
        <li class='item'></li>
        <li class='item'></li>
        <div style='clear:both'></div>
    </ul>
</div>

css程式碼

.category {
    margin-top: 10px;
    margin-bottom:20px;
}
    
.category .title {
    margin-bottom: 10px;
    border-bottom: 1px solid #cac5c5;
    height: 30px;
    text-indent:1em;
    font-size:18px;
    color:#666;
}

.category .items {
    margin-left:10px;
}

.category .items .item {
    width: 230px;
    height: 320px;
    background: #ccc;
    margin: 20px;
    float: left;
    margin-right:20px;
    cursor:pointer;
}

這些程式碼就相當於灰色小塊的骨架，今天我在寫文的時候突然想到了這個比喻，html程式碼不就是頁面元素的骨架嗎？如果說html是元素的骨架，那麼，css就是給這個骨架披上的一層外衣。

先寫骨架，再寫外衣。

雖然現在bootstrap，easyui等等的框架都越來越流行，可我還是覺得，作為一個碼農，基本的 div + css 還是要會一點的，總不能說一點都不會吧。

在寫css之前，我個人喜歡先把元素的骨架搭好，接下來的工作，無非就是給元素新增外衣罷了。

難道不是嗎，你覺得呢？

記得早些時候，剛參加工作，難免會遇到一些需要自己畫頁面的情況，當時我那個囧啊。

我當時想，媽蛋，勞資是學java的，幹嘛非得讓我畫頁面啊！

可是總不能說我做不了吧，於是我只好各種百度，各種練習，每天都學到深夜12點鐘。

別無他法，去看別人的頁面怎麼寫的。

那段時間好糾結的，各種看不懂，各種鬱悶。

我總也想不通，就寫了幾個div，配上一些css，頁面怎麼就能成這個樣子了呢？

沒辦法，我就跟著模仿，再加上自己總結。一開始怎麼模仿都不像，一不小心佈局就亂掉了。

我現在的觀點是，這方面真的沒啥捷徑，除非你真的特別特別聰明。

我的意思是說，就算你看了很多關於div + css的視訊，買了很多書，如果你自己不去練習，還是沒用的。

並不是說視訊看懂了就行了，還是要親自驗證，然後親自去除錯。一點一點琢磨出來。

哪怕那個知識點你已經有100%的把握說自己明白了，你仍需要在專案實戰中用過一次，你才能真正理解。

如果剛進公司，不要去羨慕那些老程式設計師，其實他們真的只是比你寫得多而已。要有自信，你早晚也能掌握。

如果是一年前，我根本不會相信自己可以隨隨便便寫出頁面，真的，當時我覺得這是不可能的。

而現在，大部分網站，我大概看幾眼，猜一下佈局，然後用瀏覽器自帶的除錯工具這裡看看，那裡瞅瞅。最多幾個小時，就可以把這個網站的佈局和頁面抄襲，哦不，借鑑過來了。（當然，不包括用框架製作的頁面）

反正這段時間也沒人教，我就自己琢磨，自己總結。現在寫習慣了而已。

是的，真的只是寫得多了，這就是一個孰能生巧的過程。

還有一個例子就是，有一天我偶然發現，我原來已經在盲打了，我之前一直沒意識到。

小時候特別羨慕那些電腦打字可以不看鍵盤的人，沒想到現在我也辦到了。

更奇怪的是，我都不知道為什麼，就好比現在我在寫這篇文章，基本上我腦子想到一個什麼地方，然後我就等待，等待螢幕上的文字跟隨到什麼地方。

有的時候我還納悶，怎麼螢幕上顯示得這麼慢啊，能不能快一點？？

接下來我才意識到，哦，原來我在打字啊。

媽了個雞蛋糕，我都沒意識到自己在打字啊。

我甚至天真地認為，腦子想到什麼，電腦上的文字就應該隨著出現。

沒錯，這就是熟能生巧。

只要你願意花時間練習，堅持不懈，就一定能夠有所收穫。

2. 文章封面製作

2.1 HTML骨架

好的，接下來開始製作文章的封面。

首先，把骨架搭好。

每一個item就是一個封面：

對於頁面上的小灰塊：

一個item就是一個封面，現在我們要在封面裡新增資訊和進行div+css佈局，怎麼做呢？

誒，是不是肯定要寫在這裡面呀？

<li class='item'>
                
</li>

一張封面，需要有這麼幾個資訊：
1.標題
2.梗概
3.作者
4.文章名稱
5.簡介

OK，我們來把這些東西填上去，然後隨便編一點資料。

<li class='item'>
    <div class='item-banner'>
        <div class='item-header'>生活中總是充滿了樂趣</div>
        <div class='item-name'>聊聊我的大學室友</div>
        <div class='item-author'>@張三 著</div>
    </div>
    <div class='item-description'>那些回憶，那些事。。。</div>
</li>

為了防止class重名，我給每一個樣式添加了一個 item- 的字首。注意啊，這裡的class是css樣式，和Java裡面的class檔案沒有半毛錢關係，不要混淆了。

先來張效果圖咯：

2.2 CSS外衣

骨架搭好了，接下來的事情，無非就是給它披上外衣了，對不對？

接下來的程式碼都是我自己的思路，沒必要完全照抄，如果你有更好的思路，做出更有意思的封面，也完全可以。

01、 將所有的div裡面的文字居中

.category .items .item div {
    text-align:center;
}

02、 根據banner部分新增背景色

banner只是我自己對這部分的稱呼，你隨便去什麼名字都可以的，css風格每個人都不同。

.item-banner {
    background: #666;
    color: #FFF;
}

03、 header部分的文字調整

.item-header {
    font-size: 12px;
    line-height: 52px;
}

04、 文章名稱的樣式調整

.item-name {
    font-size: 22px;
    line-height: 74px;  
}

05、 作者區域字型樣式調整

.item-author {
    font-size: 14px;
    text-indent: 7em;
    padding-bottom: 70px;
}

06、 簡介部分

.item-description {
    background: #eee;
    height: 104px;
    line-height: 76px;
    text-indent: 3em;
    font-size: 12px;
}

這樣就差不多完成了，好了，前臺內容區域就這樣吧。

下一節開始，我們開始寫後臺，然後前後臺做一個對接。

本文結束，額，又水了一章。