b站视频演示效果：
【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气美术设计静态网站|自制超简单的美术类网页，响应式自适应新手友
效果图：
完整代码：
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!-- Custom Theme files -->
<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=""/>
<script type="application/x-javascript"> addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
} </script>
<!-- //Custom Theme files -->
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/swipebox.css">
<!-- js -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<!--web-fonts-->
<link href='#css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet'
type='text/css'>
<link href='#css?family=Fugaz+One' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<!-- 开始平滑滚动效果 -->
<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>
<!-- 结束平滑滚动效果 -->
</head>
<body>
<!--顶部导航-->
<div class="top-nav">
<nav class="navbar navbar-default">
<div class="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">菜单
</button>
<!-- 收集导航链接、表单和其他可切换的内容 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="hvr-bounce-to-bottom active"><a href="index.html">主页</a></li>
<li class="hvr-bounce-to-bottom"><a href="#about" class="scroll">关于我们</a></li>
<li class="hvr-bounce-to-bottom"><a href="#services" class="scroll">服务</a></li>
<li class="hvr-bounce-to-bottom"><a href="#portfolio" class="scroll">作品集</a></li>
<li class="hvr-bounce-to-bottom"><a href="#team" class="scroll">团队</a></li>
<li class="hvr-bounce-to-bottom"><a href="#contact" class="scroll">联系我们</a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</nav>
</div>
<!--顶部导航结束-->
<!--banner-->
<div class="banner">
<!--header-->
<div class="header">
<div class="container">
<div class="header-left">
<h1><a href="index.html">设计公司</a></h1>
</div>
<div class="header-right">
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+86 111 222 3333</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a
href="mailto:example@mail.com">gongsiyouxiang@example.com</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="banner-text">
<h2>欢迎</h2>
<!-- banner Slider starts Here -->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 3
$("#slider3").responsiveSlides({
auto: false,
pager: true,
nav: true,
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="slider3">
<li>
<h3>画册设计</h3>
<p>画册策划团队100年经验 专属设计师1对1沟通 品牌画册设计咨询 专注于画册设计印刷</p>
<a href="#" class="more btn-1b scroll" data-toggle="modal" data-target="#myModal1"> 阅读更多</a>
</li>
<li>
<h3>商务印刷</h3>
<p>宣传册设计一站式设计制作 专属客服12*7响应服务 数码打样48小时内送达 全国9个印刷基地就近安排</p>
<a href="#" class="more btn-1b scroll" data-toggle="modal" data-target="#myModal1"> 阅读更多</a>
</li>
<li>
<h3>私人订制</h3>
<p>支持个性化私人订制服务</p>
<a href="#" class="more btn-1b scroll" data-toggle="modal" data-target="#myModal1"> 阅读更多</a>
</li>
<li>
<h3>长期合作</h3>
<p>支持长期合作，可来电来函</p>
<a href="#" class="more btn-1b scroll" data-toggle="modal" data-target="#myModal1"> 阅读更多</a>
</li>
</ul>
</div>
</div>
</div>
<!--//banner-->
<!--modal-sign-->
<div class="modal bnr-modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<section>
<div class="modal-body modal-spa">
<img class="img-responsive" src="images/img1.jpg" alt="">
<p> 现今越来越多的商业和个人项目需要高品质、专业和吸引人的画册策划和设计印刷服务。本公司致力于为客户提供全方位的宣传物料设计和印刷服务，我们从设计到生产的所有工作环节都能为您提供完善的品牌画册设计制作方案。
作为专业的画册设计公司，我们的团队由经验丰富的设计师、生产经理和客户服务代表组成。我们的设计师是有才华的专业人才，我们相信他们通过提供最新的平面设计趋势和技术，可以让您的设计作品脱颖而出。我们的生产经理具有强大的技术背景，他们可以根据您的意愿和需求来组织制作设计和印刷作品所需的资源。我们的客户服务代表是友好和专业的，他们将协助您选择最适合您的印刷和设计须求。
我们的宣传物料设计印刷服务涵盖了多种领域，包括：
品牌形象设计和印刷 宣传画册设计和印刷 包装设计和印刷 标识设计和印刷 图书设计和印刷
</p>
</div>
</section>
</div>
</div>
</div>
<!--//modal-sign-->
<!--about-->
<div id="about" class="about">
<div class="container">
<h3 class="title">关于我们</h3>
<p> 现今越来越多的商业和个人项目需要高品质、专业和吸引人的画册策划和设计印刷服务。本公司致力于为客户提供全方位的宣传物料设计和印刷服务，我们从设计到生产的所有工作环节都能为您提供完善的品牌画册设计制作方案。
作为专业的画册设计公司，我们的团队由经验丰富的设计师、生产经理和客户服务代表组成。我们的设计师是有才华的专业人才，我们相信他们通过提供最新的平面设计趋势和技术，可以让您的设计作品脱颖而出。我们的生产经理具有强大的技术背景，他们可以根据您的意愿和需求来组织制作设计和印刷作品所需的资源。我们的客户服务代表是友好和专业的，他们将协助您选择最适合您的印刷和设计须求。
我们的宣传物料设计印刷服务涵盖了多种领域，包括：
品牌形象设计和印刷 宣传画册设计和印刷 包装设计和印刷 标识设计和印刷 图书设计和印刷
我们拥有强大的图书设计和印刷团队，可以为您提供一系列的平面设计服务，包括封面设计、排版等工作，为您的宣传物料获得更多的关注度。
我们的宣传物料设计印刷公司也以环保印刷方式生产，运用广阔的平面印刷经验和高质量的印刷技术，实现压低印刷成本，同时保护环境。我们可以确保您的印刷品的色彩、细节和质量达到最佳状态。
我们的公司理念是专业、优质、环保、诚信和快速的服务。我们在整个印刷和设计的过程中，始终关注客户需求，提供优质、专业和最新的解决方案。我们始终坚持提供完美的平面设计印刷服务，从而满足客户的需求和满意度。
</p>
</div>
</div>
<!--//about-->
<!--features-->
<div class="features">
<div class="container">
<h3 class="title">特征</h3>
<div class="col-md-6 features-left">
<!-- <div class="video-img">-->
<!-- <a href="#" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-play"></span></a>-->
<!-- </div>-->
<!--modal-video-->
<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
</div>
</div>
</div>
<!--//modal-video-->
</div>
<div class="col-md-6 features-right bar_group">
<div class='bar_group__bar thin' label='性价比 ' value='200'></div>
<div class='bar_group__bar thin' label='质量' value='250'></div>
<div class='bar_group__bar thin' label='信任与安全' value='180'></div>
<div class='bar_group__bar thin' label='多样化' value='220'></div>
</div>
<!--bar-js-->
<script src="js/bars.js"></script>
<!--bar-js-->
<div class="clearfix"></div>
</div>
</div>
<!--//features-->
<!--services-->
<div id="services" class="services">
<div class="container">
<h3 class="title">服务</h3>
<div class="service-row">
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>画册策划</h5>
<p>画册策划团队100年经验 专属设计师1对1沟通 品牌画册设计咨询 专注于画册设计印刷</p>
</div>
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>画册策划</h5>
<p>画册策划团队100年经验 专属设计师1对1沟通 品牌画册设计咨询 专注于画册设计印刷</p>
</div>
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>画册策划</h5>
<p>画册策划团队100年经验 专属设计师1对1沟通 品牌画册设计咨询 专注于画册设计印刷</p>
</div>
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>画册策划</h5>
<p>画册策划团队100年经验 专属设计师1对1沟通 品牌画册设计咨询 专注于画册设计印刷</p>
</div>
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>商务印刷</h5>
<p>宣传册设计一站式设计制作 专属客服12*7响应服务 数码打样48小时内送达 全国9个印刷基地就近安排</p>
</div>
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>商务印刷</h5>
<p>宣传册设计一站式设计制作 专属客服12*7响应服务 数码打样48小时内送达 全国9个印刷基地就近安排</p>
</div>
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>商务印刷</h5>
<p>宣传册设计一站式设计制作 专属客服12*7响应服务 数码打样48小时内送达 全国9个印刷基地就近安排</p>
</div>
<div class="col-md-3 srvc-grids">
<div class="srvc-img">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
</div>
<h5>商务印刷</h5>
<p>宣传册设计一站式设计制作 专属客服12*7响应服务 数码打样48小时内送达 全国9个印刷基地就近安排</p>
</div>
</div>
</div>
</div>
<!--//services-->
<!--portfolio-->
<div id="portfolio" class="portfolio">
<h3 class="title">作品集</h3>
<div class="sap_tabs">
<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
<ul class="resp-tabs-list">
<li class="resp-tab-item"><span>全部</span></li>
<li class="resp-tab-item"><span>类别 1</span></li>
<li class="resp-tab-item"><span>类别 2</span></li>
<li class="resp-tab-item"><span>类别 3</span></li>
<li class="resp-tab-item"><span>类别 4</span></li>
</ul>
<div class="clearfix"></div>
<div class="resp-tabs-container">
<div class="tab-1 resp-tab-content">
<div class="tab_img">
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g1.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g1.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">
查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g2.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g2.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g3.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g3.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g4.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g4.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g5.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g5.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g6.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g6.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g7.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g7.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g8.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g8.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="tab-1 resp-tab-content">
<div class="tab_img">
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g3.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g3.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g1.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g1.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g5.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g5.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="tab-1 resp-tab-content">
<div class="tab_img">
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g8.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g8.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g2.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g2.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g4.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g4.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="tab-1 resp-tab-content">
<div class="tab_img">
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g5.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g5.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g6.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g6.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g7.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g7.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="tab-1 resp-tab-content">
<div class="tab_img">
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g8.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g8.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="col-md-3 portfolio-grids grid">
<div class="hover ehover14">
<a href="images/g2.jpg" class="swipebox"
title="你好你好，谢谢观看，记得一键三连哦，康桑密达">
<img src="images/g2.jpg" alt="" class="img-responsive"/>
<div class="overlay">
<h4>作品集</h4>
<button class="info nullbutton" data-toggle="modal" data-target="#modal14">查看更多
</button>
</div>
</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!--ResponsiveTabs-->
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true // 100% fit in a container
});
});
</script>
<!--//ResponsiveTabs-->
<!-- swipe box js -->
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$(".swipebox").swipebox();
});
</script>
<!-- //swipe box js -->
</div>
</div>
<!--//portfolio-->
<!--team-->
<div class="team" id="team">
<div class="container">
<h3 class="title">团队</h3>
<div class="team-row">
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t1.jpg" alt="">
<div class="captn">
<p>嗨，我是<span>波妞</span> 你好你好你好，谢谢大家喜欢我。</p>
<div class="social-icons">
<ul>
<li><a href="#"> </a></li>
<li><a href="#" class="pin"> </a></li>
<li><a href="#" class="in"> </a></li>
<li><a href="#" class="be"> </a></li>
<li><a href="#" class="vimeo"> </a></li>
</ul>
</div>
</div>
</div>
<h4>波妞</h4>
<h6>CEO</h6>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t2.jpg" alt="">
<div class="captn">
<p>嗨，我是 <span>魔女。</span> 你好你好你好，谢谢大家喜欢我。</p>
<div class="social-icons">
<ul>
<li><a href="#"> </a></li>
<li><a href="#" class="pin"> </a></li>
<li><a href="#" class="in"> </a></li>
<li><a href="#" class="be"> </a></li>
<li><a href="#" class="vimeo"> </a></li>
</ul>
</div>
</div>
</div>
<h4>魔女</h4>
<h6>CFO</h6>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t3.jpg" alt="">
<div class="captn">
<p>嗨，我是 <span>白龙</span> 你好你好你好，谢谢大家喜欢我。</p>
<div class="social-icons">
<ul>
<li><a href="#"> </a></li>
<li><a href="#" class="pin"> </a></li>
<li><a href="#" class="in"> </a></li>
<li><a href="#" class="be"> </a></li>
<li><a href="#" class="vimeo"> </a></li>
</ul>
</div>
</div>
</div>
<h4>白龙</h4>
<h6>首席设计师</h6>
</div>
<div class="col-md-3 team-grids">
<div class="team-img">
<img class="img-responsive" src="images/t4.jpg" alt="">
<div class="captn">
<p>嗨，我是 <span>千与千寻</span> 你好你好你好，谢谢大家喜欢我。</p>
<div class="social-icons">
<ul>
<li><a href="#"> </a></li>
<li><a href="#" class="pin"> </a></li>
<li><a href="#" class="in"> </a></li>
<li><a href="#" class="be"> </a></li>
<li><a href="#" class="vimeo"> </a></li>
</ul>
</div>
</div>
</div>
<h4>千与千寻</h4>
<h6>客户经理</h6>
</div>
<div class="cearfix"></div>
</div>
</div>
</div>
<!--//team-->
<!--contact-->
<div class="contact" id="contact">
<div class="container">
<h3 class="title">联系我们</h3>
<div class="contact-grids">
<div class="col-md-4 address">
<h4>办公地址</h4>
<p class="cnt-p">中国魔都</p>
<p>浦东新区</p>
<p>长河街道落日路999号</p>
<p>电话 : +00 111 222 3333</p>
<p>传真 : +1 888 888 9999</p>
<p>电子邮箱 : <a href="mailto:shejigongsi@mail.com">mail@example.com</a></p>
</div>
<div class="col-md-7 contact-form">
<form action="#" method="post">
<input type="text" name="Name" placeholder="姓名" required="">
<input class="email" type="text" name="Email" placeholder="电子邮箱" required="">
<textarea placeholder="留言" name="Message" required=""></textarea>
<input type="submit" value="提交">
</form>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!--//contact-->
<!--footer-->
<div class="footer">
<div class="container">
<p>版权所有 © 2024. 公司名称 保留所有权利。</p>
</div>
</div>
<!--//footer-->
<!--smooth-scrolling-of-move-up-->
<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>
<!--//smooth-scrolling-of-move-up-->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/bootstrap.js"></script>
</body>
</html>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
各位同学们：还有啥想看的功能或者特效不？欢迎在评论区留言哦！
本人承接网网站开发，如有需要，欢迎私信咨询！
如果您感觉文章对您有帮助~
那就打赏一下，请笔者喝杯咖啡吧~
给新手学习前端开发的建议：
-
了解基础知识：
- 学习HTML、CSS和JavaScript的基础知识。它们是前端开发的核心，构成了网页的基本结构和样式，以及交互功能。
- 掌握HTML的标签和语义化，了解CSS的选择器和布局技巧，熟悉JavaScript的基本语法和DOM操作。
-
实践项目：
- 不要仅仅停留在理论学习上，通过实践项目来巩固和应用所学知识。
- 可以从简单的静态页面开始，逐渐尝试添加交互效果和动态数据。
- 参与开源项目或自己动手创建一个个人网站，将所学知识应用到实际场景中。
-
学习工具和框架：
- 了解并学习前端开发中常用的工具和框架，如构建工具（Webpack、Gulp等）、版本控制工具（Git）、前端框架（React、Vue、Angular等）。
- 这些工具和框架能够提高开发效率，简化开发流程，是前端开发的重要组成部分。
-
关注前端趋势：
- 前端开发是一个快速发展的领域，新的技术和工具不断涌现。
- 关注前端社区、博客和会议，了解最新的技术趋势和发展方向，保持学习的热情和动力。
-
培养解决问题的能力：
- 前端开发常常会遇到各种问题和挑战，学会独立思考和解决问题是非常重要的。
- 遇到问题时，可以先尝试自己解决，通过查阅文档、搜索资料和社区讨论来找到答案。
- 如果实在无法解决，可以向同事或社区求助，但也要学会总结和分享自己的经验和教训。
-
不断学习和提升：
- 前端开发是一个不断学习和提升的过程，要保持对知识的渴望和追求。
- 可以通过阅读书籍、参加培训、参与开源项目等方式来不断提升自己的技能水平。
- 同时，也要关注自己的职业发展，了解行业的需求和趋势，规划自己的职业道路。
-
注重代码质量和可维护性：
- 编写高质量的代码是前端开发的基本要求之一。
- 学习并遵循代码规范，使用适当的命名和注释来提高代码的可读性。
- 注重代码的结构和逻辑，避免过度嵌套和复杂的逻辑。
- 考虑代码的可维护性，尽量编写可复用和可扩展的代码。
-
参与社区和交流：
- 加入前端开发的社区和论坛，与其他开发者进行交流和分享。
- 通过参与社区活动、回答问题、分享经验等方式，不仅可以提升自己的技能水平，还可以结识更多的同行和朋友。
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
加油吧！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
