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

最近、バックグラウンド管理テンプレートのセットが必要になり、オンラインで検索しました。確かにたくさんのテンプレートがありましたが、私に合ったものはあまりありませんでした。必要なテンプレートは大きすぎず、コードを制御でき、スタイルが単純すぎず、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>

4. 共通テーブルスタイル

後でリスト情報を表示するにはテーブルを使用する方が便利で、幅も%比率で表示され、各ページにコピーすると調和が取れます。それに統合されています。操作表示もアイコンで分かりやすくなっています。

5. CSS3 ボタン

私は、CSS3 を使用してボタン効果を作成してみたいとずっと思っていましたが、今回はついにその機会が得られ、いくつかの変更を加えて、互換性のあるブラウザを構築しました。 。

効果は確かに良いのですが、CSS3 と互換性のない IE8 などのブラウザでも同様の効果を実現するために、CSS コードが突然大幅に増加しました。 -現代化で。ええええええ

これもこのスタイルモジュールに追加されています。

tests フォルダーの下に、将来を作るための単体テスト モジュールを追加しましたJS スクリプト コードがより堅牢になりました。

上記の分解モジュールを通じて、基本的にバックエンド管理の各部分のスタイルのニーズを満たすことができ、変更可能な管理テンプレートのセットを用意することもできます。

デモのダウンロード:

http://download.csdn.net/download/loneleaf1/7711311

参考資料:

http://medialoot.com/preview/admin-template/index.html Webバックエンドテンプレート

http://webdesign.tutsplus.com/tutorials/orman-clarks-chunky-3d-web-buttons-the-css3-version--webdesign-5731 ボタン制作

http://icomoon.io/ 自分で作るアイコン🎜🎜🎜

このウェブサイトの声明

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