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

推薦する

Mac で MySQL 8.0.22 のパスワードを取得する方法

Mac 最新バージョンの MySQL 8.0.22 パスワード回復問題の説明:昨日、突然、Macで最...

データベースを削除して逃げる？xtraback を使用して MySQL データベースをバックアップする方法

1. mysqldump バックアップ方法では論理バックアップが使用されます。最大の欠点は、バック...

MySQLのUPDATE文の落とし穴を記録する

背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...

MySQLログシステムの使い方に関する簡単なチュートリアル

目次序文1. エラーログ2. バイナリログ1. バイナリログを有効にする2. バイナリログ形式3. ...

Vue+js はビデオのフェードインとフェードアウト効果を実現します

Vue+jsはビデオのフェードインとフェードアウトを実現します。参考までに、具体的な内容は次のとおり...

react-navigation6.xルーティングライブラリの基本的な使い方の詳しい説明

目次react-nativeプロジェクトの初期化react-nativeプロジェクトをインストールす...

JavaScript ドラッグタイム ドラッグケースの詳細な説明

目次DragEvent インターフェースデータ転送インターフェースの概要DataTransfer の...

docker実行時に異なるポートを占有する2つのポートを起動する問題を解決する

問題の説明: docker run -p 19918:19918/tcp -v /etc/local...

Vueでミックスインを使用する方法

目次序文使い方要約する序文Vue にはコードの再利用に使われる mixins という設定項目がありま...

MySQL 5.7 のインストールと設定のチュートリアル

この記事では、参考までにMySQLのインストールと設定のチュートリアルを紹介します。具体的な内容は次...

MySQL クエリ キャッシュとバッファ プール

1. キャッシュ - クエリキャッシュ次の図は、MySQL 公式サイトから提供されています: MyS...

Nginx で WordPress を設定する方法

以前、私は自分で WordPress を構築していましたが、当時はサードパーティの仮想ホストを使用し...

フックを使用して React コンポーネントを書くときに注意すべき 5 つの点

目次01. レンダリングが不要な場合はuseStateを使用する02. リンクの代わりにrouter...

Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

序文tcpdump はよく知られたコマンドライン パケット分析ツールです。 tcpdump コマンド...

Dockerコンテナとローカルマシン間でファイルを転送する方法

ホストとコンテナ間でファイルを転送するには、コンテナの完全な ID が必要です。取得方法は以下の通り...