html - anchor 链接切断标题

标签 html css

我的页面上有 anchor 链接问题。单击时，我的标题元素会被部分遮挡。该错误与以下内容的使用有关:

#container {
  overflow: hidden;
}

我需要阻止溢出错误(由于我使用 CSS 旋转，我需要它来制作品牌/样式)。

我已经尝试删除上面的内容并将其替换为流行的替代方法，例如:

html, body {
  overflow-x: hidden;
}

但这会导致其他问题。

感谢任何和所有建议。附上完整代码。要模拟问题运行代码，请单击全屏(在桌面上)，然后单击“关于我们”按钮。

function myFunction() {
  var x = document.getElementById("primaryNav");
  if (x.className === "bg-blue header-nav") {
    x.className += " open";
  } else {
    x.className = "bg-blue header-nav";
  }
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	font-size:100%;
	vertical-align:baseline
}
html{
	line-height:1
}
ol,ul{
	list-style:none
}
table{
	border-collapse:collapse;
	border-spacing:0
}
caption,th,td{
	text-align:left;
	font-weight:normal;
	vertical-align:middle
}
q,blockquote{
	quotes:none
}
q:before,q:after,blockquote:before,blockquote:after{
	content:"";
	content:none
}
a img{
	border:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
	display:block
}
@font-face{
	font-family:quicksandbold;
	src:url(../fonts/quicksand-bold-webfont.eot);
	src:url(../fonts/quicksand-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-bold-webfont.woff) format("woff"),url(../fonts/quicksand-bold-webfont.ttf) format("truetype"),url(../fonts/quicksand-bold-webfont.svg#quicksandbold) format("svg");
	font-weight:400;
	font-style:normal
}
@font-face{
	font-family:quicksandregular;
	src:url(../fonts/quicksand-regular-webfont.eot);
	src:url(../fonts/quicksand-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-regular-webfont.woff) format("woff"),url(../fonts/quicksand-regular-webfont.ttf) format("truetype"),url(../fonts/quicksand-regular-webfont.svg#quicksandregular) format("svg");
	font-weight:400;
	font-style:normal
}
article li,h1,p,span{
	font-family:quicksandregular
}
#blogintro header,.fpblog time,footer p,a,h2,h3,h4,h5,h6{
	font-family:quicksandbold
}
#primaryNav,.lrg-font,h2{
	font-size:1.4em
}
h1{
	font-size:8vw
}
h1 span.full{
	font-size:11vw
}
.width-fix{
	width:89%
}
.rotate p{
	font-size:1em;
	line-height:1
}
p,.stop-rotate p,.stop-rotate ul li{
	line-height:1.4;
	font-size:1.2em
}
h3,h4{
	font-size:1.4em
}
small{
	font-size:0.8em
}
ul{
	text-align:left;
	margin:0 auto;
	max-width:800px;
	padding-left:30px;
	width:70%
}
ul li{
	padding-bottom:5px
}
ul li::before{
	content:"\2022";
	color:#000;
	display:inline-block;
	width:1em;
	margin-left:-1em
}
body{
	background-color:#27AAE1
}
*{
	box-sizing:border-box;
	padding:0;
	margin:0
}
.hide{
	display:none
}
.full-height{
	display:grid;
	width:100vw;
	height:calc(100vh - 92px)
}
.limit-width p,footer{
	margin:0 auto;
	max-width:90%
}
.limit-width-lrg p{
	margin:0 auto;
	width:65%;
	max-width:870px
}
.white{
	color:#fff
}
.bg-blue{
	background-color:#27AAE1
}
.blue{
	color:#27AAE1
}
.bold,.bold li,.bold p{
	font-family:quicksandbold
}
.cntr{
	text-align:center
}
.bg-white{
	background-color:#fff
}
.rotate{
	transform:rotate(-15deg)
}
.stop-rotate{
	transform:rotate(15deg)
}
.txt-center{
	display:grid;
	align-items:center
}
.txt-base{
	display:grid;
	align-items:end
}
.force-base{
	bottom:0;
	position:absolute;
	left:calc(50% - 200px)
}
.mrg-top{
	margin-top:10%
}
body .mrg-top-sml{
	margin-top:40px
}
.pad-top{
	padding-top:20px
}
.pad-top-lrg{
	padding-top:40px
}
.pad-top-xlrg{
	padding-top:13.75vh
}
.pad-btm{
	padding-bottom:20px
}
.pad-top-sml{
	padding-top:5%
}
.section-pad{
	padding:15% 0
}
.bg-2 .button{
	color:#ECEFF1;
	border-color:#ECEFF1
}
.button--winona{
	overflow:hidden;
	padding:0;
	-webkit-transition:border-color 0.3s, background-color 0.3s;
	transition:border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona::after,.button--winona>span{
	padding:1em 0;
	transition:transform 0.3s, opacity 0.3s;
	transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover{
	background-color:#fff
}
.button--border-thick{
	border:3px solid
}
.button--text-thick{
	font-weight:600
}
.button--text-upper{
	letter-spacing:2px;
	text-transform:uppercase
}
.button--size-s{
	font-size:14px
}
.button{
	min-width:150px;
	max-width:210px;
	display:block;
	margin:0 auto;
	border:3px #27AAE1;
	border-style:dashed;
	background:rgba(39,170,225,0.12);
	color:inherit;
	position:relative;
	z-index:1;
	-webkit-backface-visibility:hidden;
	-moz-osx-font-smoothing:grayscale
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
	-webkit-appearance:button;
	cursor:pointer
}
button,input{
	line-height:normal
}
button{
	align-items:flex-start;
	text-align:center
}
.button--winona>span{
	display:block
}
.button>span{
	vertical-align:middle
}
.button--winona::after,.button--winona>span{
	padding:1em 0;
	-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
	transition:transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover::after{
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
}
.button--winona::after{
	content:attr(data-text);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	opacity:0;
	color:#000;
	-webkit-transform:translate3d(0, 25%, 0);
	transform:translate3d(0, 25%, 0)
}
.button--winona:hover>span{
	opacity:0;
	-webkit-transform:translate3d(0, -25%, 0);
	transform:translate3d(0, -25%, 0)
}
a.btn-link{
	color:inherit;
	text-decoration:none
}
#primaryNav{
	padding:0 20px;
	position:relative;
	text-align:center
}
#primaryNav a:first-of-type{
	padding-top:20px
}
#primaryNav a{
	display:none;
	color:#fff;
	padding-bottom:20px;
	text-decoration:none
}
#primaryNav a#nav-burger{
	display:block;
	position:absolute;
	right:20px;
	top:-50px;
	z-index:999
}
#primaryNav.open a{
	display:block
}
#primaryNav #nav-burger{
	width:25px;
	height:23px;
	position:relative;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:.5s ease-in-out;
	-moz-transition:.5s ease-in-out;
	-o-transition:.5s ease-in-out;
	transition:.5s ease-in-out;
	cursor:pointer
}
#primaryNav #nav-burger span{
	display:block;
	position:absolute;
	height:3px;
	width:100%;
	background:#fff;
	border-radius:9px;
	opacity:1;
	left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:.25s ease-in-out;
	-moz-transition:.25s ease-in-out;
	-o-transition:.25s ease-in-out;
	transition:.25s ease-in-out
}
#primaryNav #nav-burger span:nth-child(1){
	top:0px;
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	-o-transform-origin:left center;
	transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(2){
	top:7px;
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	-o-transform-origin:left center;
	transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(3){
	top:14px;
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	-o-transform-origin:left center;
	transform-origin:left center
}
#primaryNav.open #nav-burger span:nth-child(1){
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
	top:0;
	left:5px
}
#primaryNav.open #nav-burger span:nth-child(2){
	width:0%;
	opacity:0
}
#primaryNav.open #nav-burger span:nth-child(3){
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
	top:18px;
	left:5px
}
#container{
	overflow:hidden
}
#logo{
	padding-top:20px;
	text-align:center
}
#logo svg{
	max-width:120px
}
.spill{
	width:130%;
	margin-left:-15%
}
.stripe-sml{
	height:11vh
}
.stripe-sml p{
	line-height:1.5;
	padding-bottom:18px
}
.stripe-lrg{
	height:18vh
}
#scroll-down{
	max-width:30px
}
footer{
	text-align:center
}
@media only screen and (min-width: 50px){
	.foo2{
		display:none
}
}
@media only screen and (min-width: 501px){
	h1{
		font-size:40px
}
}
@media only screen and (min-width: 801px){
	.limit-width p{
		margin:0 auto;
		max-width:60%
}
	.full-height{
		height:calc(100vh - 154px)
}
	.mrg-top{
		margin-top:5%
}
	h1{
		font-size:6vw;
		line-height:1.4
}
	h1 .white.bold{
		line-height:2;
		font-size:0.73em
}
	h1 .full{
		margin-bottom:-2%
}
	h3,h4{
		font-size:2vw
}
	ul{
		width:100%;
		padding-left:80px
}
	.lrg-title{
		font-size:3vw
}
	#primaryNav a{
		display:inline-block !important;
		padding:20px 10px
}
	#primaryNav a#nav-burger{
		display:none !important
}
	.height-override{
		height:auto
}
	.stripe-lrg h1 br{
		display:none
}
	#scroll-down{
		bottom:20px;
		position:absolute;
		left:calc(50% - 30px)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lorem ipsum. | Lorem ipsum.Lorem ipsum.</title>
