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

推薦する

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

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

MySQL がデュアルマスターで構成されている場合にデータループの競合を回避する方法

あなたはこの質問について考えたことがあるでしょうか?デュアルアクティブが構成されている場合、データル...

Vue バックグラウンドでステータス ラベルをエレガントに記述する例

目次序文最適化変数の抽出二次包装 el-tag コンポーネント使用要約する序文バックエンドシステムの...

MySQL 8.0 以降の一般的なコマンドの詳細な説明

リモートアクセスを有効にする次のコマンドを実行して、root ユーザーのリモート アクセス権を有効に...

JavaScript の onblur および onfocus イベントの詳細な説明

HTML ページでは、ボタンやテキスト ボックスなどの視覚要素にフォーカスを設定したり、フォーカスを...

Linux での SSH 非秘密通信の実装

SSHとは何か管理者はリモートでログインして、インターネット経由で接続されたさまざまな場所にある複数...

Vueはechartsに基づいて3次元の縦棒グラフを実装します

3次元縦棒グラフは、正面、右側、上部の3つの部分で構成されています。描画するときは、正面をグラフィッ...

MySQL ファントムリードとその排除方法の詳細な説明

目次トランザクション分離レベルファントムリーディングとは何ですか?ファントムリードを排除する方法要約...

JavaScriptを使用してSMS認証コード間隔を送信する機能を実装する

多くのアプリやウェブサイトでは、ログインやアカウント登録の際にSMS認証コード1を送信する場所があり...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

あなたのウェブサイトはIE8に適していますか?

オリンピック期間中にIE8ベータ2がリリースされ、英語版のリリースに合わせて中国語版も第一波でリリー...

MySQLクエリトランザクション処理へのノード接続の実装

目次トピックmysqlの追加、削除、変更、クエリを入力しますMySQL トランザクション処理私は M...

すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください

各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。外国人が書いた記事: 美しい HT...

JavaScript で Priority Queue を実装する

目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...