20160616 html5练习代码一
Posted 唯一的liaoliao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了20160616 html5练习代码一相关的知识，希望对你有一定的参考价值。
index.html
<!DOCTYPE>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>01-单页</title>
<link rel="stylesheet" href="CSS/index.css">
<script src="js/jquery.js"></script>
<script src="js/SuperSlide.js"></script>
</head>
<body>
<header>
<div class="wp fix">
<div class="header-l">
<a href="#"><span > ONE</span>PAGE</a>
</div>
<div class="header-r">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">SERVICES</a>
<a href="#">TEAM</a>
<a href="#">PROTFOLIO</a>
<a href="#">BENIFITS</a>
<a href="#">PRICING</a>
<a href="#">CONTACT</a>
</div>
</div>
</header>
<div class="sliders fix">
<div id="slideBox" class="slideBox">
<!--<div class="hd">
<ul><li></li><li></li></ul>
</div>-->
<div class="bd">
<ul>
<li><a href="#" ><img src="images/t-1.png" /></a>
<div class="box-sliders">
<div class="sliders-1">
<h1> PARRALAX <span>ONE PAGE</span> HAS ARRIVED</h1>
<div class="sliders-t fix">
<a href=""><img src="images/icon-thumbs-up.png" ></a>
<div class="sliders-r">
<h2>Lets just do it</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit amet sed diam nonummy nibh <span>dolore</span></p>
</div>
</div>
</div>
</div>
</li>
<li><a href="#"><img src="images/t-2.png" /></a>
<div class="box-sliders">
<div class="sliders-2">
<h3>EXTREMELY <span>RESPONSIVE</span> DESIGN</h3>
</div>
</div>
</li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
</div>
<div class="about">
<div class="wp ">
<div class="tit">
<h3>METRONIC <span>INSPIRES</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<img src="images/about-dd.png" >
<div class="at">
<div class="about-1">
<img src="images/about-1.png" >
<p>Clean Code</p>
</div>
<div class="about-2">
<img src="images/about-2.png" >
<p>Huges Updates</p>
</div>
<div class="about-3">
<img src="images/about-3.png" >
<p>Responsive</p>
</div>
</div>
</div>
</div>
<div class="services">
<div class="wp">
<div class="tit">
<h3>OUR <span>SERVICES</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<dd>
<dl>
<a href="#"><img src="images/service-1.png" ></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
<dl>
<a href="#"><img src="images/service-2.png" ></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
<dl>
<a href="#"><img src="images/service-3.png" ></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
<dl>
<a href="#"><img src="images/service-4.png" ></a>
<h4>Fantastic Support</h4>
<p>Lorem ipsum et dolor amet consectetuer diam</p>
</dl>
</dd>
</div>
</div>
<div class="design">
<img src="images/design-1.png" >
<div class="design-t">
<h4>THE DETAILS ARE NOT THE DETAILS<br><span>THEY MAKE THE DESIGN</span></h4>
<p>KEEN THEMES</p>
</div>
</div>
<div class="theteam">
<div class="wp">
<div class="tit">
<h3> MEET <span>THE TEAM</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>
<div class="team1">
<img src="images/team1.png" >
<h4>Marcus Doe</h4>
<span>FOUNDER</span>
<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>
<div class="team-b">
<a href="#"> <img src="images/team-b1.png" ></a>
<a href="#"> <img src="images/team-b2.png" ></a>
<a href="#"> <img src="images/team-b3.png" ></a>
</div>
</div>
<div class="team1">
<img src="images/team2.png" >
<h4>Marcus Doe</h4>
<span>FOUNDER</span>
<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>
<div class="team-b">
<a href="#"> <img src="images/team-b1.png" ></a>
<a href="#"> <img src="images/team-b2.png" ></a>
<a href="#"> <img src="images/team-b3.png" ></a>
</div>
</div>
<div class="team1">
<img src="images/team3.png" >
<h4>Marcus Doe</h4>
<span>FOUNDER</span>
<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>
<div class="team-b">
<a href="#"> <img src="images/team-b1.png" ></a>
<a href="#"> <img src="images/team-b2.png" ></a>
<a href="#"> <img src="images/team-b3.png" ></a>
</div>
</div>
</div>
</div>
<div class="lastest-work">
<div class="tit">
<h3>LASTEST<span> WORKS</span></h3>
</div>
<ul class="ul-lastest fix">
<li class="on">
<a href="javascript:;">
<img src="images/item1.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item2.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item3.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item4.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item5.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item6.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
<li>
<a href="javascript:;">
<img src="images/item1.png" >
</a>
<div>
<h5>LONDON CITY PROJECT</h5>
<p>PROPERTY</p>
<a href="#">DETAILS</a>
</div>
</li>
</ul>
</div>
<div class="choose">
<div class="wp">
<div class="tit">
<h3>WHY TO <span>CHOOSE US</span></h3>
<p>Lorem ipsum dolor sit amet, <span style="color:#1ea9e3">consectetuer piscing</span>elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="sideMenu" >
<p><em></em>Lorem ipsum dolor sit amet</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" >
</ul>
<p><em></em>Consectetur adipisicing elit</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" >
</ul>
<p><em></em>Augue assum anteposuerit dolore</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" >
</ul>
<p><em></em>Sollemnes in futurum</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" >
</ul>
<p><em></em>Nostrud Tempor veniam</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
<img src="images/choose-1.png" >
</ul>
<p><em></em>Ut enem magana sed dolore</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>
<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>
<li>nostrud exercitation dolore magna ullamco.</li>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>
<li>tempor ut labore et dolore.</li>
</ul>
</div>
</div>
</div>
<div class="purchase">
<div class="wp">
<div class="pur-l">
<h2>CHECK OUT ADMIN THEME!</h2>
<p>Most Full Featured & Powerfull Admin Theme</p>
</div>
<a href="#">LIVE PREVIEW</a>
</div>
</div>
<div class="fact">
<div class="tit">
<h3 style="color:#fff">SOME FACTS ABOUT US</h3>
</div>
<div class="wp">
<div class="fact-bt">
<a href="#">
<dl>
<dt>39</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
<a href="#">
<dl>
<dt>14</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
<a href="#">
<dl>
<dt>29K+</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
<a href="#">
<dl>
<dt>500</dt>
<dd>PROJECTS COMPLETED</dd>
</dl>
</a>
</div>
</div>
</div>
<div class="pricing">
<div class="wp">
<div class="tit">
<h3>PRICING <span>TABLES</span></h3>
</div>
<dl>
<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>
<dd>
<img src="images/ca-bt.png" >
<h5><span style="font-size: 30px;color:#fff">$</span>19</h5>
<p>Per Month</p>
<ul class="ul-pri">
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
</ul>
</dd>
<dd class="sign-up">
<a href="#"><p>SIGN UP</p></a>
</dd>
</dl>
<dl>
<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>
<dd>
<img src="images/ca-bt.png" >
<h5><span style="font-size: 30px;color:#fff">$</span>25</h5>
<p>Per Month</p>
<ul class="ul-pri">
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
<li> Lorem ipsum dolor</li>
</ul>
</dd>
<dd class="sign-up">
<a href="#"><p>SIGN UP</p></a>
</dd>
&
以上是关于20160616 html5练习代码一的主要内容，如果未能解决你的问题，请参考以下文章