代码部署教程
1. 引入CSS
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='//fonts.googleapis.com/css?family=Jura:400,300,500,600' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css?v=5.4.4" />
2. 引入JS
<script src="js/jquery-1.11.1.min.js">
</script><script type="text/javascript" src="js/jquery.mmenu.min.all.js?v=5.4.4">
</script>
<script src="js/Chart.js">
</script>
<script src="js/responsiveslides.min.js">
</script>
3. HTML代码
<h1>
Mobile material</h1><!-- main -->
<div class="main">
<!--login-profile-->
<div class="login-form">
<div class="banner">
<div class="header-top">
<ul>
<li>
<span>
</span>
</li>
<li>
<span class="chrg">
</span>
</li>
<li>
10:00 </li>
</ul>
</div>
<div class="banner-text">
<div class="menu">
<span class="menu-icon">
<a href="#">
<img src="images/menu-icon.png" alt=""/>
</a>
</span>
<ul class="nav1">
<li>
<a href="#">
Home</a>
</li>
<li>
<a href="#">
About</a>
</li>
<li>
<a href="#">
Services</a>
</li>
<li>
<a href="#">
Gallery</a>
</li>
<li>
<a href="#">
Contact</a>
</li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu-icon" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script><!-- /script-for-menu -->
</div>
<div class="title">
<div class="title-left">
<img src="images/img1.jpg" alt=""/>
</div>
<div class="title-right">
<h2>
Vestibulum ante </h2>
<h6>
UI/UX Designer</h6>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<div class="clear">
</div>
<div class="banner-bottom">
<div class="banner-bottom-left">
<h2>
13</h2>
<p>
Remaining tasks </p>
</div>
<div class="banner-bottom-right">
<h2>
25</h2>
<p>
Completed tasks</p>
</div>
<div class="clear">
</div>
</div>
<div class="work-text">
<h2>
TODAY</h2>
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1" class="grid1">
<i>
</i>
Finish landing page concept</label>
<article class="ac-small">
<p>
Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2" class="grid2">
<i>
</i>
Design app illustrations</label>
<article class="ac-small">
<p>
Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3" class="grid3">
<i>
</i>
Javascript training</label>
<article class="ac-small">
<p>
Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4" class="grid4">
<i>
</i>
Surprise Party for Meet</label>
<article class="ac-small">
<p>
Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
</section>
</div>
</div>
<!--login-profile-->
<!--signin-form-->
<div class="signin-form profile">
<h2>
Welcome, <span>
Jennifer</span>
</h2>
<img src="images/img1.jpg" alt=""/>
<div class="login-form">
<form>
<input type="text" placeholder="user.name55@gmail.com" required="">
<input type="password" placeholder="* * * * * * * * * *" required="">
<input type="submit" value="LOGIN">
</form>
</div>
<p>
<a href="#">
CREATE NEW ACCOUNT</a>
</p>
</div>
<!--//signin-form-->
<!--mobile-slider-->
<div class=" profile">
<div class="banner">
<div class="header-top">
<ul>
<li>
<span>
</span>
</li>
<li>
<span class="chrg">
</span>
</li>
<li>
10:00 </li>
</ul>
</div>
<div class="banner-text">
<section class="ac-container">
<div class="menu">
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5">
<img src="images/menu-icon.png" alt=""/>
</label>
<article class="ac-medium">
<ul class="nav">
<li>
<a href="#">
Home</a>
</li>
<li>
<a href="#">
About</a>
</li>
<li>
<a href="#">
Services</a>
</li>
<li>
<a href="#">
Gallery</a>
</li>
<li>
<a href="#">
Contact</a>
</li>
</ul>
</article>
</div>
</section>
<div class="title">
<div class="title-left">
<img src="images/img1.jpg" alt=""/>
</div>
<div class="title-right">
<h2>
Vestibulum ante </h2>
<h6>
UI/UX Designer</h6>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<div class="profile-slider">
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 400,
namespace: "callbacks"
});
});
</script><div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="slider-text">
<h2>
Keep track of your tasks</h2>
<p>
Never miss an appointment, never forget about your daily team meeting and remember when your favourite team. </p>
</div>
</li>
<li>
<div class="slider-text">
<h2>
Team meeting remember</h2>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s remember when your team is playing. </p>
</div>
</li>
<li>
<div class="slider-text">
<h2>
Your tasks keep track of </h2>
<p>
Never miss an appointment, never forget about your daily team meeting and remember when your favourite team. </p>
</div>
</li>
<li>
<div class="slider-text">
<h2>
Keep track of your tasks </h2>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s remember when your team is playing. </p>
</div>
</li>
</ul>
<div class="clear">
</div>
</div>
<a href="#" class="skip">
SKIP TUTORIAL </a>
</div>
</div>
<!--//mobile-slider-->
<!--iframe-Push-Menu-->
<div class="mobile profile">
<iframe src="about.html">
</iframe>
</div>
<!--//iframe-Push-Menu-->
<!--login-graph-->
<div class="mobile-graph profile">
<div class="banner banner1">
<div class="header-top">
<ul>
<li>
<span>
</span>
</li>
<li>
<span class="chrg">
</span>
</li>
<li>
10:00 </li>
</ul>
</div>
<div class="banner-text">
<div class="menu menu-left">
<section class="ac-container">
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6">
<img src="images/menu-icon.png" alt=""/>
</label>
<article class="ac-medium">
<ul class="nav">
<li>
<a href="#">
Home</a>
</li>
<li>
<a href="#">
About</a>
</li>
<li>
<a href="#">
Services</a>
</li>
<li>
<a href="#">
Gallery</a>
</li>
<li>
<a href="#">
Contact</a>
</li>
</ul>
</article>
</section>
</div>
<div class="menu-right">
<a href="#">
<span class="icons icn4">
</span>
</a>
</div>
<div class="clear">
</div>
<h2>
<span>
Jennifer</span>
Wilson</h2>
</div>
</div>
<div class="graph-info">
<div class="graph-text">
<ul>
<li>
<span class="dott">
</span>
Design </li>
<li>
<span class="dott green">
</span>
CSS</li>
<li>
<span class="dott blue">
</span>
JavaScript </li>
</ul>
</div>
<div class="month-graph effect21">
<canvas id="line" height="195px" width="400px" style="width:300px; height: 300px;">
</canvas>
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(135, 138, 238, 0.88)",
strokeColor : "rgba(135, 138, 238, 0.85)",
pointColor : "rgba(135, 138, 238, 0.85)",
data : [70,80,60,75,90,75,100]
},
{
fillColor : "rgba(87, 226, 201, 0.88)",
strokeColor : "rgba(87, 226, 201, 0.82)",
pointColor : "rgba(87, 226, 201, 0.82)",
data : [70,60,72,61,75,59,80]
},
{
fillColor : "rgba(248, 246, 120, 0.88)",
strokeColor : "rgba(248, 246, 120, 0.81)",
pointColor : "rgba(248, 246, 120, 0.81)",
data : [50,65,51,67,52,64,50]
}
]
}
var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
</script></div>
</div>
</div>
<!--//login-graph-->
</div>
<div class="copyright">
<p>
© 2016 Mobile material . All rights reserved | Template by <a href="http://cxvn.com/" target="_blank" >
W3layouts</a>
</p>
</div>
