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

時間 2019-12-12

原文原文鏈接

在家修養了大半年，終於要開始找工做了！由於身體的緣由，想着仍是在這個小市區找吧，畢竟離家裏人近一點。看了一下本地的論壇與招聘網站，大概也就兩三家招前端，要麼是設計切圖一塊兒作，要麼是切圖，對於javascript的要求基本沒有。儘管如此，我仍是抱着散心的目的，去了其中一家面試。javascript

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

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

填好之後，就直接開始聊了，老闆一邊聊一邊看簡歷內容。我大概說了我之前作些什麼、用哪些技術、有那些能力之類的，然而並無什麼卵用，「咱們這個呢，一般都是但願面試者能夠現場作一些東西來看看水平的，不知道你願不肯意呢？"老闆直接略過個人自我簡介問道。我我的是不喜歡作這個的，若是是幾個考題的話，卻是挺有興趣，可是我沒有拒絕，老老實實等着他發PS稿件給我。html

大概PSD稿件結構是這樣的：前端

要求：IE7+以及其餘主流瀏覽器（桌面端）java

考慮：要作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>