HTMLはシンプルで美しいログインページを作成します

HTMLはシンプルで美しいログインページを作成します

まずは見てみましょう。

HTML ソースコード:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "ja" >   
  3. <ヘッド>   
  4.      <メタ 文字セット= "UTF-8" >   
  5.      < title >ログイン</ title >   
  6.      <リンク  rel = "スタイルシート"  タイプ= "テキスト/css"   href = "ログイン.css" />   
  7. </ヘッド>   
  8. <本文>   
  9.      < div   id = "ログイン" >   
  10.          < h1 >ログイン</ h1 >   
  11.          <フォーム メソッド= "投稿" >   
  12.              <入力 タイプ= "テキスト"   required = "必須"  プレースホルダー= "ユーザー名"  名前= "u" > </入力>   
  13.              <入力 タイプ= "パスワード"   required = "必須"  プレースホルダー= "パスワード"  名前= "p" > </入力>   
  14.              <ボタン クラス= "しかし"   type = "submit" >ログイン</ button >   
  15.          </フォーム>   
  16.      </div>​​   
  17. </本文>   
  18. </html>​​   

CSSコード:

CSSコードコンテンツをクリップボードにコピー
  1. html{
  2.     幅: 100%;
  3.     高さ: 100%;
  4.     オーバーフロー:非表示;
  5.     フォントスタイル:サンセリフ;
  6. }
  7. 体{
  8.     幅: 100%;
  9.     高さ: 100%;
  10.     フォントファミリー: 'Open Sans' 、サンセリフ;
  11.     マージン:0;
  12.     背景色: #4A374A ;
  13. }
  14. ＃ログイン{
  15.     位置:絶対;
  16.     上位：50%
  17.     残り：50%
  18.     マージン: - 150px 0 0 - 150px ;
  19.     幅: 300px ;
  20.     高さ: 300px ;
  21. }
  22. #ログインh1{
  23.     色: #fff ;
  24.     テキストシャドウ:0 0 10px ;
  25.     文字間隔: 1px ;
  26.     テキスト配置:中央;
  27. }
  28. h1{
  29.     フォントサイズ: 2em;
  30.     マージン: 0.67em 0;
  31. }
  32. 入力{
  33.     幅: 278px ;
  34.     高さ: 18px ;
  35.     下マージン: 10px ;
  36.     アウトライン：なし;
  37.     パディング: 10px ;
  38.     フォントサイズ: 13px ;
  39.     色: #fff ;
  40.     テキストシャドウ: 1px   1ピクセル  1ピクセル;
  41.     上ボーダー: 1px  固体 翻訳:
  42.     左ボーダー: 1px  固体 翻訳:
  43.     右ボーダー: 1px  固体 翻訳:
  44.     下ボーダー: 1px  固体 翻訳:
  45.     境界線-半径: 4px ;
  46.     背景色: #2D2D3F ;
  47. }
  48. 。しかし{
  49.     幅: 300px ;
  50.     最小高さ: 20px ;
  51.     表示:ブロック;
  52.     背景色: #4a77d4 ;
  53.     境界線: 1ピクセル 固体 翻訳:
  54.     色: #fff ;
  55.     パディング: 9px   14ピクセル;
  56.     フォントサイズ: 15px ;
  57.     行の高さ:通常;
  58.     境界線-半径: 5px ;
  59.     マージン:0;
  60. }

要約:

コードをコピー
コードは次のとおりです。
<input type="text" required="必須" **placeholder="ユーザー名"** name="u"></input>
<input type="password" required="必須" **placeholder="password"** name="p"></input>

placeholder="ユーザー名" の役割: placeholder

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。

<<:  LinuxにNginxをインストールする詳細な手順

>>:  MySQL の遅いクエリを見つける方法

推薦する

画面なしで無線ネットワークに接続しているときに Raspberry Pi の IP アドレスを見つける方法

あなたがlinuxerだと仮定すると、 windowserだとは想定しません。Windows ユーザ...

MySQL でテーブルスペースの断片化を解消する詳細な例

MySQL でテーブルスペースの断片化を解消する詳細な例断片化の原因（1）テーブルのストレージは断片...

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...

jQuery は、画像を切り替えるための左ボタンと右ボタンのクリックを実装します。

この記事では、左ボタンと右ボタンをクリックすることで画像を切り替えるjQueryの具体的なコードを例...

ポップアップ効果を実現するにはjsを使用します

この記事の例では、ポップアップ効果を実現するためのjsの具体的なコードを参考までに共有しています。具...

MySQL グラフィカル管理ツール Navicat のインストール手順

目次序文1. 全員にインストールパッケージを用意する2. Navicatをインストールし、Navic...

Docker コンテナのログを表示およびクリーンアップする方法 (テスト済みで効果的)

1. 問題Docker コンテナのログにより、ホストのディスク領域がいっぱいになりました。 doc...

VMware14 に CentOS 7 をインストールするグラフィック チュートリアル

CentOS の紹介CentOS は、Red Hat Linux が提供する無料で利用できるソースコ...

Tomcatc3p0 で jnid データ ソースを構成する 2 つの実装方法の分析

c3p0の使用c3p0jarパッケージをインポートする <!-- https://mvnrep...

10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ

Docker は 2013 年のリリース以来、広く注目され、ソフトウェア業界を変える可能性を秘めてい...

MySQL の時間保持問題に関する簡単な分析

MySQL のデフォルトの時間タイプ (datetime と timestamp) の精度は秒です。...

フレックスレイアウトにおける画像変形の解決策の詳細な説明

フレックス レイアウトは現在よく使用されるレイアウト方法ですが、場合によっては小さな問題が発生するこ...

CSS はスクロールバーを非表示にしてコンテンツをスクロールする効果を実現します (3 つの方法)

フロントエンド開発では、スクロールバーを非表示にしながらスクロールをサポートしなければならないという...

Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル

1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...

Vueのキーボードイベントの詳細な説明

目次共通キーエイリアスエイリアスが指定されていないキーシステム修飾キーカスタムキーエイリアス要約する...