CSS3网站后台管理模板
来源：网络收集分类：后台模板2021-06-170
- 后台模板编号：20210617184055
- 后台模板分类：后台模板
- 后台模板格式：html/css
- 后台模板关键词： CSS3 后台 模板
-
index_CSS3网站后台管理模板源代码<section> <!-- left side start--> <div class="left-side sticky-left-side"> <!--logo and iconic logo start--> <div class="logo"> <h1><a href="index.html">Easy <span>Admin</span></a></h1> </div> <div class="logo-icon text-center"> <a href="index.html"><i class="lnr lnr-home"></i> </a> </div> <!--logo and iconic logo end--> <div class="left-side-inner"> <!--sidebar nav start--> <ul class="nav nav-pills nav-stacked custom-nav"> <li class="active"><a href="index.html"><i class="lnr lnr-power-switch"></i><span>Dashboard</span></a></li> <li class="menu-list"> <a href="#"> <i class="lnr lnr-cog"></i> <span>Components</span> </a> <ul class="sub-menu-list"> <li><a href="grids.html">Grids</a> </li> <li><a href="widgets.html">Widgets</a></li> </ul> </li> <li><a href="forms.html"><i class="lnr lnr-spell-check"></i> <span>Forms</span></a></li> <li><a href="tables.html"><i class="lnr lnr-menu"></i> <span>Tables</span></a></li> <li class="menu-list"> <a href="#"><i class="lnr lnr-envelope"></i> <span>MailBox</span></a> <ul class="sub-menu-list"> <li><a href="inbox.html">Inbox</a> </li> <li><a href="compose-mail.html">Compose Mail</a></li> </ul> </li> <li class="menu-list"> <a href="#"><i class="lnr lnr-indent-increase"></i> <span>Menu Levels</span></a> <ul class="sub-menu-list"> <li><a href="charts.html">Basic Charts</a> </li> </ul> </li> <li><a href="codes.html"><i class="lnr lnr-pencil"></i> <span>Typography</span></a></li> <li><a href="media.html"><i class="lnr lnr-select"></i> <span>Media Css</span></a></li> <li class="menu-list"> <a href="#"><i class="lnr lnr-book"></i> <span>Pages</span></a> <ul class="sub-menu-list"> <li><a href="sign-in.html">Sign In</a> </li> <li><a href="sign-up.html">Sign Up</a></li> <li><a href="blank_page.html">Blank Page</a></li> </ul> </li> </ul> <!--sidebar nav end--> </div> </div> <!-- left side end--> <!-- main content start--> <div class="main-content"> <!-- header-starts --> <div class="header-section"> <!--toggle button start--> <a class="toggle-btn menu-collapsed"><i class="fa fa-bars"></i></a> <!--toggle button end--> <!--notification menu start --> <div class="menu-right"> <div class="user-panel-top"> <div class="profile_details_left"> <ul class="nofitications-dropdown"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">3</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new messages</h3> </div> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li class="odd"> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <div class="notification_bottom"> <a href="#">See all messages</a> </div> </li> </ul> </li> <li class="login_box" id="loginContainer"> <div class="search-box"> <div id="sb-search" class="sb-search"> <form> <input class="sb-search-input" placeholder="Enter your search term..." type="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"> </span> </form> </div> </div> <!-- search-scripts --> <script src="js/classie.js"></script> <script src="js/uisearch.js"></script> <script> new UISearch(document.getElementById('sb-search')); </script> <!-- //search-scripts --> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">3</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new notification</h3> </div> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li class="odd"> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <div class="notification_bottom"> <a href="#">See all notification</a> </div> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">22</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>You have 8 pending task</h3> </div> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Database update</span><span class="percentage">40%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar yellow" style="width:40%;"></div> </div> </a> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Dashboard done</span><span class="percentage">90%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar green" style="width:90%;"></div> </div> </a> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Mobile App</span><span class="percentage">33%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar red" style="width: 33%;"></div> </div> </a> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Issues fixed</span><span class="percentage">80%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar blue" style="width: 80%;"></div> </div> </a> </li> <li> <div class="notification_bottom"> <a href="#">See all pending task</a> </div> </li> </ul> </li> <div class="clearfix"></div> </ul> </div> <div class="profile_details"> <ul> <li class="dropdown profile_details_drop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <div class="profile_img"> <span style="background:url(images/1.jpg) no-repeat center"> </span> <div class="user-name"> <p>Michael<span>Administrator</span></p> </div> <i class="lnr lnr-chevron-down"></i> <i class="lnr lnr-chevron-up"></i> <div class="clearfix"></div> </div> </a> <ul class="dropdown-menu drp-mnu"> <li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li> <li> <a href="#"><i class="fa fa-user"></i>Profile</a> </li> <li> <a href="sign-up.html"><i class="fa fa-sign-out"></i> Logout</a> </li> </ul> </li> <div class="clearfix"> </div> </ul> </div> <div class="social_icons"> <div class="col-md-4 social_icons-left"> <a href="#" class="yui"><i class="fa fa-facebook i1"></i><span>300<sup>+</sup> Likes</span></a> </div> <div class="col-md-4 social_icons-left pinterest"> <a href="#"><i class="fa fa-google-plus i1"></i><span>500<sup>+</sup> Shares</span></a> </div> <div class="col-md-4 social_icons-left twi"> <a href="#"><i class="fa fa-twitter i1"></i><span>500<sup>+</sup> Tweets</span></a> </div> <div class="clearfix"> </div> </div> <div class="clearfix"></div> </div> </div> <!--notification menu end --> </div> <!-- //header-ends --> <div id="page-wrapper"> <div class="graphs"> <div class="col_3"> <div class="col-md-3 widget widget1"> <div class="r3_counter_box"> <i class="fa fa-mail-forward"></i> <div class="stats"> <h5>45 <span>%</span></h5> <div class="grow"> <p>Growth</p> </div> </div> </div> </div> <div class="col-md-3 widget widget1"> <div class="r3_counter_box"> <i class="fa fa-users"></i> <div class="stats"> <h5>50 <span>%</span></h5> <div class="grow grow1"> <p>New Users</p> </div> </div> </div> </div> <div class="col-md-3 widget widget1"> <div class="r3_counter_box"> <i class="fa fa-eye"></i> <div class="stats"> <h5>70 <span>%</span></h5> <div class="grow grow3"> <p>Visitors</p> </div> </div> </div> </div> <div class="col-md-3 widget"> <div class="r3_counter_box"> <i class="fa fa-usd"></i> <div class="stats"> <h5>70 <span>%</span></h5> <div class="grow grow2"> <p>Profit</p> </div> </div> </div> </div> <div class="clearfix"> </div> </div> <!-- switches --> <div class="switches"> <div class="col-4"> <div class="col-md-4 switch-right"> <div class="switch-right-grid"> <div class="switch-right-grid1"> <h3>TODAY'S STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $400 USD</li> <li>Items Sold: 20 Items</li> <li>Last Hour Sales: $34 USD</li> </ul> </div> </div> <div class="sparkline"> <canvas id="line" height="150" width="480" style="width: 480px; height: 150px;"></canvas> <script> var lineChartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Mon"], datasets: [ { fillColor: "#fff", strokeColor: "#F44336", pointColor: "#fbfbfb", pointStrokeColor: "#F44336", data: [20, 35, 45, 30, 10, 65, 40] } ] }; new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData); </script> </div> </div> <div class="col-md-4 switch-right"> <div class="switch-right-grid"> <div class="switch-right-grid1"> <h3>MONTHLY STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $5,000 USD</li> <li>Items Sold: 400 Items</li> <li>Last Hour Sales: $2,434 USD</li> </ul> </div> </div> <div class="sparkline"> <canvas id="bar" height="150" width="480" style="width: 480px; height: 150px;"></canvas> <script> var barChartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Mon", "Tue", "Wed", "Thu"], datasets: [ { fillColor: "#8BC34A", strokeColor: "#8BC34A", data: [25, 40, 50, 65, 55, 30, 20, 10, 6, 4] }, { fillColor: "#8BC34A", strokeColor: "#8BC34A", data: [30, 45, 55, 70, 40, 25, 15, 8, 5, 2] } ] }; new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData); </script> </div> </div> <div class="col-md-4 switch-right"> <div class="switch-right-grid"> <div class="switch-right-grid1"> <h3>ALLTIME STATS</h3> <p>Duis aute irure dolor in reprehenderit.</p> <ul> <li>Earning: $80,000 USD</li> <li>Items Sold: 8,000 Items</li> <li>Last Hour Sales: $75,434 USD</li> </ul> </div> </div> <div class="sparkline"> <!--graph--> <link rel="stylesheet" href="css/graph.css"> <script src="js/jquery.flot.min.js"></script> <!--//graph--> <script> $(document).ready(function () { // Graph Data ############################################## var graphData = [{ // Returning Visits data: [[4, 4500], [5, 3500], [6, 6550], [7, 7600], [8, 4500], [9, 3500], [10, 6550],], color: '#FFCA28', points: { radius: 7, fillColor: '#fff' } } ]; // Lines Graph ############################################# $.plot($('#graph-lines'), graphData, { series: { points: { show: true, radius: 1 }, lines: { show: true }, shadowSize: 0 }, grid: { color: '#fff', borderColor: 'transparent', borderWidth: 10, hoverable: true }, xaxis: { tickColor: 'transparent', tickDecimals: false }, yaxis: { tickSize: 1200 } }); // Graph Toggle ############################################ $('#graph-bars').hide(); $('#lines').on('click', function (e) { $('#bars').removeClass('active'); $('#graph-bars').fadeOut(); $(this).addClass('active'); $('#graph-lines').fadeIn(); e.preventDefault(); }); $('#bars').on('click', function (e) { $('#lines').removeClass('active'); $('#graph-lines').fadeOut(); $(this).addClass('active'); $('#graph-bars').fadeIn().removeClass('hidden'); e.preventDefault(); }); }); </script> <div id="graph-wrapper"> <div class="graph-container"> <div id="graph-lines"> </div> <div id="graph-bars"> </div> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div> <!-- //switches --> <div class="col_1"> <div class="col-md-4 span_8"> <div class="activity_box"> <h3>Inbox</h3> <div class="scrollbar scrollbar1" id="style-2"> <div class="activity-row"> <div class="col-xs-3 activity-img"><img src='images/1.png' class="img-responsive" alt="" /></div> <div class="col-xs-7 activity-desc"> <h5><a href="#">John Smith</a></h5> <p>Hey ! There I'm available.</p> </div> <div class="col-xs-2 activity-desc1"><h6>13:40 PM</h6></div> <div class="clearfix"> </div> </div> <div class="activity-row"> <div class="col-xs-3 activity-img"><img src='images/5.png' class="img-responsive" alt="" /></div> <div class="col-xs-7 activity-desc"> <h5><a href="#">Andrew Jos</a></h5> <p>Hey ! There I'm available.</p> </div> <div class="col-xs-2 activity-desc1"><h6>13:40 PM</h6></div> <div class="clearfix"> </div> </div> <div class="activity-row"> <div class="col-xs-3 activity-img"><img src='images/3.png' class="img-responsive" alt="" /></div> <div class="col-xs-7 activity-desc"> <h5><a href="#">Adom Smith</a></h5> <p>Hey ! There I'm available.</p> </div> <div class="col-xs-2 activity-desc1"><h6>13:40 PM</h6></div> <div class="clearfix"> </div> </div> <div class="activity-row"> <div class="col-xs-3 activity-img"><img src='images/4.png' class="img-responsive" alt="" /></div> <div class="col-xs-7 activity-desc"> <h5><a href="#">Peter Carl</a></h5> <p>Hey ! There I'm available.</p> </div> <div class="col-xs-2 activity-desc1"><h6>13:40 PM</h6></div> <div class="clearfix"> </div> </div> <div class="activity-row"> <div class="col-xs-3 activity-img"><img src='images/1.png' class="img-responsive" alt="" /></div> <div class="col-xs-7 activity-desc"> <h5><a href="#">John Smith</a></h5> <p>Hey ! There I'm available.</p> </div> <div class="col-xs-2 activity-desc1"><h6>13:40 PM</h6></div> <div class="clearfix"> </div> </div> </div> </div> </div> <div class="col-md-4 span_8"> <div class="activity_box activity_box1"> <h3>chat</h3> <div class="scrollbar" id="style-2"> <div class="activity-row activity-row1"> <div class="col-xs-3 activity-img"><img src='images/1.png' class="img-responsive" alt="" /><span>10:00 PM</span></div> <div class="col-xs-5 activity-img1"> <div class="activity-desc-sub"> <h5>John Smith</h5> <p>Hello !</p> </div> </div> <div class="col-xs-4 activity-desc1"></div> <div class="clearfix"> </div> </div> <div class="activity-row activity-row1"> <div class="col-xs-2 activity-desc1"></div> <div class="col-xs-7 activity-img2"> <div class="activity-desc-sub1"> <h5>Adom Smith</h5> <p>Hi,How are you ? What about our next meeting?</p> </div> </div> <div class="col-xs-3 activity-img"><img src='images/3.png' class="img-responsive" alt="" /><span>10:02 PM</span></div> <div class="clearfix"> </div> </div> <div class="activity-row activity-row1"> <div class="col-xs-3 activity-img"><img src='images/1.png' class="img-responsive" alt="" /><span>10:00 PM</span></div> <div class="col-xs-5 activity-img1"> <div class="activity-desc-sub"> <h5>John Smith</h5> <p>Yeah fine</p> </div> </div> <div class="col-xs-4 activity-desc1"></div> <div class="clearfix"> </div> </div> <div class="activity-row activity-row1"> <div class="col-xs-2 activity-desc1"></div> <div class="col-xs-7 activity-img2"> <div class="activity-desc-sub1"> <h5>Adom Smith</h5> <p>Wow that's great</p> </div> </div> <div class="col-xs-3 activity-img"><img src='images/3.png' class="img-responsive" alt="" /><span>10:02 PM</span></div> <div class="clearfix"> </div> </div> </div> <form> <input type="text" value="Enter your text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your text';}" required=""> <input type="submit" value="Send" required="" /> </form> </div> </div> <div class="col-md-4 span_8"> <div class="activity_box activity_box2"> <h3>todo</h3> <div class="scrollbar" id="style-2"> <div class="activity-row activity-row1"> <div class="single-bottom"> <ul> <li> <input type="checkbox" id="brand" value=""> <label for="brand"><span></span> Sunt in culpa qui officia.</label> </li> <li> <input type="checkbox" id="brand1" value=""> <label for="brand1"><span></span> Fugiat quo voluptas nulla.</label> </li> <li> <input type="checkbox" id="brand2" value=""> <label for="brand2"><span></span> Dolorem eum.</label> </li> <li> <input type="checkbox" id="brand9" value=""> <label for="brand9"><span></span> Pain that produces no resultant.</label> </li> <li> <input type="checkbox" id="brand8" value=""> <label for="brand8"><span></span> Cupidatat non proident.</label> </li> <li> <input type="checkbox" id="brand7" value=""> <label for="brand7"><span></span> Praising pain was born.</label> </li> <li> <input type="checkbox" id="brand3" value=""> <label for="brand3"><span></span> Computer & Electronics</label> </li> <li> <input type="checkbox" id="brand4" value=""> <label for="brand4"><span></span> Dolorem ipsum quia.</label> </li> <li> <input type="checkbox" id="brand5" value=""> <label for="brand5"><span></span> Consequatur aut perferendis.</label> </li> <li> <input type="checkbox" id="brand6" value=""> <label for="brand6"><span></span> Dolorem ipsum quia.</label> </li> </ul> </div> </div> </div> <form> <input type="text" value="Enter your text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your text';}" required=""> <input type="submit" value="Submit" required="" /> </form> </div> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> </div> </div> <!--body wrapper start--> </div> <!--body wrapper end--> </div> <!--footer section start--> <footer> <p>Copyright © 2015.Company name All rights reserved.<a target="_blank" href="#">网页模板</a></p> </footer> <!--footer section end--> <!-- main content end--> </section>43521 -
charts_CSS3网站后台管理模板源代码<section> <!-- left side start--> <div class="left-side sticky-left-side"> <!--logo and iconic logo start--> <div class="logo"> <h1><a href="index.html">Easy <span>Admin</span></a></h1> </div> <div class="logo-icon text-center"> <a href="index.html"><i class="lnr lnr-home"></i> </a> </div> <!--logo and iconic logo end--> <div class="left-side-inner"> <!--sidebar nav start--> <ul class="nav nav-pills nav-stacked custom-nav"> <li><a href="index.html"><i class="lnr lnr-power-switch"></i><span>Dashboard</span></a></li> <li class="menu-list"> <a href="#"> <i class="lnr lnr-cog"></i> <span>Components</span> </a> <ul class="sub-menu-list"> <li><a href="grids.html">Grids</a> </li> <li><a href="widgets.html">Widgets</a></li> </ul> </li> <li><a href="forms.html"><i class="lnr lnr-spell-check"></i> <span>Forms</span></a></li> <li><a href="tables.html"><i class="lnr lnr-menu"></i> <span>Tables</span></a></li> <li class="menu-list"> <a href="#"><i class="lnr lnr-envelope"></i> <span>MailBox</span></a> <ul class="sub-menu-list"> <li><a href="inbox.html">Inbox</a> </li> <li><a href="compose-mail.html">Compose Mail</a></li> </ul> </li> <li class="menu-list act"> <a href="#"><i class="lnr lnr-indent-increase"></i> <span>Menu Levels</span></a> <ul class="sub-menu-list"> <li><a href="charts.html">Basic Charts</a> </li> </ul> </li> <li><a href="codes.html"><i class="lnr lnr-pencil"></i> <span>Typography</span></a></li> <li><a href="media.html"><i class="lnr lnr-select"></i> <span>Media Css</span></a></li> <li class="menu-list"> <a href="#"><i class="lnr lnr-book"></i> <span>Pages</span></a> <ul class="sub-menu-list"> <li><a href="sign-in.html">Sign In</a> </li> <li><a href="sign-up.html">Sign Up</a></li> <li><a href="blank_page.html">Blank Page</a></li> </ul> </li> </ul> <!--sidebar nav end--> </div> </div> <!-- left side end--> <!-- main content start--> <div class="main-content main-content5"> <!-- header-starts --> <div class="header-section"> <!--toggle button start--> <a class="toggle-btn menu-collapsed"><i class="fa fa-bars"></i></a> <!--toggle button end--> <!--notification menu start --> <div class="menu-right"> <div class="user-panel-top"> <div class="profile_details_left"> <ul class="nofitications-dropdown"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-envelope"></i><span class="badge">3</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new messages</h3> </div> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li class="odd"> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <div class="notification_bottom"> <a href="#">See all messages</a> </div> </li> </ul> </li> <li class="login_box" id="loginContainer"> <div class="search-box"> <div id="sb-search" class="sb-search"> <form> <input class="sb-search-input" placeholder="Enter your search term..." type="search" id="search"> <input class="sb-search-submit" type="submit" value=""> <span class="sb-icon-search"> </span> </form> </div> </div> <!-- search-scripts --> <script src="js/classie.js"></script> <script src="js/uisearch.js"></script> <script> new UISearch(document.getElementById('sb-search')); </script> <!-- //search-scripts --> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-bell"></i><span class="badge blue">3</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>You have 3 new notification</h3> </div> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet</p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li class="odd"> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <a href="#"> <div class="user_img"><img src="images/1.png" alt=""></div> <div class="notification_desc"> <p>Lorem ipsum dolor sit amet </p> <p><span>1 hour ago</span></p> </div> <div class="clearfix"></div> </a> </li> <li> <div class="notification_bottom"> <a href="#">See all notification</a> </div> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-tasks"></i><span class="badge blue1">22</span></a> <ul class="dropdown-menu"> <li> <div class="notification_header"> <h3>You have 8 pending task</h3> </div> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Database update</span><span class="percentage">40%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar yellow" style="width:40%;"></div> </div> </a> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Dashboard done</span><span class="percentage">90%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar green" style="width:90%;"></div> </div> </a> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Mobile App</span><span class="percentage">33%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar red" style="width: 33%;"></div> </div> </a> </li> <li> <a href="#"> <div class="task-info"> <span class="task-desc">Issues fixed</span><span class="percentage">80%</span> <div class="clearfix"></div> </div> <div class="progress progress-striped active"> <div class="bar blue" style="width: 80%;"></div> </div> </a> </li> <li> <div class="notification_bottom"> <a href="#">See all pending task</a> </div> </li> </ul> </li> <div class="clearfix"></div> </ul> </div> <div class="profile_details"> <ul> <li class="dropdown profile_details_drop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <div class="profile_img"> <span style="background:url(images/1.jpg) no-repeat center"> </span> <div class="user-name"> <p>Michael<span>Administrator</span></p> </div> <i class="lnr lnr-chevron-down"></i> <i class="lnr lnr-chevron-up"></i> <div class="clearfix"></div> </div> </a> <ul class="dropdown-menu drp-mnu"> <li> <a href="#"><i class="fa fa-cog"></i> Settings</a> </li> <li> <a href="#"><i class="fa fa-user"></i>Profile</a> </li> <li> <a href="sign-up.html"><i class="fa fa-sign-out"></i> Logout</a> </li> </ul> </li> <div class="clearfix"> </div> </ul> </div> <div class="social_icons"> <div class="col-md-4 social_icons-left"> <a href="#" class="yui"><i class="fa fa-facebook i1"></i><span>300<sup>+</sup> Likes</span></a> </div> <div class="col-md-4 social_icons-left pinterest"> <a href="#"><i class="fa fa-google-plus i1"></i><span>500<sup>+</sup> Shares</span></a> </div> <div class="col-md-4 social_icons-left twi"> <a href="#"><i class="fa fa-twitter i1"></i><span>500<sup>+</sup> Tweets</span></a> </div> <div class="clearfix"> </div> </div> <div class="clearfix"></div> </div> </div> <!--notification menu end --> </div> <!-- //header-ends --> <div id="page-wrapper"> <div class="graphs"> <h3 class="blank1">Simple Charts</h3> <div class="graph_box"> <div class="col-md-4 grid_2"> <div class="grid_1"> <h4>Circular</h4> <canvas id="doughnut" height="300" width="470" style="width: 470px; height: 300px;"></canvas> <script> var doughnutData = [ { value: 30, color: "#F44336" }, { value: 50, color: "#929292" }, { value: 100, color: "#00aced" }, { value: 40, color: "#9358ac" }, ]; new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData); </script> </div> </div> <div class="col-md-4 grid_2"> <div class="grid_1"> <h4>Radar</h4> <canvas id="radar" height="300" width="470" style="width: 470px; height: 300px;"></canvas> <script> var radarChartData = { labels: ["", "", "", "", "", "", ""], datasets: [ { fillColor: "#00aced", strokeColor: "#00aced", pointColor: "#00aced", pointStrokeColor: "#fff", data: [65, 59, 90, 81, 56, 55, 40] }, { fillColor: "#8BC34A", strokeColor: "#8BC34A", pointColor: "#8BC34A", pointStrokeColor: "#fff", data: [28, 48, 40, 19, 96, 27, 100] } ] }; new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData); </script> </div> </div> <div class="col-md-4 grid_2"> <div class="grid_1"> <h4>PolarArea</h4> <canvas id="polarArea" height="300" width="450" style="width: 450px; height: 300px;"></canvas> <script> var chartData = [ { value: Math.random(), color: "#8BC34A" }, { value: Math.random(), color: "#C7604C" }, { value: Math.random(), color: "#21323D" }, { value: Math.random(), color: "#9D9B7F" }, { value: Math.random(), color: "#7D4F6D" }, { value: Math.random(), color: "#9358ac" } ]; new Chart(document.getElementById("polarArea").getContext("2d")).PolarArea(chartData); </script> </div> </div> <div class="clearfix"> </div> </div> <div class="graph_box1"> <div class="col-md-6 grid_2 grid_2_bot"> <div class="grid_1"> <h4>Pie</h4> <div class="legend"> <div id="os-Win-lbl">Chrome <span>100%</span></div> <div id="os-Mac-lbl">Internet Explorer <span> 50%</span></div> <div id="os-Other-lbl">Safari<span>30%</span></div> </div> <canvas id="pie" height="315" width="470" style="width: 470px; height: 315px;"></canvas> <script> var pieData = [ { value: 30, color: "#ef553a" }, { value: 50, color: "#00aced" }, { value: 100, color: "#8BC34A" } ]; new Chart(document.getElementById("pie").getContext("2d")).Pie(pieData); </script> </div> </div> <div class="col-md-6 grid_2 grid_2_bot"> <div class="grid_1"> <h4>Line</h4> <canvas id="line1" height="100" width="600" style="width: 600px; height: 100px;"></canvas> <script> var lineChartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Mon"], datasets: [ { fillColor: "#fff", strokeColor: "#F44336", pointColor: "#fbfbfb", pointStrokeColor: "#F44336", data: [20, 35, 45, 30, 10, 65, 40] } ] }; new Chart(document.getElementById("line1").getContext("2d")).Line(lineChartData); </script> </div> <div class="line-bottom-grid"> <div class="grid_1"> <h4>Bar</h4> <canvas id="bar1" height="100" width="600" style="width: 600px; height: 100px;"></canvas> <script> var barChartData = { labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Mon", "Tue", "Wed", "Thu"], datasets: [ { fillColor: "#8BC34A", strokeColor: "#8BC34A", data: [25, 40, 50, 65, 55, 30, 20, 10, 6, 4] }, { fillColor: "#8BC34A", strokeColor: "#8BC34A", data: [30, 45, 55, 70, 40, 25, 15, 8, 5, 2] } ] }; new Chart(document.getElementById("bar1").getContext("2d")).Bar(barChartData); </script> </div> </div> </div> <div class="clearfix"> </div> </div> </div> </div> </div> <!--footer section start--> <footer> <p>Copyright © 2015.Company name All rights reserved.<a target="_blank" href="#">网页模板</a></p> </footer> <!--footer section end--> </section>28475 -
sign-in_CSS3网站后台管理模板源代码<section> <div id="page-wrapper" class="sign-in-wrapper"> <div class="graphs"> <div class="sign-in-form"> <div class="sign-in-form-top"> <p><span>Sign In to</span> <a href="index.html">Admin</a></p> </div> <div class="signin"> <div class="signin-rit"> <span class="checkbox1"> <label class="checkbox"><input type="checkbox" name="checkbox" checked="">Forgot Password ?</label> </span> <p><a href="#">Click Here</a> </p> <div class="clearfix"> </div> </div> <form> <div class="log-input"> <div class="log-input-left"> <input type="text" class="user" value="Yourname" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email address:';}" /> </div> <span class="checkbox2"> <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i></label> </span> <div class="clearfix"> </div> </div> <div class="log-input"> <div class="log-input-left"> <input type="password" class="lock" value="password" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email address:';}" /> </div> <span class="checkbox2"> <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i> </i></label> </span> <div class="clearfix"> </div> </div> <input type="submit" value="Login to your account"> </form> </div> <div class="new_people"> <h4>For New People</h4> <p> Having hands on experience in creating innovative designs,I do offer design solutions which harness. </p> <a href="sign-up.html">Register Now!</a> </div> </div> </div> </div> <!--footer section start--> <footer> <p>Copyright © 2015.Company name All rights reserved.<a target="_blank" href="#">网页模板</a></p> </footer> <!--footer section end--> </section>3039
特别说明：
1.如有链接无法下载、失效或广告，请联系QQ：2305911934 处理！
2.本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3.本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
4.本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
5.该模板为静态页面，没有后台，大部分未经测试可用，并不保证百分百无误及完整
如有侵犯您的版权，请及时联系2305911934#qq.com(#换@)，我们将尽快处理。
相关文章
HTML模板
Velocity.js 中文文档_备份
Animate.css纯CSS动画库_备份
m3u8从blob协议的加密视频地址下载视频
SVG-Morpheus:svg图标变形插件
anime.js官网_免费、灵活的轻型JavaScript动画库_备份
phpcms全站搜索