in2M网站响应式后台管理页面模板

可用于CRM、电商等系统管理后台。

html5, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3523
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}
audio,
canvas,
progress,
video,
figure {
    line-height: 0;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden],
template {
    display: none;
}
a {
    background-color: transparent;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
a:active,
a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: none;
    /* 1 */
    
    text-decoration: underline;
    /* 2 */
    
    text-decoration: underline dotted;
    /* 2 */
}
b,
strong {
    font-weight: inherit;
    /* 1 */
}
b,
strong {
    font-weight: bolder;
    /* 2 */
}
dfn {
    font-style: italic;
}
h1 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.67em;
    margin-left: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}
mark {
    background: #ff0;
    color: #000;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
    max-width: 100%;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 0 auto 1em;
}
hr {
    box-sizing: content-box;
    /* 1 */
    
    height: 0;
    /* 1 */
    
    overflow: visible;
    /* 2 */
}
pre {
    overflow: auto;
}
/**
 * 1. Correct inheritance and scaling of font-size for preformatted text.
 * 2. Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    /* 1 */
    
    font-size: 1em;
    /* 2 */
}
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button,
input {
    border: none;
    outline: 0;
}
input:focus {
    outline: -moz-focus-ring-color auto 5px;
    outline: -webkit-focus-ring-color auto 5px;
}
button {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
/**
 * Restore focus style in Firefox 4+ (unset by a rule above)
 */

button:-moz-focusring,
input:-moz-focusring {
    outline: 1px dotted ButtonText;
}
input:not(button,
.btn) {
    line-height: normal;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
    color: inherit;
    -webkit-box-shadow: none;
    -webkit-appearance: none !important;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
input[type="text"],
input[type="search"] {
    -webkit-border-radius: 0;
    -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
}
optgroup {
    font-weight: bold;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td,
th {
    padding: 0;
}
address {
    font-style: normal;
    word-wrap: break-word;
}
dl,
ol,
ul {
    margin-top: 0;
    padding-left: 2em;
}
nav ul {
    list-style-type: none;
    padding-left: 0;
}
ol {
    list-style-type: decimal;
}
p {
    margin-top: 0;
}
.demo-wrap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100vh;
    width: 100%;
}
.demo-wrap > * {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
}
body {
    font-family: "Whitney-Medium", "Helvetica Neue", Helvetica, sans-serif !important;
}
.mod-document > header .header-hero .title {
    font-family: "Whitney-Bold", "Helvetica Neue", Helvetica, sans-serif !important;
}
body {
    background-image: url("/uploads/161101/img-banner-PRICING-BLUE-trans.svg"), linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}

HTML

<div class="admin-bar c-white w-100">
        <div class="container flex flex-wrap ai-center jc-between pt-1 sm-jc-center sm-jc-between">
            
            <div class="user-status flex ai-center jc-center mb-1 w-100 sm-jc-start sm-mb-0 sm-w-30">
                <div class="avatar user-avatar mr-sm sm-mr-1"><img class="" src="/uploads/161101/slug-avatar-square.svg" alt="user avatar">
                </div>
                <div class="user-status-text flex flex-wrap flex-d-col ai-start">
                    <div class="status-msg mb-tiny"><span class="user-name">Super Admin</span>
                    </div>
                    <div class="profile-links flex ai-center">
                        <a class="pr-sm" href="#">Dashboard</a>
                        <a href="#">Logout</a>
                    </div>
                </div>
            </div>
            
            <div class="search-form header-search mr-ml-a w-100 mw-15em sm-w-70 sm-mr-0">
                <label class="sr-only" for="search-form">Search</label>
                
                <div class="search-bar flex flex-wrap jc-between">
                    <input class="bor-none" id="search-form" type="search" placeholder="search">
                    <button class="bor-none bg-white c-777" type="submit">
                        <svg class="icon">
                            <use xlink:href="#icon-search"></use>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>

<header class="site-header c-white" role="banner">
        
        <div class="container flex flex-wrap ai-center jc-between pt-pb-1">
            
            <h1 class="site-title"><a href="#">
                <img class="header-logo mw-8em" src="/uploads/161101/in2m-logo-white.svg" alt="in2Marketplace.com"><span class="sr-only">in2Marketplace.com</span></a></h1>
            
            <button id="nav-toggle" class="bg-trans nav-toggle-html" aria-hidden="false" aria-expanded="false">
                <div class="nav-icon"></div>
            </button>
            
            <section class="main-nav scroll-nav flex flex-wrap ai-center jc-center sm-flex-g-1" role="navigation">
                
                <script src="/uploads/161101/responsive-nav.js"></script>
                <nav class="nav-collapse" role="navigation">
                    
                    <div class="admin-bar w-100">
                        <div class="container flex flex-wrap ai-center jc-between pt-pb-1 pr-pl-0 sm-flex-nowrap sm-jc-start">
                            
                            <div class="user-status flex ai-center jc-center mb-1 w-100 sm-jc-start sm-mb-0 sm-w-a">
                                <div class="avatar user-avatar img-1-1-tiny mr-sm x-sm-mr-1"><img class="" src="/uploads/161101/slug-avatar-square.svg" alt="user avatar">
                                </div>
                                <div class="user-status-text flex flex-wrap flex-d-col ai-start">
                                    <div class="status-msg mb-tiny"><span class="user-name">Jenny Salesperson</span>
                                    </div>
                                    <div class="profile-links flex ai-center">
                                        <a class="pr-sm" href="#">Dashboard</a>
                                        <a href="#">Logout</a>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="search-form header-search mr-ml-a mw-20em w-100 sm-mr-0 sm-pl-1 sm-w-a">
                                <label class="sr-only" for="search-form">Search</label>
                                
                                <div class="search-bar flex flex-wrap jc-between">
                                    <input id="search-form" type="search" placeholder="search">
                                    <button class="bg-white c-777" type="submit">
                                        <svg class="icon">
                                            <use xlink:href="#icon-search" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <ul class="list-reset">
                        <li class="nav-cta text-center"><a class="btn-round bg-blue-50 all-caps mr-0 mw-20em pr-pl-1 text-base w-100" href="#">Contact</a>
                        </li>
                        <li class="dropdown">
                            <a href="#">View</a>
                            <ul class="sub-menu">
                                <li><a href="#">Sales Organizations</a>
                                </li>
                                <li><a href="#">Packages & Offers</a>
                                </li>
                                <li><a href="#">Commissions</a>
                                </li>
                                <li><a href="#">Notifications</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#">Setup</a>
                            <ul class="sub-menu">
                                <li><a href="#">Capacity</a>
                                </li>
                                <li><a href="#">Short Codes</a>
                                </li>
                                <li><a href="#">Packages</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#">Create</a>
                            <ul class="sub-menu">
                                <li><a href="#">Super Admin Profile</a>
                                </li>
                                <li><a href="#">Sales Company</a>
                                </li>
                                <li><a href="#">Sales Group</a>
                                </li>
                                <li><a href="#">Sales Person</a>
                                </li>
                                <li><a href="#">Email Templates</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#">Manage</a>
                            <ul class="sub-menu">
                                <li><a href="#">Super Admin Profile</a>
                                </li>
                                <li><a href="#">Sales Company</a>
                                </li>
                                <li><a href="#">Sales Group</a>
                                </li>
                                <li><a href="#">Sales Person</a>
                                </li>
                                <li><a href="#">Retail Customers</a>
                                </li>
                                <li><a href="#">Packages</a>
                                </li>
                                <li>
                                    <a href="#">Email Templates</a>
                                </li>
                            </ul>
                        </li>
                        
                    </ul>
                </nav>
                <script src="/uploads/161101/mobile-nav.js"></script>
            </section>
        </div>
    </header>

</div>

可用于CRM、电商等系统管理后台。

html5, template

编辑器支持Emmet

快捷键

可用于CRM、电商等系统管理后台。

html5, template

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

HTML5 CSS3新奇的响应式皂形网格布局页面模板 | mask-image使用示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：