面试必备：文本框与按钮的最简组合

时间 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>

对里面的搜索按钮与文本框为何要设置这些参数我已经给了详细说明，面试写这个可能用得着，实际项目中的这个搜索功能还可能会有搜索提示、文本框内增长特殊的图形做为搜索扩展、搜索切换、关键字等。

最近在学设计模式，组合模式已经学完了，但是要把组合模式、策略模式以及观察者模式在前端实现MVC却是让我头疼很多，囧rz！~~~