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 の遅いクエリを見つける方法

推薦する

VMware仮想マシンブリッジによるインターネット相互接続を実現する方法

VMware をインストールして新しい仮想マシンを作成したら、オプション バーの [編集] - [仮...

DockerにMinIOをインストールするための詳細な手順

目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...

CentOS7.5 MySQLのインストールチュートリアル

1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

MySQLがサブクエリと結合の使用を推奨しない理由

ページ分割されたクエリを実行するには: 1. MySQL の場合、サブクエリと結合の使用は推奨されま...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

Centos7でポートを開く方法

CentOS7 のデフォルトのファイアウォールは iptables ではなく、firewalle で...

Vue は左右のスライド効果のサンプルコードを実装します

序文個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人...

MySQL 高可用性クラスタの展開とフェイルオーバーの実装

目次1. 内閣府1. コンセプト2. MHAの構成3. MHAの特徴2. MySQL+MHAをビルド...

ハイパーリンクの表示と開き方

<br />関連記事: ハイパーリンクを表示して開く方法症状<br />ユー...

モバイル端末におけるビューポートの具体的な使用法についての簡単な説明

目次1. 基本概念1.1 2種類のピクセル1.2 3つのビューポート2. ビューポート設定3. 1回...

MySQLのCOUNT(*)のパフォーマンスについてお話しましょう

序文基本的に、職場のプログラマーは、count(*)、count(1)、または count(prim...

DockerでKafkaをデプロイする方法

目次1. Dockerをビルドする2. コンテナに入る3. 設定ファイルを変更する4. Kafkaを...

Docker メモリ監視とストレステストの方法

起動していたDockerコンテナはメモリを使い果たした状態になっており、再起動せずにコンテナのメモリ...

MySQLクエリ最適化に必須の知識ポイントのまとめ

序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...