html - css+outlook.comのレイアウトに似たフォームの例

Question

誰かがいくつかのサンプル、またはoutlook.comのログインページと同様の効果を再現するためのcssクラスを生成するための例を提供することで助けてもらえますか？

ページが一元化され、2つに分割されている場合、左側には画像が含まれ、右側にはログインフィールドが含まれます

Answer 1

反対派ではなく、Outlookサイトを見てみました。私がソースコードOutlook.comを見たとき、ほとんど投げ出されました：

そして彼らのCSSはうまくいっています...自分の目で確かめてください。

私がすることは、事前定義された幅の2つの列を持つページを作成することです（この場合は絶対値を使用できます）。したがって、ピクセル単位の列幅のクラスであり、これを2つのセクションに割り当てます。1つは画像を特徴とし、もう1つはログイン/その他すべてを特徴とします。ページのサイズを小さくする場合は、一方が他方の下に表示されるはずです。これは、優れた劣化です。

CSSを使用せずに画像とログインボックスを作成し、ログインボックスを画像の中央に配置するように構成することもできますが、これは悪い解決策であり、非推奨のコードを使用していることは確かです。