大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 体育 体育运动服务类网站1个页面 模版
网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
获取源码
1，访问该网站
https://upload.csdn.net/creation/uploadResources/90231754
2，点击上方下载
目录1
项目视频
html+css+js网页设计 体育体育运动服务类网站1个页
网页展示
页面1
代码展示
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Champion Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<!-- for-gallery-rotation -->
<script src="js/modernizr.custom.97074.js"></script>
<!-- //for-gallery-rotation -->
<!-- FlexSlider -->
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<!-- //FlexSlider -->
<!-- start-smoth-scrolling -->
<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>
<!-- start-smoth-scrolling -->
<link href='http://fonts.useso.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Comfortaa:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- header -->
<div class="header">
<div class="container">
<div class="header-nav">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a class="navbar-brand" href="index.html">Champion <span>Make You Be The Fighter</span></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hvr-sweep-to-bottom active"><a href="index.html">Home</a></li>
<li class="hvr-sweep-to-bottom"><a href="#services" class="scroll">Services</a></li>
<li class="hvr-sweep-to-bottom"><a href="#about" class="scroll">About</a></li>
<li class="hvr-sweep-to-bottom"><a href="#gallery" class="scroll">Photo Gallery</a></li>
<li class="hvr-sweep-to-bottom"><a href="#contact" class="scroll">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
</div>
<!-- //header -->
<!-- banner -->
<div class="banner">
<div class="container">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="banner-info">
<div class="banner-info-left">
<h1>sunt in culpa qui officia deserunt mollit</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia.</p>
<div class="more">
<a href="#">Learn More</a>
</div>
</div>
</div>
</li>
<li>
<div class="banner-info">
<div class="banner-info-left">
<h1>sunt in culpa qui officia deserunt mollit</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia.</p>
<div class="more">
<a href="#">Learn More</a>
</div>
</div>
</div>
</li>
<li>
<div class="banner-info">
<div class="banner-info-left">
<h1>sunt in culpa qui officia deserunt mollit</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia.</p>
<div class="more">
<a href="#">Learn More</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
<div class="banner-pos">
<div class="col-md-3 banner-pos-left">
<div class="banner-pos-left-info">
<h3><i class="glyphicon glyphicon-cloud" aria-hidden="true"></i>sint et non recusandae</h3>
<p>To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
</div>
</div>
<div class="col-md-3 banner-pos-left">
<div class="banner-pos-left-info">
<h3><i class="glyphicon glyphicon-globe" aria-hidden="true"></i>sint et non recusandae</h3>
<p>To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
</div>
</div>
<div class="col-md-3 banner-pos-left">
<div class="banner-pos-left-info">
<h3><i class="glyphicon glyphicon-phone" aria-hidden="true"></i>sint et non recusandae</h3>
<p>To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
</div>
</div>
<div class="col-md-3 banner-pos-left">
<div class="banner-pos-left-info">
<h3><i class="glyphicon glyphicon-star" aria-hidden="true"></i>sint et non recusandae</h3>
<p>To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //banner -->
<!-- welcome -->
<div class="welcome">
<div class="container">
<h3>Welcome !</h3>
<p class="ever">To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
<div class="welcome-grids">
<div class="col-md-3 welcome-grid">
<div class="welcome-grd">
<div class="icons">
<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
</div>
<h4>autem vel eum</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam.</p>
</div>
</div>
<div class="col-md-3 welcome-grid">
<div class="welcome-grd">
<div class="icons">
<span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
</div>
<h4>autem vel eum</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam.</p>
</div>
</div>
<div class="col-md-3 welcome-grid">
<div class="welcome-grd">
<div class="icons">
<span class="glyphicon glyphicon-filter" aria-hidden="true"></span>
</div>
<h4>autem vel eum</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam.</p>
</div>
</div>
<div class="col-md-3 welcome-grid">
<div class="welcome-grd">
<div class="icons">
<span class="glyphicon glyphicon-send" aria-hidden="true"></span>
</div>
<h4>autem vel eum</h4>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam.</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //welcome -->
<!-- banner-text -->
<div class="banner-text">
<div class="container">
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="banner-text-info banner-text-inf">
<h2>Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam</h2>
</div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="banner-text-info banner-text-inf1">
<h2>Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam</h2>
</div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="banner-text-info banner-text-inf2">
<h2>Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam</h2>
</div>
</div>
</article>
</div>
</div>
<script src="js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
</div>
<!-- //banner-text -->
<!-- services -->
<div id="services" class="services">
<div class="container">
<h3>Services</h3>
<p class="ever">To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
<div class="services-top">
<div class="col-md-6 services-top-left">
<div class="services-top-main">
<div class="col-md-6 services-left service-img">
<a href="images/5.png" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/5.png" alt="" class="img-responsive" />
</a>
</div>
<div class="col-md-6 services-left">
<h4>Proin tempus lacus at egestas vitae</h4>
<p>Quisque diam risus, scelerisque vitae egestas vitae, congue at neque tincidunt orci quis.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="services-top-main">
<div class="col-md-6 services-left service-img">
<a href="images/6.png" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/6.png" alt="" class="img-responsive" />
</a>
</div>
<div class="col-md-6 services-left">
<h4>Maecenas quis lacus scelerisque</h4>
<p>Quisque diam risus, scelerisque vitae egestas vitae, congue at neque tincidunt orci quis.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 services-top-left">
<div class="services-top-main">
<div class="col-md-6 services-left service-img">
<a href="images/7.png" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/7.png" alt="" class="img-responsive" />
</a>
</div>
<div class="col-md-6 services-left">
<h4>Vestibulum lobortis velit congue at</h4>
<p>Quisque diam risus, scelerisque vitae egestas vitae, congue at neque tincidunt orci quis.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="services-top-main">
<div class="col-md-6 services-left service-img">
<a href="images/8.png" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/8.png" alt="" class="img-responsive" />
</a>
</div>
<div class="col-md-6 services-left">
<h4>Etiam in dolor sed purus diam risus</h4>
<p>Quisque diam risus, scelerisque vitae egestas vitae, congue at neque tincidunt orci quis.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<!--swipebox -->
<link rel="stylesheet" href="css/swipebox.css">
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<!--//swipebox Ends -->
</div>
</div>
<div class="services1">
<div class="container">
<h3>Main Services</h3>
<p class="ever">To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
<div class="services-grids">
<div class="col-md-4 services-grid">
<div class="para">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
<div class="col-md-4 services-grid">
<div class="para">
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
<div class="col-md-4 services-grid">
<div class="para">
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //services -->
<!-- about -->
<div id="about" class="advantages">
<div class="container">
<h3>Our Advantages</h3>
<div class="our-advantages-grids">
<div class="col-md-4 our-advantages-grid">
<div class="col-xs-3 our-advantages-grd-left">
<p>1.</p>
</div>
<div class="col-xs-9 our-advantages-grd-right">
<h4>voluptate velit esse quam pariatur</h4>
<p>Vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur eum iure reprehenderit.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 our-advantages-grid">
<div class="col-xs-3 our-advantages-grd-left">
<p>2.</p>
</div>
<div class="col-xs-9 our-advantages-grd-right">
<h4>voluptate velit esse quam pariatur</h4>
<p>Vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur eum iure reprehenderit.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 our-advantages-grid">
<div class="col-xs-3 our-advantages-grd-left">
<p>3.</p>
</div>
<div class="col-xs-9 our-advantages-grd-right">
<h4>voluptate velit esse quam pariatur</h4>
<p>Vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur eum iure reprehenderit.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<div class="our-advantages-grids">
<div class="col-md-4 our-advantages-grid">
<div class="col-xs-3 our-advantages-grd-left">
<p>4.</p>
</div>
<div class="col-xs-9 our-advantages-grd-right">
<h4>voluptate velit esse quam pariatur</h4>
<p>Vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur eum iure reprehenderit.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 our-advantages-grid">
<div class="col-xs-3 our-advantages-grd-left">
<p>5.</p>
</div>
<div class="col-xs-9 our-advantages-grd-right">
<h4>voluptate velit esse quam pariatur</h4>
<p>Vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur eum iure reprehenderit.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 our-advantages-grid">
<div class="col-xs-3 our-advantages-grd-left">
<p>6.</p>
</div>
<div class="col-xs-9 our-advantages-grd-right">
<h4>voluptate velit esse quam pariatur</h4>
<p>Vel illum qui dolorem eum fugiat quo voluptas
nulla pariatur eum iure reprehenderit.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="history">
<div class="container">
<div class="col-md-6 history-left">
<h3>History</h3>
<div class="history-left-grid">
<p><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i>21.7.2015</p>
<h4>consequatur aut perferendis</h4>
<p class="aut">Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur voluptates repudiandae sint et
molestiae non recusandae aut perferendis.</p>
</div>
<div class="history-left-grid">
<p><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i>28.7.2015</p>
<h4>consequatur aut perferendis</h4>
<p class="aut">Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur voluptates repudiandae sint et
molestiae non recusandae aut perferendis.</p>
</div>
<div class="history-left-grid">
<p><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i>03.8.2015</p>
<h4>consequatur aut perferendis</h4>
<p class="aut">Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur voluptates repudiandae sint et
molestiae non recusandae aut perferendis.</p>
</div>
</div>
<div class="col-md-6 history-right">
<h3>What We Offer</h3>
<h4>voluptatibus maiores alias</h4>
<p>To take a trivial example, which of us ever undertakes laborious physical
exercise, except to obtain some advantage from it? But who has any right to
find fault with a man who chooses to enjoy a pleasure.</p>
<ul>
<li><a href="#">recusandae aut perferendis</a></li>
<li><a href="#">voluptatibus maiores alias</a></li>
<li><a href="#">molestiae non recusandae</a></li>
<li><a href="#">alias consequatur voluptates</a></li>
<li><a href="#">tenetur a sapiente delectus</a></li>
<li><a href="#">earum rerum hic tenetur</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- //about -->
<!-- newsletter -->
<div class="newsletter">
<div class="container">
<div class="newsletter-info">
<h3>Newsletter</h3>
<div class="letter">
<form>
<input type="text" placeholder="Enter Your Mail..." required=" ">
<input type="submit" value=" " >
</form>
</div>
<div class="clearfix"> </div>
<div class="mes">
<span></span>
</div>
</div>
</div>
</div>
<!-- //newsletter -->
<!-- gallery -->
<div id="gallery" class="gallery">
<div class="container">
<h3>Gallery</h3>
<p class="ever">To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
<div class="gallery-grids">
<section>
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="images/5.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/5.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/6.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/6.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/7.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/7.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/8.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/8.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/9.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/9.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/5.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/5.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/6.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/6.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/7.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/7.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<li>
<a href="images/8.jpg" class=" mask b-link-stripe b-animate-go swipebox" title="">
<img src="images/8.jpg" alt="" />
<div>
<h5>project</h5>
<span>non suscipit leo fringilla non suscipit leo fringilla molestie</span>
</div>
</a>
</li>
<div class="clearfix"> </div>
</ul>
</section>
<script type="text/javascript" src="js/jquery.hoverdir.js"></script>
<script type="text/javascript">
$(function() {
$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );
});
</script>
</div>
</div>
</div>
<!-- //gallery -->
<!-- contact -->
<div id="contact" class="contact">
<div class="container">
<h3>Contact Us</h3>
<p class="ever">To take a trivial example, which of us ever undertakes laborious
physical exercise.</p>
<div class="contact-us1-bottom">
<form>
<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">
<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">
<textarea type="text" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required>Message...</textarea>
<input type="submit" value="Submit" >
</form>
<div class="home-radio-clock">
<ul>
<li><i class="glyphicon glyphicon-home" aria-hidden="true"></i>Our Home</li>
<li><i class="glyphicon glyphicon-bullhorn" aria-hidden="true"></i>Call Us</li>
<li><i class="glyphicon glyphicon-time" aria-hidden="true"></i>Opening Time</li>
</ul>
</div>
<div class="home-radio-clock-right">
<ul>
<li>4978 Diamond Circle
<span>Washington, NJ 07087</span></li>
<li class="lst">(012) 123-456-78</li>
<li>(012) 123-456-78<span>Mon-Fri:</span><span>09h-17h</span></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //contact -->
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-3 footer-grid">
<h3 class="title">Services</h3>
<ul>
<li><a href="#">Rerum hic tenetur</a></li>
<li><a href="#">Molestiae non recusandae</a></li>
<li><a href="#">Voluptates repudiandae</a></li>
<li><a href="#">Necessitatibus saepe</a></li>
<li><a href="#">Debitis aut rerum</a></li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<h3 class="title">Information</h3>
<ul>
<li><a href="#">Quibusdam et aut</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Our Staff</a></li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<h3 class="title">More details</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Site map</a></li>
</ul>
</div>
<div class="col-md-3 footer-grid contact-grid">
<h3 class="title">Contact us</h3>
<ul>
<li><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>New York Still Road.</li>
<li class="adrs">756 gt globel Place</li>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+000 100 444 1111</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:example@mail.com">mail@example.com</a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="copy">
<div class="container">
<div class="copy-left">
<p>Copyright © 2015.Company name All rights reserved.</p>
</div>
<div class="social-icons">
<ul>
<li><a href="#" class="fb"></a></li>
<li><a href="#"></a></li>
<li><a href="#" class="gg"></a></li>
<li><a href="#" class="pn"></a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!--//footer-->
<!-- for bootstrap working -->
<script src="js/bootstrap.js"> </script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</body>
</html>
总结
设计一个样式美观又人性化的网页，除了具备扎实的专业知识，还需具备美学和人机工程学等相关知识，优秀的网页应具备以下几个特点:
1.简洁实用
尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，要去掉所有的冗余的东西；
2.使用方便
要满足使用者的要求，网页适合使用，显示出其功能美；
3.整体性好
围绕一个统一的目标设计，强调整体的功能性；
4.形象突出
尽量符合网页美的标准，能够使网站的形象得到最大限度的提升，追求雅俗共赏。页面用色协调，布局符合形式美的要求：布局有条理，充分利用美的形式，使网页富有可欣赏性，提高档次。
5.交互式强
发挥网络的优势，想方设法使每个使用者都参与到其中来。
更多推荐
【关注作者|获取更多源码|优质文章】；Web前端网页制作、大学生毕业设计辅导、期末大作业辅导、模板源码、技术咨询等，有兴趣的联系我!
更多优质博客文章、网页模板点击以下链接查阅：
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
html+css+js网页设计 CSDN博客
关注作者，点赞收藏博文，获取更多源码，Thanks！5000+完整代码，主题涵盖30+种类型: