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

推薦する

Windows 10 に Ubuntu 20.04 デュアル システムをインストールする詳細なグラフィック チュートリアル

win10 + Ubuntu 20.04 LTS デュアルシステムインストール (UEFI + GP...

MycliはMySQLコマンドライン愛好家にとって必須のツールです

マイクリMyCLI は、自動補完と構文の強調表示を備えた MySQL、MariaDB、および Per...

Linuxで新しいユーザーを作成し、指定されたディレクトリへの権限を付与する

1 ユーザーを作成し、ユーザーのルートパスとパスワードを指定します useradd -d /home...

組み込み移植 docker エラー問題 (概要)

長い移植と情報検索の期間を経て、組み込みDockerの問題を解決することができました。インターネット...

Dockerコンテナ内でホストDocker操作を呼び出して実行する

まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...

PHP の問題により、Zabbix モニタリングでグラフィカル インターフェイスに中国語の文字化けが発生する問題を解決する方法

PHP のコンパイル時に -enable-gd-jis-conv オプションを追加することで発生する...

Linuxのdateコマンドの使用

1. コマンドの紹介date コマンドは、現在の時刻または指定された時刻を指定された形式で表示するた...

純粋なJSを使用してセカンダリメニュー効果を実現します

この記事の例では、セカンダリメニュー効果を実現するためのJSの具体的なコードを参考までに共有していま...

Vueでアイコンをカスタマイズする手順

ant-design-vue は Ali iconfont icons の使用をカスタマイズします\...

衝突検出を実装するためのjs

この記事の例では、衝突検出を実装するためのjsの具体的なコードを参考までに共有しています。具体的な内...

CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...

Vue を使用してパブリック アカウントの Web ページを開発する方法

目次プロジェクトの背景始めるvue-cliでプロジェクトを作成するモバイル適応についてnormali...

Echatsチャートの大画面適応を実装する方法

目次説明する成し遂げるプロジェクトのディレクトリ構造は次のとおりです。効果図は以下のとおりです要約す...

デザイン参考 WordPressウェブサイト構築成功事例

これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...

Linuxプロセスネットワークトラフィック統計の実装プロセス

序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...