<link rel="canonical" href="#" /><link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="/v2/assets/styles/screen.css?236" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">
  <header class="bg-blue" id="top">
  <div id="logo" class="float">
    <a href="#">
		<svg id="a3ce43e8-fb65-4daf-adde-8a5b63a92355" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.71 66.3"><defs><style>.b619fcf4-8929-47b2-8667-741fdd67a7c1{fill:#fff;}</style></defs><title>Lorem ipsum.</title><g id="b100e093-4f59-489c-bf94-25ea2e312f6f" data-name="Group 1"><path id="ba36fb6c-3443-4def-ab41-3ef77b8ca3b4" data-name="Path 1" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M90.17,52.58a22,22,0,1,1,19.07-33.09l6.36-3.65a29.57,29.57,0,1,0-.09,29.52l-6.33-3.68A22,22,0,0,1,90.17,52.58Z" transform="translate(0.11 -0.31)"/><path id="e0462462-ad6f-44e0-9063-0ba927c00cc9" data-name="Path 2" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M45.7,5.27a29.5,29.5,0,0,0-16.41-5h0A29.63,29.63,0,0,0,4.53,13.57C.28,20-.24,24.86-.09,34.43V66.61H7.18V49.87A29.7,29.7,0,1,0,45.7,5.27Zm1.93,37c-.25.36-.5.72-.76,1.06l-.24.32c-.19.24-.38.47-.58.7l-.28.33c-.21.23-.41.45-.63.67a3.07,3.07,0,0,1-.25.26c-.3.3-.6.59-.91.87l-.09.08c-.28.25-.57.5-.87.73l-.3.24L42,48l-.34.23c-.25.18-.51.34-.77.5a2.61,2.61,0,0,1-.28.17c-.35.22-.71.42-1.07.61l-.16.08-1,.46-.35.15c-.26.12-.53.23-.8.33l-.37.14c-.3.11-.59.21-.89.3a2.29,2.29,0,0,1-.28.09c-.38.12-.78.23-1.17.33l-.25.06-.95.2-.39.07-.84.12-.4,0q-.48.06-1,.09l-.26,0c-.4,0-.81,0-1.22,0h-.23c-.4,0-.8,0-1.21,0l-.34,0-1.39-.15-.19,0c-.4-.06-.81-.14-1.22-.22l-.35-.08c-.46-.1-.91-.22-1.37-.35l-.14,0c-.41-.12-.82-.26-1.23-.41l-.34-.13c-.45-.18-.9-.36-1.34-.57l-.08,0c-.41-.19-.82-.41-1.23-.63l-.33-.19c-.43-.24-.85-.5-1.27-.78A22,22,0,0,1,10.9,17.79c.24-.36.5-.72.75-1.06l.25-.32c.18-.24.37-.47.57-.7l.29-.33c.2-.23.41-.45.62-.67l.25-.27c.3-.3.6-.59.91-.86l.12-.1c.27-.24.55-.48.84-.71l.32-.25.7-.51.35-.24c.25-.17.5-.34.76-.5l.28-.17c.35-.21.71-.41,1.07-.6l.19-.1c.3-.16.6-.3.92-.44l.36-.17.79-.32.38-.15L22.5,9l.28-.09c.39-.12.78-.22,1.17-.32l.27-.06c.31-.08.62-.14.92-.2l.4-.07.83-.13.41-.05,1-.09L28,8c.4,0,.81,0,1.21,0h.26c.39,0,.79,0,1.18,0L31,8l1.38.15.21,0q.6.09,1.2.21l.35.08c.46.1.91.22,1.36.35l.16.05c.41.12.81.26,1.22.41l.34.13c.45.17.89.36,1.33.56l.08,0c.42.2.82.41,1.23.63l.33.19c.43.24.85.5,1.27.77a22.07,22.07,0,0,1,6.18,30.58Z" transform="translate(0.11 -0.31)"/></g></svg>
	</a>
  </div>
</header>

<nav id="primaryNav" class="bg-blue header-nav">
  <a href="#">Services</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
  <a href="javascript:void(0);" id="nav-burger" class="icon" onclick="myFunction()">
    <span></span>
	<span></span>
	<span></span>
  </a>
</nav>  
  <!-- Home Content -->
<article>
  <section class="bg-blue full-height">
  	<section class="rotate bg-white txt-base cntr mrg-top stripe-sml spill">
		<p class="force-base"><span class="bold">We're rebuilding our website...</span><br>Check back shortly to see what we've been up to!</p>
	</section>
  	<section class="cntr spill txt-center rotate stripe-lrg height-override">
		<h1>
			<div class="full">Lorem ipsum.</div>
			<br>
			<div class="white bold">Lorem ipsum. Digital Agency</div>
		</h1>
	</section>
  	<section class="rotate cntr bg-white txt-center stripe-lrg spill">
		<p>Think web design, think Lorem ipsum.</p>
  		<a class="btn-link" href="#about-us">
		  <button class="button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Read More"><span>About Us</span></button>
		</a>
  		<p>We Rethink, We Build, We Optimise</p>
	</section>
	<section class="cntr stripe-lrg">
	    <a href="#about-us"><svg id="scroll-down" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.22 26.16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Scroll Down</title><g id="Group_2" data-name="Group 2"><path id="Path_3" data-name="Path 3" class="cls-1" d="M12.81,26.14,1.11,14.44a1.91,1.91,0,0,1,2.7-2.7h0L14.16,22.1,24.51,11.75a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g><g id="Group_4" data-name="Group 4"><path id="Path_3-2" data-name="Path 3-2" class="cls-1" d="M12.81,15.5,1.11,3.8a1.91,1.91,0,0,1,2.7-2.7h0L14.16,11.46,24.51,1.11a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g></svg></a>
	</section>
  </section>
  <section class="section-pad limit-width">
	<h2 id="about-us" class="white cntr lrg-title pad-btm">About Us</h2>
	<p class="bold white cntr">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
  </section>
  <section class="rotate bold bg-white section-pad cntr txt-center pad-btm limit-width-lrg spill">
	<span class="stop-rotate">
    <h3 class="pad-btm">Work With Us</h3>
	<p class="bold pad-btm">Lorem ipsum.</p>
	<p class="pad-btm">Lorem ipsum.</p> 
	<p>Lorem ipsum</p>
	<h4 class="pad-btm pad-top-lrg mrg-top-sml">What we're looking for:</h4>
	<ul>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	</ul>
	<a class="btn-link" href="#">
	  <button class="mrg-top-sml button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Apply Now"><span>Apply Now</span></button>
	</a>
	</span>
  </section>
</article>
  <footer class="pad-top-xlrg">
  <p class="pad-top white"><small>Lorem Ipsum is a trading style of 'Lorem Ipsum'.</small></p>
  <p class="white pad-btm"><small>&copy; Lorem Ipsum Copyright 2020, All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>

最佳答案

修复:

I just remove overflow form #containeras the issue is with this overflow, and add overflow-x:hiddento body and also add scroll-behavior: smooth to html and body for smooth scrolling.

function myFunction() {
  var x = document.getElementById("primaryNav");
  if (x.className === "bg-blue header-nav") {
    x.className += " open";
  } else {
    x.className = "bg-blue header-nav";
  }
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	font-size:100%;
	vertical-align:baseline
}
html{
	line-height:1
}

ol,ul{
	list-style:none
}
table{
	border-collapse:collapse;
	border-spacing:0
}
caption,th,td{
	text-align:left;
	font-weight:normal;
	vertical-align:middle
}
q,blockquote{
	quotes:none
}
q:before,q:after,blockquote:before,blockquote:after{
	content:"";
	content:none
}
a img{
	border:none
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{
	display:block
}
@font-face{
	font-family:quicksandbold;
	src:url(../fonts/quicksand-bold-webfont.eot);
	src:url(../fonts/quicksand-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-bold-webfont.woff) format("woff"),url(../fonts/quicksand-bold-webfont.ttf) format("truetype"),url(../fonts/quicksand-bold-webfont.svg#quicksandbold) format("svg");
	font-weight:400;
	font-style:normal
}
@font-face{
	font-family:quicksandregular;
	src:url(../fonts/quicksand-regular-webfont.eot);
	src:url(../fonts/quicksand-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../fonts/quicksand-regular-webfont.woff) format("woff"),url(../fonts/quicksand-regular-webfont.ttf) format("truetype"),url(../fonts/quicksand-regular-webfont.svg#quicksandregular) format("svg");
	font-weight:400;
	font-style:normal
}
article li,h1,p,span{
	font-family:quicksandregular
}
#blogintro header,.fpblog time,footer p,a,h2,h3,h4,h5,h6{
	font-family:quicksandbold
}
#primaryNav,.lrg-font,h2{
	font-size:1.4em
}
h1{
	font-size:8vw
}
h1 span.full{
	font-size:11vw
}
.width-fix{
	width:89%
}
.rotate p{
	font-size:1em;
	line-height:1
}
p,.stop-rotate p,.stop-rotate ul li{
	line-height:1.4;
	font-size:1.2em
}
h3,h4{
	font-size:1.4em
}
small{
	font-size:0.8em
}
ul{
	text-align:left;
	margin:0 auto;
	max-width:800px;
	padding-left:30px;
	width:70%
}
ul li{
	padding-bottom:5px
}
ul li::before{
	content:"\2022";
	color:#000;
	display:inline-block;
	width:1em;
	margin-left:-1em
}
body{
	background-color:#27AAE1
}
*{
	box-sizing:border-box;
	padding:0;
	margin:0
}
.hide{
	display:none
}
.full-height{
	display:grid;
	width:100vw;
	height:calc(100vh - 92px)
}
.limit-width p,footer{
	margin:0 auto;
	max-width:90%
}
.limit-width-lrg p{
	margin:0 auto;
	width:65%;
	max-width:870px
}
.white{
	color:#fff
}
.bg-blue{
	background-color:#27AAE1
}
.blue{
	color:#27AAE1
}
.bold,.bold li,.bold p{
	font-family:quicksandbold
}
.cntr{
	text-align:center
}
.bg-white{
	background-color:#fff
}
.rotate{
	transform:rotate(-15deg)
}
.stop-rotate{
	transform:rotate(15deg)
}
.txt-center{
	display:grid;
	align-items:center
}
.txt-base{
	display:grid;
	align-items:end
}
.force-base{
	bottom:0;
	position:absolute;
	left:calc(50% - 200px)
}
.mrg-top{
	margin-top:10%
}
body .mrg-top-sml{
	margin-top:40px
}
.pad-top{
	padding-top:20px
}
.pad-top-lrg{
	padding-top:40px
}
.pad-top-xlrg{
	padding-top:13.75vh
}
.pad-btm{
	padding-bottom:20px
}
.pad-top-sml{
	padding-top:5%
}
.section-pad{
	padding:15% 0
}
.bg-2 .button{
	color:#ECEFF1;
	border-color:#ECEFF1
}
.button--winona{
	overflow:hidden;
	padding:0;
	-webkit-transition:border-color 0.3s, background-color 0.3s;
	transition:border-color 0.3s, background-color 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona::after,.button--winona>span{
	padding:1em 0;
	transition:transform 0.3s, opacity 0.3s;
	transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover{
	background-color:#fff
}
.button--border-thick{
	border:3px solid
}
.button--text-thick{
	font-weight:600
}
.button--text-upper{
	letter-spacing:2px;
	text-transform:uppercase
}
.button--size-s{
	font-size:14px
}
.button{
	min-width:150px;
	max-width:210px;
	display:block;
	margin:0 auto;
	border:3px #27AAE1;
	border-style:dashed;
	background:rgba(39,170,225,0.12);
	color:inherit;
	position:relative;
	z-index:1;
	-webkit-backface-visibility:hidden;
	-moz-osx-font-smoothing:grayscale
}
button,html input[type="button"],input[type="reset"],input[type="submit"]{
	-webkit-appearance:button;
	cursor:pointer
}
button,input{
	line-height:normal
}
button{
	align-items:flex-start;
	text-align:center
}
.button--winona>span{
	display:block
}
.button>span{
	vertical-align:middle
}
.button--winona::after,.button--winona>span{
	padding:1em 0;
	-webkit-transition:-webkit-transform 0.3s, opacity 0.3s;
	transition:transform 0.3s, opacity 0.3s;
	-webkit-transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function:cubic-bezier(0.2, 1, 0.3, 1)
}
.button--winona:hover::after{
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
}
.button--winona::after{
	content:attr(data-text);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	opacity:0;
	color:#000;
	-webkit-transform:translate3d(0, 25%, 0);
	transform:translate3d(0, 25%, 0)
}
.button--winona:hover>span{
	opacity:0;
	-webkit-transform:translate3d(0, -25%, 0);
	transform:translate3d(0, -25%, 0)
}
a.btn-link{
	color:inherit;
	text-decoration:none
}
#primaryNav{
	padding:0 20px;
	position:relative;
	text-align:center
}
#primaryNav a:first-of-type{
	padding-top:20px
}
#primaryNav a{
	display:none;
	color:#fff;
	padding-bottom:20px;
	text-decoration:none
}
#primaryNav a#nav-burger{
	display:block;
	position:absolute;
	right:20px;
	top:-50px;
	z-index:999
}
#primaryNav.open a{
	display:block
}
#primaryNav #nav-burger{
	width:25px;
	height:23px;
	position:relative;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:.5s ease-in-out;
	-moz-transition:.5s ease-in-out;
	-o-transition:.5s ease-in-out;
	transition:.5s ease-in-out;
	cursor:pointer
}
#primaryNav #nav-burger span{
	display:block;
	position:absolute;
	height:3px;
	width:100%;
	background:#fff;
	border-radius:9px;
	opacity:1;
	left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	-webkit-transition:.25s ease-in-out;
	-moz-transition:.25s ease-in-out;
	-o-transition:.25s ease-in-out;
	transition:.25s ease-in-out
}
#primaryNav #nav-burger span:nth-child(1){
	top:0px;
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	-o-transform-origin:left center;
	transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(2){
	top:7px;
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	-o-transform-origin:left center;
	transform-origin:left center
}
#primaryNav #nav-burger span:nth-child(3){
	top:14px;
	-webkit-transform-origin:left center;
	-moz-transform-origin:left center;
	-o-transform-origin:left center;
	transform-origin:left center
}
#primaryNav.open #nav-burger span:nth-child(1){
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
	top:0;
	left:5px
}
#primaryNav.open #nav-burger span:nth-child(2){
	width:0%;
	opacity:0
}
#primaryNav.open #nav-burger span:nth-child(3){
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
	top:18px;
	left:5px
}

