バックグラウンド管理HTML一式 template_html/css_WEB-ITnose-htmlチュートリアル-php.cn

バックグラウンド管理HTML一式 template_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:00:42

オリジナル

1251 人が閲覧しました

最近、バックグラウンド管理テンプレートのセットが必要になり、オンラインで検索しました。確かにたくさんのテンプレートがありましたが、私に合ったものはあまりありませんでした。必要なテンプレートは大きすぎず、コードを制御でき、スタイルが単純すぎず、CSS3 効果があることが最適です。ようやくホームページを見つけたので、それをもとに他の背景部分を編集しました。初めてこのスタイルを見たとき、とても満足しました。これで、ログインページ、ホームページ、メニュー管理ページ、メニュー追加ページの 4 ページだけが作成されました。

ブラウザの互換性とは、可能な限りIE8以降で使用できることを意味し、Firefox、Chromeブラウザなどは完全に互換性があります。 IE8はCSS3を解析できないため、ところどころ追加のCSSが生成されます。次のコードは完全なコードではありません。完全なコードについては、ダウンロードしたデモを参照してください。

1. このページでは HTML5 と CSS3 が多用されています

私の html5 に対する理解は常に表面的で想像力に欠けていましたが、今回このテンプレートページを通して、これらのタグがどのような場合に適しているのかについて詳しく学ぶことができました。使用。セレクターもいろんなところで使われていて、視野が広がりました。左の列の小さなアイコンは、もともと img で表示されていましたが、icoon の Web サイトから直接入手できるアイコンフォントに変更しました。アイコンフォントを使用すると、スタイルとサイズを簡単に制御できます。

<header id="header">        <hgroup>            <h1 class="site_title"><a href="index.html">Website Admin</a></h1>            <h2 class="section_title">Dashboard</h2><div class="btn_view_site"><a href="http://www.cnblogs.com/strick/">View Site</a></div>        </hgroup>    </header>

ログイン後にコピー

.quick_search input[type=text] {-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;border: 1px solid #bbb;height: 26px;width: 90%;color: #ccc;-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;text-indent: 30px;background: #fff url(../images/icn_search.png) no-repeat;background-position: 10px 6px;}

ログイン後にコピー

2. 幅に % 比率を使用すると、再利用するのに便利です

今回のテンプレートのセットはすべて、幅の設定に % を使用しています。テンプレートはホームページのみを提供し、ログインページは後で追加します。この部分は最外層の幅を定義する部分で、内側はエイリアシングなしでパーセンテージに従って表示されるため、コードを修正する必要はありません。

<div class="w500 mc ovh">        <section id="main" >            <article class="module width_full">                <header><h3>登录</h3></header>            </article>        </section>    </div>

ログイン後にコピー

を追加するだけで、ページレイアウトが完成します。

3. 一般的で美しいヒント

このヒントをコピーするだけで済みます。コードは非常に簡潔で、スタイルは非常に見やすくなっています。

<h4 class="alert_info">Welcome to the free MediaLoot admin panel template, this could be an informative message.</h4><h4 class="alert_warning">A Warning Alert</h4><h4 class="alert_error">An Error Message</h4><h4 class="alert_success">A Success Message</h4>

ログイン後にコピー