javascript - 粘性导航栏，滚动到第一个元素不精确
问题描述
我正在尝试制作一个在滚动到第一个元素（导航）后粘在顶部的导航栏，例如“新闻”。通过点击“新闻”，它的工作不精确。它向下滚动，再次点击“新闻”后，它再次向上滚动到正确的位置。奇怪的是它只发生在导航栏的第一个元素上。我怎样才能解决这个问题？
//Sticky-NavBar
window.onscroll = function() {stickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function stickyNavBar() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}/*Base*/
.contentBody{
background-color: white;
}
/*Sections*/
html {
scroll-behavior: smooth;
}
#header{}
#news{}
#products{background-color: aqua;}
#services{}
#customers{}
#community{}
#contact{}
#about{}
#footer{}
/*Width Element*/
.fitWidth{
width: -webkit-fill-available;
}
.width100{
width: 100%;
}
.fitContBoxLeft{
display: inline-block;
float: left;
}
.fitContBoxRight{
display: inline-block;
float: right;
}
/**/
/*Borders*/
.roundedBorader{
border-radius: 50%;
}
.roundedBox{
border: 1px solid lightgrey;
border-radius: 12px;
}
/*Div*/
.headingBox{
position: relative
background-color: lightgrey;
height: 268;
}
.news{
background-color: purple;
}
.products{
background-color: white;
}
.services{
background-color: limegreen;
}
.customers{
background-color: blue;
}
.pBox1{
float:left;
width: 24.7%;
margin: 1px;
border-radius: 5px;
text-align: center;
}
.headBottomLine{
height: 12%;
width: 100%;
background-color: grey;
}
.leftBox50{
height: auto;
float: left;
background-color: white;
width: 49%;
margin: 2px;
}
.rightBox50{
height: auto;
float: left;
background-color: white;
width: 49%;
margin: 2px;
}
.bodyBox{
height: 200px;
background-color: grey;
}
.aboutUs{
height: 200px;
background-color: white;
}
.footerBox{
min-height: 300px;
background-color: black;
}
/*Backgrounds*/
.headBG{
background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/double-bubble.png");
background-size: cover;
}
/*Position*/
.bottom0{
bottom: 0;
}
.posRel{
position: relative;
}
.posAbs{
position: absolute;
}
/*Float*/
.floatLeft{
float: left;
}
.floatRight{
float: right;
}
/*Alignment*/
.justiText{
text-align: justify;
}
.rightText{
text-align: right;
}
.leftText{
text-align: left;
}
.centerText{
text-align: center;
}
.alignBox{
display: flex;
justify-content: center;
}
/*Padding*/
.pAll-5{
padding: 5%;
}
.pTop-8{
padding-top: 8%;
}
.pTop-5{
padding-top: 5%;
}
.pTop-2{
padding-top: 2%;
}
.mTop-n3{
margin-top: -3%;
}
.mTop-5{
margin-top: auto;
}
.mTop-6{
margin-top: 6%;
}
.pLine{
width:100%;
}
.pLR{
padding-left: 5%;
padding-right: 5%;
}
.pBot-12{
padding-bottom: 12%;
}
.pTop-10{
padding-top: 10%;
}
.pTop-6{
padding-top: 6%;
}
.pTop-1{
padding-top: 2%;
}
.pLeft-30{
padding-left: 30%;
}
.pLeft-25{
padding-left: 25%;
}
.pLeft-20{
padding-left: 20%;
}
.pLeft-10{
padding-left: 10%;
}
.pLeft-5{
padding-left: 5%;
}
.pRight-5{
padding-right: 5%;
}
.pTop-4{
padding-top: 4%;
}
.pAll-20{
padding: 20px;
}
.pLTRB{
padding-left: 15%;
padding-top: 2%;
padding-bottom: 5%;
}
.centerHeadLine{
padding-bottom: 7%;
}
/*Colors*/
.white{
color: white;
}
.black{
color: black;
}
.grey{
color: grey;
}
.lightgrey{
color: lightgrey;
}
div.c{
color: lightgrey;
}
div.b{
color: white;
}
div.a{
color: black;
}
.bgCol-black{
background-color: black;
}
.bgCol-grey{
background-color: grey;
}
.bgCol-purple{
background-color: #8e42c7;
}
.bgCol-white{
background-color: white;
}
.bgCol-lightgrey{
background-color: lightgrey;
}
.bgCol-limegreen{
background-color: limegreen;
}
.bgLightGreyX{
background-color: #d5d2d670;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
/*Heading Colors*/
h1.a{
color: white;
}
h1.b{
color: black;
}
h5.a{
color: white;
}
h4.b{
color: black;
}
h4.a{
color: white;
}
h5.b{
color: black;
}
/*Body*/
body {
margin: 0;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
/*NavBar*/
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*Nav-Dropdown*/
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ea8013;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #94a25c;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* The sticky class*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---------------------------------------------------Header--------------------------------------------------->
<div class='headBG posRel' id='home'>
<div class='pTop-4 pLeft-10'>
<img class='floatLeft roundedBorader' src='https://pbs.twimg.com/media/EaZSuXXXkAAMtJ5?format=jpg&name=360x360' height="150" width="150"/>
<div class='centerHeadLine pLeft-25'>
<h1 class='b'>Welcome friends</h1>
<h5 class='b'><u>The spot where we test some html, css and js</u></h5>
</div>
</div>
<!--NAV-->
<div class="navbar fitWidth" id="navbar">
<a class="active" href="#home">Home</a>
<a class="" href="#news">News</a>
<a class="" href="#products">Products</a>
<a class="" href="#services">Services</a>
<a class="" href="#customers">Customers</a>
<a class="" href="#community">Community</a>
<a class="" href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- //TODO: Modals als POP up einbauen, mit jeweiligen content -->
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<!---------------------------------------------------Content-------------------------------------------------->
<div class='contentBody'>
<!--News-->
<div class='news' id="news">
<h1 class='a centerText pTop-5 mTop-5'>News</h1>
<h5 class='a centerText'>Stay tunned with our News</h5>
<div class='alignBox'>
<div class='leftBox50 alignBox roundedBox'>
<div class='centerText'>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class='rightBox50 alignBox roundedBox'>
<div class='centerText'>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class='alignBox pAll-20' id=''>
<form action="/action_page.php">
<label class='white' for="lname">Newsletter:</label>
<input type="text" id="lname" name="lname">
<input type="submit" value="Submit">
</form>
</div>
</div>
<!--//News-->
<!--Products-->
<div class='products' id='products'>
<h1 class='centerText pTop-6 mTop-5'>Products</h1>
<h5 class='b centerText'>Stay tunned with our products</h5>
<div class='leftText pAll-20'>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class='pAll-20'>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p>Product #1</p>
</div>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p>Product #2</p>
</div>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p>Product #3</p>
</div>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p class='black'>Product #4</p>
</div>
</div>
<div class='pTop-10 pLR'>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus e</p>
</div>
</div>
<!--//Products-->
<!--Services-->
<div class='services' id='services'>
<h1 class='centerText pTop-5 mTop-5'>tile#1</h1>
<h5 class='b centerText'>Stay tunned with our Services</h5>
<div class='pLeft-5 fitContBoxLeft roundedBox'>
<img class='floatLeft' src='https://via.placeholder.com/50'/><br>
<div class='floatLeft pLeft-5'>tile#2</div>
</div>
<div class='pRight-5 fitContBoxRight roundedBox'>
<img class='floatRight' src='https://via.placeholder.com/50'/><br>
<div class='floatRight pRight-5'>tile#3</div>
</div>
<div class='pLeft-5 fitContBoxLeft roundedBox'>
<img class='floatLeft' src='https://via.placeholder.com/50'/><br>
<div class='floatLeft pLeft-5'>tile#4</div>
</div>
<div class='pRight-5 fitContBoxRight roundedBox'>
<img class='floatRight' src='https://via.placeholder.com/50'/><br>
<div class='floatRight pRight-5'>tile#5</div>
</div>
<h4 class='centerText pTop-5'>asdfadsf asdf asdf asd f asdfvices</h4>
<div class=''></div>
</div>
<!--//Services-->
<!--Customers-->
<div class='customers' id='customers'>
<h1 class='a centerText'>Customers</h1>
<div class=''></div>
<div class=''></div>
<p>jgfjhgfghjf</p>
</div>
<!--//Customers-->
<!--Community-->
<div class='' id='Community'>
<h1 class='a centerText'>Community</h1>
<div class=''></div>
<div class=''></div>
</div>
<!--//Community-->
<!--Contact-->
<div class='' id='Contact'>
<h1 class='a centerText'>Contact</h1>
<div class=''></div>
<div class=''></div>
</div>
<!--//Contact-->
<!--About-->
<div class='aboutUs'>
<div></div>
</div>
<!--//About-->
</>
<!---------------------------------------------------Footer--------------------------------------------------->
<div class='footerBox'>
<div></div>
</div>解决方案
在我的情况下，您需要将其更改为 JS/JQuery、JQuery。, 0添加这个脚本，你将拥有更多的控制权，如果你更改为毫秒，你将能够制作动画。请注意，我正在从容器位置中减去导航栏高度。
$(document).ready(function(){
$("#navbar a").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - $("#navbar").height()
}, 0);
});
});
//Sticky-NavBar
window.onscroll = function() {stickyNavBar()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function stickyNavBar() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
$(document).ready(function(){
$("#navbar a").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - $("#navbar").height()
}, 0);
});
});/*Base*/
.contentBody{
background-color: white;
}
/*Sections*/
html {
scroll-behavior: smooth;
}
#header{}
#news{}
#products{background-color: aqua;}
#services{}
#customers{}
#community{}
#contact{}
#about{}
#footer{}
/*Width Element*/
.fitWidth{
width: -webkit-fill-available;
}
.width100{
width: 100%;
}
.fitContBoxLeft{
display: inline-block;
float: left;
}
.fitContBoxRight{
display: inline-block;
float: right;
}
/**/
/*Borders*/
.roundedBorader{
border-radius: 50%;
}
.roundedBox{
border: 1px solid lightgrey;
border-radius: 12px;
}
/*Div*/
.headingBox{
position: relative
background-color: lightgrey;
height: 268;
}
.news{
background-color: purple;
}
.products{
background-color: white;
}
.services{
background-color: limegreen;
}
.customers{
background-color: blue;
}
.pBox1{
float:left;
width: 24.7%;
margin: 1px;
border-radius: 5px;
text-align: center;
}
.headBottomLine{
height: 12%;
width: 100%;
background-color: grey;
}
.leftBox50{
height: auto;
float: left;
background-color: white;
width: 49%;
margin: 2px;
}
.rightBox50{
height: auto;
float: left;
background-color: white;
width: 49%;
margin: 2px;
}
.bodyBox{
height: 200px;
background-color: grey;
}
.aboutUs{
height: 200px;
background-color: white;
}
.footerBox{
min-height: 300px;
background-color: black;
}
/*Backgrounds*/
.headBG{
background-image: url("https://www.toptal.com/designers/subtlepatterns/patterns/double-bubble.png");
background-size: cover;
}
/*Position*/
.bottom0{
bottom: 0;
}
.posRel{
position: relative;
}
.posAbs{
position: absolute;
}
/*Float*/
.floatLeft{
float: left;
}
.floatRight{
float: right;
}
/*Alignment*/
.justiText{
text-align: justify;
}
.rightText{
text-align: right;
}
.leftText{
text-align: left;
}
.centerText{
text-align: center;
}
.alignBox{
display: flex;
justify-content: center;
}
/*Padding*/
.pAll-5{
padding: 5%;
}
.pTop-8{
padding-top: 8%;
}
.pTop-5{
padding-top: 5%;
}
.pTop-2{
padding-top: 2%;
}
.mTop-n3{
margin-top: -3%;
}
.mTop-5{
margin-top: auto;
}
.mTop-6{
margin-top: 6%;
}
.pLine{
width:100%;
}
.pLR{
padding-left: 5%;
padding-right: 5%;
}
.pBot-12{
padding-bottom: 12%;
}
.pTop-10{
padding-top: 10%;
}
.pTop-6{
padding-top: 6%;
}
.pTop-1{
padding-top: 2%;
}
.pLeft-30{
padding-left: 30%;
}
.pLeft-25{
padding-left: 25%;
}
.pLeft-20{
padding-left: 20%;
}
.pLeft-10{
padding-left: 10%;
}
.pLeft-5{
padding-left: 5%;
}
.pRight-5{
padding-right: 5%;
}
.pTop-4{
padding-top: 4%;
}
.pAll-20{
padding: 20px;
}
.pLTRB{
padding-left: 15%;
padding-top: 2%;
padding-bottom: 5%;
}
.centerHeadLine{
padding-bottom: 7%;
}
/*Colors*/
.white{
color: white;
}
.black{
color: black;
}
.grey{
color: grey;
}
.lightgrey{
color: lightgrey;
}
div.c{
color: lightgrey;
}
div.b{
color: white;
}
div.a{
color: black;
}
.bgCol-black{
background-color: black;
}
.bgCol-grey{
background-color: grey;
}
.bgCol-purple{
background-color: #8e42c7;
}
.bgCol-white{
background-color: white;
}
.bgCol-lightgrey{
background-color: lightgrey;
}
.bgCol-limegreen{
background-color: limegreen;
}
.bgLightGreyX{
background-color: #d5d2d670;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }
/*Heading Colors*/
h1.a{
color: white;
}
h1.b{
color: black;
}
h5.a{
color: white;
}
h4.b{
color: black;
}
h4.a{
color: white;
}
h5.b{
color: black;
}
/*Body*/
body {
margin: 0;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}
/*NavBar*/
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*Nav-Dropdown*/
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ea8013;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #94a25c;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* The sticky class*/
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!---------------------------------------------------Header--------------------------------------------------->
<div class='headBG posRel' id='home'>
<div class='pTop-4 pLeft-10'>
<img class='floatLeft roundedBorader' src='https://pbs.twimg.com/media/EaZSuXXXkAAMtJ5?format=jpg&name=360x360' height="150" width="150"/>
<div class='centerHeadLine pLeft-25'>
<h1 class='b'>Welcome friends</h1>
<h5 class='b'><u>The spot where we test some html, css and js</u></h5>
</div>
</div>
<!--NAV-->
<div class="navbar fitWidth" id="navbar">
<a class="active" href="#home">Home</a>
<a class="" href="#news">News</a>
<a class="" href="#products">Products</a>
<a class="" href="#services">Services</a>
<a class="" href="#customers">Customers</a>
<a class="" href="#community">Community</a>
<a class="" href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn">About
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- //TODO: Modals als POP up einbauen, mit jeweiligen content -->
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
<!---------------------------------------------------Content-------------------------------------------------->
<div class='contentBody'>
<!--News-->
<div class='news' id="news">
<h1 class='a centerText pTop-5 mTop-5'>News</h1>
<h5 class='a centerText'>Stay tunned with our News</h5>
<div class='alignBox'>
<div class='leftBox50 alignBox roundedBox'>
<div class='centerText'>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class='rightBox50 alignBox roundedBox'>
<div class='centerText'>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class='alignBox pAll-20' id=''>
<form action="/action_page.php">
<label class='white' for="lname">Newsletter:</label>
<input type="text" id="lname" name="lname">
<input type="submit" value="Submit">
</form>
</div>
</div>
<!--//News-->
<!--Products-->
<div class='products' id='products'>
<h1 class='centerText pTop-6 mTop-5'>Products</h1>
<h5 class='b centerText'>Stay tunned with our products</h5>
<div class='leftText pAll-20'>
<h4>Lorem ipsum</h4>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class='pAll-20'>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p>Product #1</p>
</div>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p>Product #2</p>
</div>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p>Product #3</p>
</div>
<div class='white pBox1 bgLightGreyX'>
<img class='pTop-5' src='https://via.placeholder.com/150'/><br>
<p class='black'>Product #4</p>
</div>
</div>
<div class='pTop-10 pLR'>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus e</p>
</div>
</div>
<!--//Products-->
<!--Services-->
<div class='services' id='services'>
<h1 class='centerText pTop-5 mTop-5'>tile#1</h1>
<h5 class='b centerText'>Stay tunned with our Services</h5>
<div class='pLeft-5 fitContBoxLeft roundedBox'>
<img class='floatLeft' src='https://via.placeholder.com/50'/><br>
<div class='floatLeft pLeft-5'>tile#2</div>
</div>
<div class='pRight-5 fitContBoxRight roundedBox'>
<img class='floatRight' src='https://via.placeholder.com/50'/><br>
<div class='floatRight pRight-5'>tile#3</div>
</div>
<div class='pLeft-5 fitContBoxLeft roundedBox'>
<img class='floatLeft' src='https://via.placeholder.com/50'/><br>
<div class='floatLeft pLeft-5'>tile#4</div>
</div>
<div class='pRight-5 fitContBoxRight roundedBox'>
<img class='floatRight' src='https://via.placeholder.com/50'/><br>
<div class='floatRight pRight-5'>tile#5</div>
</div>
<h4 class='centerText pTop-5'>asdfadsf asdf asdf asd f asdfvices</h4>
<div class=''></div>
</div>
<!--//Services-->
<!--Customers-->
<div class='customers' id='customers'>
<h1 class='a centerText'>Customers</h1>
<div class=''></div>
<div class=''></div>
<p>jgfjhgfghjf</p>
</div>
<!--//Customers-->
<!--Community-->
<div class='' id='Community'>
<h1 class='a centerText'>Community</h1>
<div class=''></div>
<div class=''></div>
</div>
<!--//Community-->
<!--Contact-->
<div class='' id='Contact'>
<h1 class='a centerText'>Contact</h1>
<div class=''></div>
<div class=''></div>
</div>
<!--//Contact-->
<!--About-->
<div class='aboutUs'>
<div></div>
</div>
<!--//About-->
</>
<!---------------------------------------------------Footer--------------------------------------------------->
<div class='footerBox'>
<div></div>
</div>推荐阅读
- swift - 在重新加载数据时维护 UISwipeActionsConfiguration
- sikuli - 知道如何使用 Sikulix 命令在 word 中插入表格（包含行和列）吗？
- vba - 使用VBA根据表id将大量附件导入Microsoft Access
- web-scraping - 滚动到下一页并提取数据
- c - 如何设置一个只有 makefile 和源代码的 C 程序，以便使用 QtCreator 进行调试？
- python - SQLalchemy：在两列或多列中选择满足条件的行
- ignite - Apache ignite 客户端节点重新连接出现错误 org.apache.ignite.internal.processors.cache.CacheStoppedException：无法执行缓存操作
- javascript - 在表格内搜索元素时表格标题保持固定
- mysql - CentOS7上MYSQL和MYSQLD不能启动MySQL 5.7企业版
- bokeh - Bokeh，独立 html，访问由 CustomAction 创建的 div 以添加样式 bk-active