開頭為啥想做這個網(wǎng)頁

前幾天刷手機，看到有人問順德的事兒，就覺得這地方挺有味道的。比如美食、老建筑，都挺吸引人的?？晌曳税胩?，沒啥簡單網(wǎng)頁介紹。就一拍大腿決定自己搞一個，順便練練手。

第一步是打草稿和想內(nèi)容

我先拿張舊紙片，胡亂寫了幾個點子：順德有啥吃的、景點介紹，再插點圖片。但一開寫，就亂套了。本來想加個地圖導航的，結(jié)果發(fā)現(xiàn)太復雜了，新手肯定搞不來。我就刪了，改成了純文字和圖片的簡單介紹。這一步花了半天，改了四五次，才算整明白。

接著開始設(shè)計布局

我開了舊筆記本，整了個破軟件畫圖。本想搞個高大上的效果，比如背景能動的。但一弄就卡死了，機器嗡嗡響。我一急，就直接畫方格子，分了三個區(qū)：頂頭放標題，中間堆內(nèi)容，底下搞個聯(lián)系小框。這法子簡單多了，再不行我就用手在紙上劃了劃。設(shè)計完，感覺還行，新手絕對能照貓畫虎。

• 標題區(qū)：就用大字寫“順德美食小站”
• 內(nèi)容區(qū)：分兩欄，左邊說吃的，右邊貼景點圖
• 聯(lián)系框：放個“歡迎反饋”的提示詞

然后動手寫代碼

打開編輯器，我腦瓜一熱就直接敲了。一開始用亂七八糟的工具，結(jié)果頁面一跑就裂開了。查了半天，才發(fā)現(xiàn)是逗號亂點的毛病。我就重頭來，老老實實寫基礎(chǔ)結(jié)構(gòu)：標題用大號字，內(nèi)容用規(guī)整分塊，圖片大小調(diào)固定。再塞點文字，比如“順德魚頭湯真絕了”。寫完后，試了好幾遍，瀏覽器總算沒崩。

測試修修補補

我在自己手機上看了下，內(nèi)容區(qū)擠成一團了。我一邊罵罵咧咧一邊改，把兩欄改成單行滾動。再找朋友幫忙看看，他笑說聯(lián)系框太小。我就調(diào)寬點，顏色改醒目。測試完花了小一天，修了十幾個小bug，新手搞這個肯定折騰，但磨下來就順了。

收尾上線

整完代碼，我就本地存了文件。本想發(fā)布上網(wǎng)，但一想新手沒必要搞那么遠。直接打包給幾個熟人分享，他們看了能看懂，還點贊說“真夠糙的，但一學就會”。這活算成了，新手要照這步走，肯定不翻車。