面接に必須: テキスト ボックスとボタンの最も簡単な組み合わせ_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:37:05
オリジナル
1798 人が閲覧しました

半年以上の自宅療養を経て、いよいよ仕事探し開始!健康のことを考えると、家族に近いこの小さな都市部で探した方が良いと思いました。地元のフォーラムや求人サイトを見てみると、フロントエンド開発者を募集しているのはおそらく 2 ~ 3 社だけです。彼らはデザインして図面をカットするか、基本的に JavaScript の要件はありません。それでも、私はリラックスする目的でそのうちの1社に面接に行きました。

百度で場所を見つけてノートに記録し、200元相当のNokiaを追加して出発しました。私は自分が非常にレベルの低い人間であることを知っています...Evernote と Baidu Maps がインストールされた私の「スマートフォン」は父に取り上げられ、今では私の父は意識が低い人間です。病院から遠くない場所にあるので、病院に行くときはいつもその道を通りますが、現実は理想的ではないことがよくあります。番地的には352番に行きたかったのですが、350番を過ぎたら道路の反対側には既に380以上あり、さらに歩いていたら結局400以上でした。無事到着する前に道を尋ねなければなりませんでした。

その会社は 6 人しか働いていないのですが、会社概要をネットで見ると、おそらく全員が休暇中です。上司は30歳くらいで、童顔で、チェック柄のシャツを着て、濃い色のジーンズを履いていました。フォームの内容は広州に比べてかなり少なく、家族の電話番号や職業を記入する箇所はなく、前の会社の上司や電話番号を記入する箇所もありません。唯一の不満は、学歴や職歴の会社名や学校名を記入するセルの幅が、年、月、日のセルほど広くないことです。 。 。

記入後、直接チャットが始まりました。上司は履歴書の内容を見ながらチャットをしました。これまで何をしてきたか、どんな技術を使っていたか、どんな能力を持っていたかなどをざっくり話しましたが、役に立ちませんでした。よろしいでしょうか?」と上司は私の自己紹介を省略して尋ねました。私は個人的にこれをするのは好きではありませんが、ほんの数問のテスト問題であれば、非常に興味があるのですが、断らずに彼が PS 原稿を送ってくるのを待ちました。

PSD 原稿の構造はおおよそ次のとおりです:

要件: IE7+ およびその他の主流ブラウザ (デスクトップ)

考慮事項: SEO、HTTP リクエストの削減、画像の最適化、および HMTL5 が推奨するタグ セマンティクスCSS と HTML の組み合わせ (モジュラー CSS など)。マルチレベルのナビゲーションとタブが必要です。

残念ながら、2時間経っても完成しませんでした。 ?rz

正直に言うと、私は長い間IEのローエンドブラウザの互換性に触れていなかったため、検索機能ブロックを書いているときに小さな問題に遭遇しました:検索ボックスと境界線の境界線スタイルを変更する検索ボタンのスタイルと背景色については、デフォルトのマージンやパディングが少しあるだけで、ハックすれば問題ないのではないかと考えました。私は若すぎて単純すぎます:

わかりました!まずはreset.cssを見つけたほうが良いと思います!結果はまだ良くなかったので、最終的に位置を使用してそれを解決しました~~~~ 戻ってきて自分で理由を探し、次の簡単なバージョンを書きました(上記の4つの環境でのみテストしました):

<!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 ! ~~~

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート