純粋な CSS_html/css_WEB-ITnose で記述されたログインスタイル-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

純粋な CSS_html/css_WEB-ITnose で記述されたログインスタイル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

シンプルなログインスタイルを設計し、自分のステータスを統合するコードを自分で書きました (HTML と CSS を使用)

まず効果を見てみましょう:

1 HTML コードは次のとおりです。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Login</title>    <link rel="stylesheet" type="text/css" href="css/login.style.css"></head><body><div id="content">    <div class="login-header">        <img  src="/static/imghwm/default1.png"  data-src="assets/images/logo"  class="lazy" alt="純粋な CSS_html/css_WEB-ITnose で記述されたログイン スタイル" >    </div>    <form>        <div class="login-input-box">            <span class="icon icon-user"></span>            <input type="text" placeholder="Please enter your email/phone">        </div>        <div class="login-input-box">            <span class="icon icon-password"></span>            <input type="password" placeholder="Please enter your password">        </div>    </form>    <div class="remember-box">        <label>            <input type="checkbox"> Remember Me        </label>    </div>    <div class="login-button-box">        <button>Login</button>    </div>    <div class="logon-box">        <a href="">Forgot?</a>        <a href="">Register</a>    </div></div></body></html>

2. CSS コードは次のとおりです:

body{    background: url("../assets/images/bg_login.jpg") no-repeat fixed;    /* set background tensile */    background-size: 100% 100%;    -moz-background-size: 100% 100%;    margin: 0;    padding: 0;}#content{    background-color: rgba(255, 255, 255, 0.95);    width: 420px;    height: 300px;    border: 1px solid #000000;    border-radius: 6px;    padding: 10px;    margin-top: 15%;    margin-left: auto;    margin-right: auto;    display: block;}.login-header{    width: 100%;    height: 48px;    margin-bottom: 20px;    border-bottom: 1px solid #dcdcdc;}.login-header img{    width: 120px;    margin-left: auto;    margin-right: auto;    display: block;}.login-input-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-input-box input{    width: 340px;    height: 32px;    margin-left: 18px;    border: 1px solid #dcdcdc;    border-radius: 4px;    padding-left: 42px;}.login-input-box input:hover{    border: 1px solid #ff7d0a;}.login-input-box input:after{    border: 1px solid #ff7d0a;}.login-input-box .icon{    width: 24px;    height: 24px;    margin: 6px 4px 6px 24px;    background-color: #ff7d0a;    display: inline-block;    position: absolute;    border-right: 1px solid #dcdcdc;}.login-input-box .icon.icon-user{    background: url("../assets/images/user.png");}.login-input-box .icon.icon-password{    background: url("../assets/images/password.png");}.remember-box{    width: auto;    height: auto;    margin-left: 18px;    margin-top: 12px;    font-size: 12px;    color: #6a6765;}.login-button-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-button-box button{    background-color: #ff7d0a;    color: #ffffff;    font-size: 16px;    width: 386px;    height: 40px;    margin-left: 18px;    border: 1px solid #ff7d0a;    border-radius: 4px;}.login-button-box button:hover{    background-color: #ee7204;}.login-button-box button:active{    background-color: #ee7204;}.logon-box{    margin-top: 20px;    text-align: center;}.logon-box a{    margin: 30px;    color: #4a4744;    font-size: 13px;    text-decoration: none;}.logon-box a:hover{    color: #ff7d0a;}.logon-box a:active{    color: #ee7204;}

リソースファイルをアップロードできないことがわかりました -_-

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLタグの目的は何ですか？Apr 28, 2025 am 12:02 AM

htmltagsareSterentionforturturingwebpages、EnhinceAccessibility、seo、andporformance.1）theyclosedinagure bracketetsandinginging inpairstocreateahierarchStructure.2）semanticagslikeandimproveuserexperienceandseo.3）

自己閉鎖タグとは何ですか？例を挙げてください。Apr 27, 2025 am 12:04 AM

セルフクロージングのlandxmlareTagstatemtatemsem onedinedingsingaseparateclosingtag、SimmarifiedMarkupStructureanddendingCodingInefciency.1）areEssentionalinforementswithoutcontent、2）

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

See all articles