面試必備:文本框與按鈕的最簡組合


在家修養了大半年,終於要開始找工作了!因為身體的原因,想着還是在這個小市區找吧,畢竟離家里人近一點。看了一下本地的論壇與招聘網站,大概也就兩三家招前端,要么是設計切圖一起做,要么是切圖,對於javascript的要求基本沒有。盡管如此,我還是抱着散心的目的,去了其中一家面試。

百度上找到地理位置,記在我的筆記簿上,加上一個兩百塊的諾基亞就出發了。我知道我很LOW...我那個裝着evernote、百度地圖的“智能”手機已經被我爸拿走了,現在我爸是低頭族。地理位置離醫院倒是不遠,每次去醫院都會經過那條路,然而現實往往是不理想的。按着門牌號,我要去352號,可是經過350號以后,街對面已經是380多號了,再往前走就是400+了,最終還是問路人才順利到達。

公司挺小的,上班的一共才6個人,網上看到公司簡介的時候,是有十幾個人的,也許都休假了吧,畢竟今天是周末 - -。老板大概三十來歲,娃娃臉,格子襯衫加深色牛仔褲,給了我一張簡歷單填寫。單子內容比起廣州那邊的可少多了,沒有地方要填寫家人的電話、職業,也沒有要填寫上一個公司的上司和電話號碼。我唯一的抱怨就是,在教育經歷和工作經歷中填寫公司名字和學校名字的單元格還沒有一個填年月日的單元格寬。。。

填好以后,就直接開始聊了,老板一邊聊一邊看簡歷內容。我大概說了我以前做些什么、用哪些技術、有那些能力之類的,然而並沒有什么卵用,“我們這個呢,通常都是希望面試者可以現場做一些東西來看看水平的,不知道你願不願意呢?"老板直接略過我的自我簡介問道。我個人是不喜歡做這個的,如果是幾個考題的話,倒是挺有興趣,但是我沒有拒絕,老老實實等着他發PS稿件給我。

大概PSD稿件結構是這樣的:

要求:IE7+以及其他主流瀏覽器(桌面端)

考慮:要做SEO、要減少HTTP請求、圖片優化、要有HMTL5推薦的標簽語義化、CSS與HTML的合理組合(比如模塊化CSS),需要多級導航與選項卡。

很遺憾,兩個小時后我並沒有完成。囧rz

老實說,太久沒去碰IE的低端瀏覽器兼容性的東西,讓我在有寫搜索功能塊的時候遇到了一點小問題:修改搜索框的邊框樣式與搜索按鈕的邊框樣式以及背景色,我以為它們可能僅僅會出現一點默認邊距或者內填充然后一個hack就OK了。我too young too simple:

好吧!我看我還是老老實實找個reset.css吧!結果依然不會好,最終我用了position去解決的~~~~回來自己好好找了一下原因,寫了下面這個簡單版(僅在以上四個環境測試過):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*文本框默認使用盒模型content-box,按鈕使用border-box*/
        /*文本框默認有上下padding:1px,所以高度實際是26+2*2+2*1=32px,直接給Btn*/
        /*文本框中的line-height大於高度會發生滾動,為了文本垂直居中請不要超過高度*/
        /*line-height還有其他問題不在此展開*/
        /*文本框在不同瀏覽器中有默認的左右內填充padding,此處統一設置*/
        /*文本框不加vertical在火狐中不能對齊按鈕*/
        .inputSearch {
            border: 2px solid #f08;
            height:26px;
            line-height: 26px;
            width:200px;
            padding-left: 2px;
            padding-right: 2px;
            vertical-align: bottom;
        }
        .inputButton {
            background-color: #f08;
            border: 2px solid #f08;
            height:32px;            
            width:80px;
            font-size:16px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <section>
        <form method="post" action="search.php">
        <input type="text" class="inputSearch" placeholder="please!" /><input type="button" value="search" class="inputButton"/>
        </form>
    </section>
</body>
</html>

對里面的搜索按鈕與文本框為什么要設置這些參數我已經給了詳細說明,面試寫這個可能用得着,實際項目中的這個搜索功能還可能會有搜索提示、文本框內增加特殊的圖形作為搜索擴展、搜索切換、關鍵字等。

最近在學設計模式,組合模式已經學完了,可是要把組合模式、策略模式以及觀察者模式在前端實現MVC倒是讓我頭疼不少,囧rz!~~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM