html - anchor 链接切断标题-6ren

html - anchor 链接切断标题

转载作者：行者123 更新时间：2023-12-02 02:40:32

我的页面上有 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/

文章推荐：自治事务中的 Firebird 2.5 异常处理

文章推荐： python - python 中的 string.IsNullOrWhiteSpace 等效项

文章推荐： sql - 从重复组中获取时间段的开始

javascript - “赞”按钮，在我的个人资料中发布时，描述将替换为“链接”“链接”“链接”
我有一个网站，并且我使用 javascript sdk 添加了“点赞”按钮。这是代码 (function(d, s, id) { var js, fjs = d.g
JavaScript 链接 VS CSS 链接
我知道 HTML 是逐行读取的。当您链接多个 css 文件(如规范化文件和样式表文件)时，由于 CSS 重要性特异性和源顺序，样式表文件应链接在规范化文件之后。看起来这不会影响链接的 JavaScri
css - 最常用的 Bootstrap CDN 链接/链接？
我正在使用官方 Bootstrap site 提供的 CDN 链接在我的网络应用程序中使用面板进行测试在彻底检查我的代码后，面板没有显示。但是我在 SO 上看到了类似的帖子并且 CDN 链接不同
html - 我的媒体查询不起作用。包括元标记；链接 rel 链接
这里是编码初学者。我正在尝试为我的移动设备网站设置断点，以便我的网站适合小屏幕。我只是想检查如果我缩小视口(viewport)的宽度，背景颜色是否会改变，但没有发生任何变化。也许我只是对一个简单的错误
javascript - JS - 对于字符串中具有特定 URL 的每个 anchor 链接，用其文本替换 anchor 链接
举一个我想要的例子，想象一下这个字符串: $text = 'lorem ipsum About us lorem ipsum'; 如果此字符串包含一个 href 以 / 开头的 anchor 链接，则
latex 链接
如何链接到 LaTeX 文档的另一部分或子部分？这种链接的常规范式是什么，像[链接名称]那样写，或者像网页超链接那样写？最佳答案链接到另一个部分需要您的部分进行一些额外的标记。要使用的命令是: \
MySQL 链接 WHERE IN
我有一个订单表，其中包含订单号、客户 ID 和代理 ID。然后有一个带有 id 的客户表和一个带有 id 的代理表。我需要获取所有具有来自代理 ID 'a03' 和代理 ID 'a05' 的订单的客
Python 链接
假设我有: dic = {"z":"zv", "a":"av"} ## Why doesn't the following return a sorted list of keys? keys = d
链接&编译后C执行错误
我在尝试链接到外部库时得到了一些奇怪的结果。如果我从命令行运行以下命令: gcc fftwTest.c -I../extlib/fftw-3.3.5-dll32 -L../extlib/fftw-3.
jQuery 链接
我认为我没有正确理解 jQuery 链接。我正在遍历一个数组并尝试将 div 元素添加到我的包装器 CSS 类中，每个 div 元素都有一个“click”类和自定义 css top 和 left 属性
HTML 链接
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 HTML 超链接（链接） HTML使用标签 a 来设置超文本链接。超链
底部和顶部页面的 HTML 链接
这个问题在这里已经有了答案: How do I link to part of a page? (hash?) (7 个答案) Scroll Automatically to the Bottom
Docker Swarm 链接
我想创建一个 Docker Swarm 集群，运行一个 Elasticsearch 实例、一个 MongoDB 实例和一个 grails 应用程序，每个都在单独的机器上。我正在使用 Docker Ma
CakePHP HTML 链接
我正在尝试将 CakePHP HTML Linker 用于以下代码 Add Cuisine 由于 span 标签需要在 a 标签内。我无法根据需要获得输出。关于如何完成它的任何建议？最佳答案禁用链
button - 免费应用程序中的捐赠按钮/链接
大家好，我最近开发了一个应用程序，很快就会提交到 App Store。我想免费提交这个应用程序，并想知道我是否可以实现一个带有 PayPal 捐赠标志的按钮，上面基本上写着“捐赠用于开发”或与此相关
d - 链接 libuv
我想尝试在 dlang 中使用 libuv。我下载了这样的 dlang 绑定(bind): git clone git@github.com:tamediadigital/libuv.git 现在我接
根据参数查看的 drupal 链接
我有一个节点(节点 a)，各种其他节点(节点 b/c/d/e)与之引用。我可以创建一个带有参数的 View 作为我正在查看的节点(节点 a)，并获取引用该节点的节点列表。基本上在节点 a 查看节点
同一页面中的 CakePHP 链接
我正在尝试建立一个常见问题页面，上面有目录，下面有答案。我想点击目录中的一个问题，并在同一页面上链接到相应的答案。我如何在 CakePHP 中使用 $this->Html->link() 执行此操作方
php - 在可变的单一产品页面中自定义添加到购物车按钮/链接
在 WooCommerce 3.0+ 中，我使用 js 创建了一些选项卡，每个选项卡中包含来自不同类别的产品。我已经设法修改了简单产品的添加到购物车链接，其中点击了 addtocart 按钮它进入下一
delphi - 是否可以包含基于组件属性的文件(链接)？
Delphi 2007/2009 奇怪的问题在这里: 根据设计时定义的组件属性，是否可以在链接中包含文件或保留文件？示例:如果我将 SomeProperty 保留为真，则在编译时，单元 SomeUn

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - anchor 链接切断标题