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

在家修养了大半年，终于要开始找工作了！因为身体的原因，想着还是在这个小市区找吧，毕竟离家里人近一点。看了一下本地的论坛与招聘网站，大概也就两三家招前端，要么是设计切图一起做，要么是切图，对于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！~~~

转载于:https://www.cnblogs.com/gradolabs/p/4799471.html

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

文本框和按钮对不齐的两种解决方式html
方式一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
html文本框与按钮对不齐，不能挨一起的问题
文本框和按钮利用flex布局横向排列后两个问题 1.文本框.按钮没有对齐 2.文本框.按钮没有贴在一起问题1:文本框.按钮没有对齐解决办法: (1)给文本框添加vertical-align: bo ...
一、文本框和按钮不对齐现象(高度得设置一样)
一.文本框和按钮不对齐现象(高度得设置一样) input 设置左浮动 (float:left). 取消input 默认的2px边框和上下1px内边距设置1px的边框设置高 button设置高度比 ...
前端学习（1980）vue之电商管理系统电商系统之实现文本框和按钮的切换
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
html的文本框、按钮美化
input框和按钮美化 input框美化按钮美化有时候一些后端人员,想写一个简单的表单验证的时候,前端美化问题是一个非常头疼的问题,我们直接用html的input标签和按钮会非常丑,这时候我们可以 ...
【Android开发】文本框、按钮、文本编辑框、提交登录、单选框
程序中用到的图标,可以到EasyIcon去下载,样式和大小都比较全界面功能目录结构样式浏览 Main java代码 package com.hanquan.helloworld;import a ...
【转】走进windows编程的世界-----对话框、文本框、按钮
一.对话框 1 对话框的分类 2 对话框的基本使用方式 3 对话框资源 4 有模式对话框的使用 int DialogBox( HINSTANCE hInstance, LPCTSTR lpTemp ...
html文本框带按钮代码,HTML Input Button value用法及代码示例
HTML DOM中的DOM输入按钮值属性用于设置或返回Button字段的value属性的值. value属性指定在Button上显示的文本. 用法: 它返回value属性.buttonObject.v ...
设计的界面如下图所示：窗体的标题栏显示“模拟计算器—江海大”，1个文本框用于显示输入字符和计算结果；20个按钮控件作为字符输入按键或者功能按键。
(2)计算功能:实现加.减.乘.除等双目运算,开平方.百分数等单目运算: (3)辅助功能:按钮"C"清空文本框:按钮"←"退格,删除文本框中最右边的一个字符. ...

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

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

最新文章

热门文章