实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html>
<html>
<head>
<title>疯狂-创想</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href='http://fonts.googleapis.com/css?family=Open Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'>
<script src="./js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="./js/move-top.js"></script>
<script type="text/javascript" src="./js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<link href="./css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="./js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</head>
<body>
<!-- header -->
<div id="home" class="heder">
<!-- container -->
<div class="container">
<div class="header-top">
<div class="heder-logo">
<h1><a href="#">疯-想</a></h1>
</div>
<div class="top-nav">
<span class="menu"><img src="./images/menu.png" alt=""></span>
<ul class="nav1">
<li><a class="scroll" href="#home">首页</a></li>
<li><a class="scroll" href="#services">服务</a></li>
<li><a class="scroll" href="#portfolio">商家投资</a></li>
<li><a class="scroll" href="#about">关于我们</a></li>
<li><a class="scroll" href="#contact">联系我们</a></li>
<li><a class="Signup play-icon popup-with-zoom-anim" href="#small-dialog2">职业招聘</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- container -->
</div>
<!-- header -->
<!-- banner -->
<div class="banner">
<!-- container -->
<div class="container">
<div class="banner-info wow bounceIn" data-wow-delay="0.4s">
<a class="play-icon popup-with-zoom-anim" href="#small-dialog">
<span> </span>
</a>
<div class="banner-text">
<h2>疯想给你展示案例！</h2>
<p><a class="play-icon popup-with-zoom-anim" href="#small-dialog">点击播放视频</a></p>
</div>
<!--pop-up-box-->
<script type="text/javascript" src="./js/modernizr.custom.min.js"></script>
<link href="./css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
<script src="./js/jquery.magnific-popup.js" type="text/javascript"></script>
<!--//pop-up-box-->
<div id="small-dialog" class="mfp-hide">
<iframe src="http://player.vimeo.com/video/38584262" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>
</div>
<div id="small-dialog2" class="mfp-hide">
<div class="signup">
<h3>职业招聘</h3>
<h4>请输入当前您要使用的注册信息？</h4>
<input type="text" value="输入姓名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'First Name';}" />
<input type="text" value="确认姓名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Second Name';}" />
<input type="text" class="email"value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" />
<input type="password" value="输入密码" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Password';}"/>
<input type="submit" value="确认提交"/>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
</div>
</div>
<!-- container -->
</div>
<!-- banner -->
<!-- services -->
<div id="services" class="services">
<!-- container -->
<div class="container">
<div class="col-md-4 services-hedding wow bounceIn" data-wow-delay="0.4s">
<h3>我们的服务.</h3>
</div>
<div class="col-md-4 services-info wow bounceIn" data-wow-delay="0.4s">
<div class="col-md-3 img-grid">
<span> </span>
</div>
<div class="col-md-9 img-grid-text">
<h4>Feature 1</h4>
<p>欢迎大家来我的网站，我们有最好的服！</p>
</div>
</div>
<div class="col-md-4 services-info wow bounceIn" data-wow-delay="0.4s">
<div class="col-md-3 img-grid">
<span class="food"> </span>
</div>
<div class="col-md-9 img-grid-text">
<h4>Feature 2</h4>
<p>欢迎大家来我的网站，我们有最好的服！</p>
</div>
</div>
<div class="col-md-4 services-info wow bounceIn" data-wow-delay="0.4s">
<div class="col-md-3 img-grid">
<span class="power"> </span>
</div>
<div class="col-md-9 img-grid-text">
<h4>Feature 3</h4>
<p>欢迎大家来我的网站，我们有最好的服！</p>
</div>
</div>
<div class="col-md-4 services-info wow bounceIn" data-wow-delay="0.4s">
<div class="col-md-3 img-grid">
<span class="wood"> </span>
</div>
<div class="col-md-9 img-grid-text">
<h4>Feature 4</h4>
<p>欢迎大家来我的网站，我们有最好的服！</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!-- container -->
</div>
<!-- services -->
<!-- icons -->
<div class="icons">
<!-- container -->
<div class="container">
<ul class="wow bounceIn" data-wow-delay="0.4s">
<li>
<span class="light"> </span>
</li>
<li>
<span class="glob"> </span>
</li>
<li>
<span class="camra"> </span>
</li>
<li>
<span class="setting"> </span>
</li>
<li>
<span class="mike"> </span>
</li>
<li>
<span class="money"> </span>
</li>
</ul>
</div>
<!-- container -->
</div>
<!-- icons -->
<!-- works -->
<div id="portfolio" class="works">
<!-- container -->
<div class="container">
<div class="works-hedding wow bounceIn" data-wow-delay="0.4s">
<h3>我们的工作.</h3>
</div>
<ul id="filters">
<li><span class="filter active wow bounceIn" data-wow-delay="0.4s"" data-filter="app card icon logo web">全部</span></li>
<li><span class="filter wow bounceIn" data-wow-delay="0.4s"" data-filter="app">网站</span></li>
<li><span class="filter wow bounceIn" data-wow-delay="0.4s"" data-filter="card">品牌</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper wow bounceIn" data-wow-delay="0.4s">
<a href="#small-dialog" class="b-link-stripe b-animate-go">
<img src="./images/ball.png" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 ">名字 糖果</h2>
<p class="b-animate b-from-left b-delay03 ">作者设计 | 时间 2014 12-11-15:37</p>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper wow bounceIn" data-wow-delay="0.4s">
<a href="#small-dialog1" class="b-link-stripe b-animate-go">
<img src="./images/hokey.png" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 ">名字 果酱</h2>
<p class="b-animate b-from-left b-delay03 ">作者设计 | 时间 2014 12-11-15:37</p>
</div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper wow bounceIn" data-wow-delay="0.4s">
<a href="#small-dialog2" class="b-link-stripe b-animate-go">
<img src="./images/Football.png" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 ">名字 水果</h2>
<p class="b-animate b-from-left b-delay03" id="para">作者设计 | 2014 12-11-15:39</p>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper wow bounceIn" data-wow-delay="0.4s">
<a href="#small-dialog3" class="b-link-stripe b-animate-go">
<img src="./images/Football1.png" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 ">名字 虾米</h2>
<p class="b-animate b-from-left b-delay03 ">作者设计 | 2014 12 11 15:40</p>
</div></a>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper wow bounceIn" data-wow-delay="0.4s">
<a href="#small-dialog4" class="b-link-stripe b-animate-go">
<img src="./images/Icc.png" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 ">名字 鲤鱼</h2>
<p class="b-animate b-from-left b-delay03 ">作者设计 | 2014 12 11 15:41</p>
</div></a>
</div>
</div>
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper wow bounceIn" data-wow-delay="0.4s">
<a href="#small-dialog5" class="b-link-stripe b-animate-go">
<img src="./images/ball1.png" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left b-delay03 ">NAME PREJECT</h2>
<p class="b-animate b-from-left b-delay03 ">作者设计 | 2014 12 11 15:41</p>
</div></a>
</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Script for gallery Here -->
<script type="text/javascript" src="./js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function () {
var filterList = {
init: function () {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.portfolio',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function () {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
<!-- Gallery Script Ends -->
<div class="clearfix"></div>
<div class="plus wow fadeInLeft">
<a href="#"><img src="./images/plus.png" alt="" /></a>
</div>
</div>
<!-- container -->
</div>
<!-- works -->
<!-- works-bottom -->
<div class="work-bottom">
<!-- container -->
<div class="container">
<!-- banner Slider starts Here -->
<script src="./js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--//End-slider-script-->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="slider-top wow bounceIn" data-wow-delay="0.4s">
<p>"在这里将每天提示错误的作者,和作品的讲解，其实就是在分享错误。"</p>
<img src="./images/user2.png" alt="" />
<p class="title">Jack Efron</p>
</div>
</li>
<li>
<div class="slider-top wow bounceIn" data-wow-delay="0.4s">
<p>"在这里将每天提示错误的作者,和作品的讲解，其实就是在分享错误。"</p>
<img src="./images/user.png" alt="" />
<p class="title">Jack Efron</p>
</div>
</li>
<li>
<div class="slider-top wow bounceIn" data-wow-delay="0.4s">
<p>"在这里将每天提示错误的作者,和作品的讲解，其实就是在分享错误。"</p>
<img src="./images/user1.png" alt="" />
<p class="title">Jack Efron</p>
</div>
</li>
</ul>
</div>
<div class="clearfix"> </div>
<!-- banner Slider Ends Here -->
</div>
<!-- container -->
</div>
<!-- works-bottom -->
<!-- team -->
<div class="our-team">
<!-- container -->
<div class="container">
<div class="team-hedding wow bounceIn" data-wow-delay="0.4s">
<h3>我的团队.</h3>
</div>
<div class="team-grids">
<div class="col-md-4 team-grid">
<img src="./images/team.png" alt="" class="wow bounceIn" data-wow-delay="0.4s" />
<ul class="plus wow fadeInRight">
<li class="twitter"><a href="#"> </a></li>
<li class="facebook"><a href="#"> </a></li>
<li class="cam"><a href="#"> </a></li>
</ul>
<div class="team-grid-text wow bounceIn" data-wow-delay="0.4s">
<h5>Michael Joe</h5>
<p class="caption">CEO & 高彦东</p>
<p> 对于我的人生格言就是,没有走不过的路和也不过的山,只有走不过的心。
所谓的成长就是,踉踉跄跄的受伤，颠颠撞撞的成长.</p>
</div>
</div>
<div class="col-md-4 team-grid">
<img src="./images/team1.png" alt="" class="wow bounceIn" data-wow-delay="0.4s" />
<ul class="plus wow fadeInRight">
<li class="twitter"><a href="#"> </a></li>
<li class="facebook"><a href="#"> </a></li>
<li class="cam"><a href="#"> </a></li>
</ul>
<div class="team-grid-text wow bounceIn" data-wow-delay="0.4s">
<h5>Michael Joe</h5>
<p class="caption">CEO & Founder</p>
<p> 对于我的人生格言就是,没有走不过的路和也不过的山,只有走不过的心。
所谓的成长就是,踉踉跄跄的受伤，颠颠撞撞的成长.</p>
</div>
</div>
<div class="col-md-4 team-grid">
<img src="./images/team2.png" alt="" class="wow bounceIn" data-wow-delay="0.4s" />
<ul class="plus wow fadeInRight">
<li class="twitter"><a href="#"> </a></li>
<li class="facebook"><a href="#"> </a></li>
<li class="cam"><a href="#"> </a></li>
</ul>
<div class="team-grid-text wow bounceIn" data-wow-delay="0.4s">
<h5>Michael Joe</h5>
<p class="caption">CEO & Founder</p>
<p> 对于我的人生格言就是,没有走不过的路和也不过的山,只有走不过的心。
所谓的成长就是,踉踉跄跄的受伤，颠颠撞撞的成长.</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="plus wow fadeInLeft">
<a href="#"><img src="./images/plus.png" alt="" /></a>
</div>
</div>
<!-- container -->
</div>
<!-- team -->
<!-- team-bottom -->
<div class="team-bottom">
<!-- container -->
<div class="container">
<div class="col-md-3 gift wow bounceIn" data-wow-delay="0.4s">
<span> </span>
<p>2009</p>
<p class="text">PERSPICIATIS</p>
</div>
<div class="col-md-3 gift wow bounceIn" data-wow-delay="0.4s">
<span class="comments"> </span>
<p>13,562</p>
<p class="text">COMMENTS</p>
</div>
<div class="col-md-3 gift wow bounceIn" data-wow-delay="0.4s">
<span class="cups"> </span>
<p>8,710</p>
<p class="text">COFFEE CUPS</p>
</div>
<div class="col-md-3 gift wow bounceIn" data-wow-delay="0.4s">
<span class="awards"> </span>
<p>715</p>
<p class="text">AWARDS</p>
</div>
<div class="clearfix"> </div>
</div>
<!-- container -->
</div>
<!-- team-bottom -->
<!-- skills -->
<div id="about" class="skills">
<!-- container -->
<div class="container">
<div class="skills-hedding wow bounceIn" data-wow-delay="0.4s">
<h3>我们的技能.</h3>
</div>
<div class="col-md-9">
<div class="col-md-3 skills-grid">
<div class="circle" id="circles-1"></div>
</div>
<div class="col-md-3 skills-grid">
<div class="circle" id="circles-2"></div>
</div>
<div class="col-md-3 skills-grid">
<div class="circle" id="circles-3"></div>
</div>
<div class="col-md-3 skills-grid">
<div class="circle" id="circles-4"></div>
</div>
<div class="clearfix"> </div>
<!-->
<script type="text/javascript" src="./js/circles.js"></script>
<script>
var colors = [
['#FFFFFF', '#42B8DD'], ['#FFFFFF', '#42B8DD'], ['#FFFFFF', '#42B8DD'], ['#FFFFFF', '#42B8DD']
];
for (var i = 1; i <= 5; i ) {
var child = document.getElementById('circles-' i),
percentage = 40 (i * 10);
Circles.create({
id: child.id,
percentage: percentage,
radius: 80,
width: 10,
number: percentage / 10,
text: '%',
colors: colors[i - 1]
});
}
</script>
<!--/-->
<div class="skills-grid-text">
<h5 class="plus wow fadeInRight">关于我们职能的事情！</h5>
<p class="wow bounceIn" data-wow-delay="0.4s">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident.
</p>
<p class="wow bounceIn" data-wow-delay="0.4s"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta.
</p>
</div>
</div>
<div class="col-md-3">
<div class="totam">
<div class="tab1 wow bounceIn" data-wow-delay="0.4s">
<ul>
<li><span> </span></li>
<li class="text">大家好，欢迎来到我的网站</li>
<li class="minus">-</li>
</ul>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<div class="tab2 wow bounceIn" data-wow-delay="0.4s">
<ul>
<li class="lock"></li>
<li class="sub-text">Nemo enim ipsam voluptatem</li>
<li class="char"> </li>
</ul>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<div class="tab3 wow bounceIn" data-wow-delay="0.4s">
<ul>
<li class="tower"></li>
<li class="sub-text">大家好，欢迎来到我的网站</li>
<li class="char"> </li>
</ul>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<div class="tab4 wow bounceIn" data-wow-delay="0.4s">
<ul>
<li class="phone"></li>
<li class="sub-text">大家好，欢迎来到我的网站</li>
<li class="char"> </li>
</ul>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
<div class="tab5 wow bounceIn" data-wow-delay="0.4s">
<ul>
<li class="book"></li>
<li class="sub-text">大家好，欢迎来到我的网站</li>
<li class="char"> </li>
</ul>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
</div>
</div>
<script>
$(document).ready(function(){
$(".tab1 p").hide();
$(".tab2 p").hide();
$(".tab3 p").hide();
$(".tab4 p").hide();
$(".tab5 p").hide();
$(".tab1 ul").click(function(){
$(".tab1 p").slideToggle(300);
$(".tab2 p").hide();
$(".tab3 p").hide();
$(".tab4 p").hide();
$(".tab5 p").hide();
})
$(".tab2 ul").click(function(){
$(".tab2 p").slideToggle(300);
$(".tab1 p").hide();
$(".tab3 p").hide();
$(".tab4 p").hide();
$(".tab5 p").hide();
})
$(".tab3 ul").click(function(){
$(".tab3 p").slideToggle(300);
$(".tab4 p").hide();
$(".tab5 p").hide();
$(".tab2 p").hide();
$(".tab1 p").hide();
})
$(".tab4 ul").click(function(){
$(".tab4 p").slideToggle(300);
$(".tab3 p").hide();
$(".tab2 p").hide();
$(".tab1 p").hide();
$(".tab5 p").hide();
})
$(".tab5 ul").click(function(){
$(".tab5 p").slideToggle(300);
$(".tab4 p").hide();
$(".tab3 p").hide();
$(".tab2 p").hide();
$(".tab1 p").hide();
})
});
</script>
<!-- script -->
</div>
<div class="clearfix"> </div>
</div>
<!-- container -->
</div>
<!-- skills -->
<!-- skills-middle -->
<div class="skills-middle">
<!-- container -->
<div class="container">
<div class="skills-middle-text">
<form>
<input type="text" class="text plus wow fadeInLeft" value="发送你的e-maile" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your e-mail here...';}">
<input type="submit" class="text plus wow fadeInRight" value="提交邮件">
</form>
<div class="clearfix"> </div>
</div>
</div>
<!-- container -->
</div>
<!-- skills-middle -->
<!-- skills-bottom -->
<div class="skills-bottom">
<!-- container -->
<div class="container">
<div class="skills-images wow bounceIn" data-wow-delay="0.4s">
<div class="envato"><img src="./images/envato.png"></div>
<div class="envato"><img src="./images/word.png"></div>
<div class="envato"><img src="./images/dribble.png"></div>
<div class="envato"><img src="./images/envato.png"></div>
<div class="envato"><img src="./images/word.png"></div>
<div class="clearfix"> </div>
</div>
</div>
<!-- container -->
</div>
<!-- skills-bottom -->
<!-- contact -->
<div id="contact" class="contact">
<!-- container -->
<div class="container">
<div class="contact-hedding wow bounceIn" data-wow-delay="0.4s">
<h3>联系我们.</h3>
</div>
<p class="wow bounceIn" data-wow-delay="0.4s">123A Building, Road Street, Orlando District, US
<span> 01 234 567 89 - 01 234 567 89 | contact@book.com</span>
</p>
<div class="social-icons wow bounceIn" data-wow-delay="0.4s">
<ul>
<li class="twit"></li>
<li class="fb"></li>
<li class="google"></li>
<li class="pinterest"></li>
<li class="rect"></li>
<li class="youtube"></li>
<li class="skip"></li>
<li class="dribbble"></li>
</ul>
</div>
<div class="col-md-8 text-fields">
<div class="text-fields-left">
<div class="text-field-email">
<form>
<input type="text" class="text" value="邮件" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'EMAIL';}">
</form>
<div class="msg-img"></div>
</div>
<div class="text-field-name">
<form>
<input type="text" class="text" value="姓名" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'NAME';}">
</form>
<div class="user-img"></div>
</div>
<div class="clearfix"> </div>
<div class="text-field-area wow fadeInLeft">
<form>
<textarea value="发送消息:" onfocus="if(this.value == 'MESSAGE') this.value='';" onblur="if(this.value == '') this.value='MESSAGE';">发送消息:</textarea>
</form>
<div class="pen-img"></div>
</div>
</div>
</div>
<div class="col-md-4 text-fields">
<div class="text-fields-right wow fadeInRight">
<form>
<input type="submit" value="提交邮件">
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!-- container -->
</div>
<!-- contact -->
<!-- footer -->
<div class="footer">
<!-- container -->
<div class="container">
<h4>疯-想</h4>
<div class="copyright">
<p>
Template by <a href="#">高彦东</a>
</p>
</div>
<a class="scroll" href="#home"><img src="./images/up-arrow.png" alt="" /></a>
</div>
<!-- container -->
</div>
<!-- footer -->
</body>
</html>
标签： 开发
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论