#logo{
	padding-top:20px;
	text-align:center
}
#logo svg{
	max-width:120px
}
.spill{
	width:130%;
	margin-left:-15%
}
.stripe-sml{
	height:11vh
}
.stripe-sml p{
	line-height:1.5;
	padding-bottom:18px
}
.stripe-lrg{
	height:18vh
}
#scroll-down{
	max-width:30px
}
footer{
	text-align:center
}
@media only screen and (min-width: 50px){
	.foo2{
		display:none
}
}
@media only screen and (min-width: 501px){
	h1{
		font-size:40px
}
}
@media only screen and (min-width: 801px){
	.limit-width p{
		margin:0 auto;
		max-width:60%
}
	.full-height{
		height:calc(100vh - 154px)
}
	.mrg-top{
		margin-top:5%
}
	h1{
		font-size:6vw;
		line-height:1.4
}
	h1 .white.bold{
		line-height:2;
		font-size:0.73em
}
	h1 .full{
		margin-bottom:-2%
}
	h3,h4{
		font-size:2vw
}
	ul{
		width:100%;
		padding-left:80px
}
	.lrg-title{
		font-size:3vw
}
	#primaryNav a{
		display:inline-block !important;
		padding:20px 10px
}
	#primaryNav a#nav-burger{
		display:none !important
}
	.height-override{
		height:auto
}
	.stripe-lrg h1 br{
		display:none
}
	#scroll-down{
		bottom:20px;
		position:absolute;
		left:calc(50% - 30px)
}
}
html,body{
 scroll-behavior: smooth;
}
body{
  overflow-x: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Lorem ipsum. | Lorem ipsum.Lorem ipsum.</title>
<link rel="canonical" href="#" /><link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="/v2/assets/styles/screen.css?236" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">
  <header class="bg-blue" id="top">
  <div id="logo" class="float">
    <a href="#">
		<svg id="a3ce43e8-fb65-4daf-adde-8a5b63a92355" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 115.71 66.3"><defs><style>.b619fcf4-8929-47b2-8667-741fdd67a7c1{fill:#fff;}</style></defs><title>Lorem ipsum.</title><g id="b100e093-4f59-489c-bf94-25ea2e312f6f" data-name="Group 1"><path id="ba36fb6c-3443-4def-ab41-3ef77b8ca3b4" data-name="Path 1" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M90.17,52.58a22,22,0,1,1,19.07-33.09l6.36-3.65a29.57,29.57,0,1,0-.09,29.52l-6.33-3.68A22,22,0,0,1,90.17,52.58Z" transform="translate(0.11 -0.31)"/><path id="e0462462-ad6f-44e0-9063-0ba927c00cc9" data-name="Path 2" class="b619fcf4-8929-47b2-8667-741fdd67a7c1" d="M45.7,5.27a29.5,29.5,0,0,0-16.41-5h0A29.63,29.63,0,0,0,4.53,13.57C.28,20-.24,24.86-.09,34.43V66.61H7.18V49.87A29.7,29.7,0,1,0,45.7,5.27Zm1.93,37c-.25.36-.5.72-.76,1.06l-.24.32c-.19.24-.38.47-.58.7l-.28.33c-.21.23-.41.45-.63.67a3.07,3.07,0,0,1-.25.26c-.3.3-.6.59-.91.87l-.09.08c-.28.25-.57.5-.87.73l-.3.24L42,48l-.34.23c-.25.18-.51.34-.77.5a2.61,2.61,0,0,1-.28.17c-.35.22-.71.42-1.07.61l-.16.08-1,.46-.35.15c-.26.12-.53.23-.8.33l-.37.14c-.3.11-.59.21-.89.3a2.29,2.29,0,0,1-.28.09c-.38.12-.78.23-1.17.33l-.25.06-.95.2-.39.07-.84.12-.4,0q-.48.06-1,.09l-.26,0c-.4,0-.81,0-1.22,0h-.23c-.4,0-.8,0-1.21,0l-.34,0-1.39-.15-.19,0c-.4-.06-.81-.14-1.22-.22l-.35-.08c-.46-.1-.91-.22-1.37-.35l-.14,0c-.41-.12-.82-.26-1.23-.41l-.34-.13c-.45-.18-.9-.36-1.34-.57l-.08,0c-.41-.19-.82-.41-1.23-.63l-.33-.19c-.43-.24-.85-.5-1.27-.78A22,22,0,0,1,10.9,17.79c.24-.36.5-.72.75-1.06l.25-.32c.18-.24.37-.47.57-.7l.29-.33c.2-.23.41-.45.62-.67l.25-.27c.3-.3.6-.59.91-.86l.12-.1c.27-.24.55-.48.84-.71l.32-.25.7-.51.35-.24c.25-.17.5-.34.76-.5l.28-.17c.35-.21.71-.41,1.07-.6l.19-.1c.3-.16.6-.3.92-.44l.36-.17.79-.32.38-.15L22.5,9l.28-.09c.39-.12.78-.22,1.17-.32l.27-.06c.31-.08.62-.14.92-.2l.4-.07.83-.13.41-.05,1-.09L28,8c.4,0,.81,0,1.21,0h.26c.39,0,.79,0,1.18,0L31,8l1.38.15.21,0q.6.09,1.2.21l.35.08c.46.1.91.22,1.36.35l.16.05c.41.12.81.26,1.22.41l.34.13c.45.17.89.36,1.33.56l.08,0c.42.2.82.41,1.23.63l.33.19c.43.24.85.5,1.27.77a22.07,22.07,0,0,1,6.18,30.58Z" transform="translate(0.11 -0.31)"/></g></svg>
	</a>
  </div>
</header>

<nav id="primaryNav" class="bg-blue header-nav">
  <a href="#">Services</a>
  <a href="#">About Us</a>
  <a href="#">Contact</a>
  <a href="javascript:void(0);" id="nav-burger" class="icon" onclick="myFunction()">
    <span></span>
	<span></span>
	<span></span>
  </a>
</nav>  
  <!-- Home Content -->
<article>
  <section class="bg-blue full-height">
  	<section class="rotate bg-white txt-base cntr mrg-top stripe-sml spill">
		<p class="force-base"><span class="bold">We're rebuilding our website...</span><br>Check back shortly to see what we've been up to!</p>
	</section>
  	<section class="cntr spill txt-center rotate stripe-lrg height-override">
		<h1>
			<div class="full">Lorem ipsum.</div>
			<br>
			<div class="white bold">Lorem ipsum. Digital Agency</div>
		</h1>
	</section>
  	<section class="rotate cntr bg-white txt-center stripe-lrg spill">
		<p>Think web design, think Lorem ipsum.</p>
  		<a class="btn-link" href="#about-us">
		  <button class="button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Read More"><span>About Us</span></button>
		</a>
  		<p>We Rethink, We Build, We Optimise</p>
	</section>
	<section class="cntr stripe-lrg">
	    <a href="#about-us"><svg id="scroll-down" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.22 26.16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Scroll Down</title><g id="Group_2" data-name="Group 2"><path id="Path_3" data-name="Path 3" class="cls-1" d="M12.81,26.14,1.11,14.44a1.91,1.91,0,0,1,2.7-2.7h0L14.16,22.1,24.51,11.75a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g><g id="Group_4" data-name="Group 4"><path id="Path_3-2" data-name="Path 3-2" class="cls-1" d="M12.81,15.5,1.11,3.8a1.91,1.91,0,0,1,2.7-2.7h0L14.16,11.46,24.51,1.11a1.91,1.91,0,0,1,2.7,2.7h0l-11.7,11.7a1.91,1.91,0,0,1-2.69,0Z" transform="translate(-0.55 -0.55)"/></g></svg></a>
	</section>
  </section>
  <section class="section-pad limit-width">
	<h2 id="about-us" class="white cntr lrg-title pad-btm">About Us</h2>
	<p class="bold white cntr">Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</p>
  </section>
  <section class="rotate bold bg-white section-pad cntr txt-center pad-btm limit-width-lrg spill">
	<span class="stop-rotate">
    <h3 class="pad-btm">Work With Us</h3>
	<p class="bold pad-btm">Lorem ipsum.</p>
	<p class="pad-btm">Lorem ipsum.</p> 
	<p>Lorem ipsum</p>
	<h4 class="pad-btm pad-top-lrg mrg-top-sml">What we're looking for:</h4>
	<ul>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	  <li>Lorem ipsum</li>
	</ul>
	<a class="btn-link" href="#">
	  <button class="mrg-top-sml button button--winona button--border-thick button--round-l button--text-upper button--size-s button--text-thick" data-text="Apply Now"><span>Apply Now</span></button>
	</a>
	</span>
  </section>
</article>
  <footer class="pad-top-xlrg">
  <p class="pad-top white"><small>Lorem Ipsum is a trading style of 'Lorem Ipsum'.</small></p>
  <p class="white pad-btm"><small>&copy; Lorem Ipsum Copyright 2020, All Rights Reserved.</small></p>
</footer>
</div>
</body>
</html>

关于html - anchor 链接切断标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59815959/

上一篇：caching - 为什么有些 css、js 和图像文件是从磁盘缓存中加载的，而有些则不是？

下一篇：自治事务中的 Firebird 2.5 异常处理

相关文章：

javascript - 将 CSS 应用于当前页面链接不起作用

javascript - 将一个事件处理程序分配给多个元素？

css - 如何覆盖 css 属性最小高度或高度

html - 为(移动)浏览器中的 CSS3 HW GPU 加速优化基于 SVG 的 Sprite 表

html - 将自己的样式设置为 before 元素中的内容

javascript - 当数据无法结构化为不同格式时，从事件处理程序返回对象

html - 需要截断img左右

html - 在 CSS 和 HTML 中为聊天室创建布局

html - 全屏高度和宽度

html - 将 Bootstrap 缩略图表中的单元格强制为 "clear"内容

©2024 IT工具网  联系我们