刷新页面时页脚元素的样式是否更改？

时间：2019-03-04 00:23:38

标签： html css

我恳求任何阅读此书的人，请帮助我解决这个问题，我花了数小时试图弄清楚。 pic此处显示的页脚中有一条红线，特别是位于页脚社交区域下方的红线。注意。除了我每次刷新时位于社交区域下的那条线都会稍微改变位置，其他所有红线都保持不变？ wtf正在发生，我无法弄清

html, body {
	margin: 0;
	padding: 0;
}

nav li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

.wrapper2 {
	width: 100%;
	height: 65vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

header {
	background-image: url(../img/pexels.jpg);
	background-position: center;
	background-size: cover;
	height: 65vh;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

header h1 {
	color: white;
	margin: 0;
	font-size: 5rem;
	font-family: 'Arvo';
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

nav ul {
	margin-right: 30px;
	margin-top: 25px;
}

nav li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
	color: rgba(102,102,102,0.75);
}

nav li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {
	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

/*---ABOUT---*/

.history h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.history h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.history h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.history p {
	color: rgba(102,102,102, 0.85);
	font-family: 'Rajdhani';
	font-size: 1.7rem;
	text-align: center;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 35px;
	position: relative;
	top: -20px;
}

/*---SERVICES---*/

.services {
	background-image: url(../img/pour.jpeg);
	background-size: cover;
	background-attachment: fixed;
}

.services .wrapper {
	width: 100%;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

.services {
	color: white;
	font-family: 'Arvo';
	font-size: 3rem;
}

.services .content {
	background-color: white;
	width: 100%;
}

.services h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 20px;
	position: relative;
	top: 20px;
}

.services h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.services h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.services .list {
	display: flex;
	padding-bottom: -40px;
}

.move-ul {
	position: relative; 
	top: -45px;
}

.services ul {
	flex-basis: 33.333%;
	color: red;
	font-size: 1.8rem;
	display: inline-block;
	font-family: 'Rajdhani';
	list-style-type: square;
	margin-left: 80px;
	margin-top: 0px;
	margin-bottom: 0;
}

.padding {
	padding-top: 10px;
}

.services p {
	margin: 0;
}

/*---TESTIMONY---*/

.testimony {
	background-image: url('../img/wall4.jpg');
	display: flex;
	justify-content: space-around;
	background-attachment: fixed;
}

.testimony h1 {
	margin-bottom: 20px;
	margin-top: 20px;
	color: white;
	font-family: 'Arvo';
	padding: 30px;
	display: inline-block;
	flex-basis: 40%;
	margin-left: 30px;
}

.testimony span {
	color: white;
	font-size: 2.3rem;
}

.testimony .quote {
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	margin-left: 40px;
}

.testimony .left-quote {
	position: relative; 
	left: 60px; 
	top: 30px
}

.fa-quote-right {
	position: relative;
	right: 35px;
	top: 30px;
}

.testimony .move {
	right: 68px;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
}

.footer .inner {
	margin-left: 55px;
}

.social .inner {
	margin-left: 45px;
}

.contact .inner {
	margin-left: 35px;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}


.links .inner:after {
	content: '';
	width: 10.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -151px;
}

.social .inner:after {
	content: '';
	width: 5.8%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -147.5px;
}

.contact .inner:after {
	content: '';
	width: 7.5%;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: -174.5px;
}

.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 102%;
}

.footer button {
	position: absolute;
	margin-left: 15.85%;
	margin-top: -18px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/



/*---TABLET-LARGE---*/

@media screen and (max-width: 1024px) {

	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-left: 22.25%;
	}

	.social .inner:after {
		width: 7.8%;
		margin-top: -80px;
		left: 36.25%;
	}

	.links .inner:after {
		width: 14%;
	}

	.contact .inner:after {
		width: 10%;
	}
}

@media screen and (max-width: 823px) {

	/*---MAIN---*/

	header, .wrapper2 {
		height: 100vh;
	}

}

/*---TABLET---*/

@media screen and (max-width: 768px) {

	/*---NAV---*/

	nav li {
		font-size: 1.55rem;
	}

	nav ul {
		margin-left: 0;
	}

	/*---MAIN--*/

	header {
		height: 65vh;
	}

	.wrapper2 {
		height: 65vh;
	}

	.services ul {
		font-size: 1.5rem;
		margin-left: 30px;
	}

	.padding2 {
		padding-top: 10px;
	}

	.testimony h1 {
		font-size: 1.1rem;
	}


	.testimony .fa-quote-right {
		display: none;
	}

	/*---FOOTER---*/

	.footer .inner {
		margin-left: 30px;
	}

	.links .inner:after {
		width: 18%;
	}

	.contact .inner:after {
		margin-top: -195px;
		width: 13%;
	}

	.social .inner:after {
		left: 37.25%;
		margin-top: -80px;
		width: 10%;
	}

	.footer button {
		margin-left: 20%;
	}

	.footer-textarea {
		width: 88.5%;
	}
}

/*------LANDSCAPE-MODE-MOBILE------*/

@media screen and (max-width: 715px) {
	
	/*---NAV---*/

	nav ul {
		padding-left: 0;
		margin: 0;
	}

	nav li {
		font-size: 1.4rem;
	}

	nav .logo {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header {
		height: 100vh;
	}

	.wrapper2 {
		height: 100vh;
	}

	.history p {
		font-size: 1.5rem;
	}

	.testimony {
		flex-direction: column;
	}

	.testimony h1 {
		margin: 0;
	}

	.move-quote {
		position: relative;
		top: -30px;
	}

	.fa-quote-right {
		position: absolute;
		display: none;
	}

	/*---FOOTER---*/

	.contact .inner {
		margin-right: 15px;
	}

	.contact .inner:after {
		margin-top: -171.5px; 
		width: 14%
	}

	.social .inner:after {
		width: 11%
	}

	.links .inner:after {
		width: 20%
	}

	.contact p {
		margin: 5px;
	}

	.footer-textarea {
		position: relative;
		top: -15px;
	}

	.footer button {
		margin-top: -70px;
		margin-left: 19.5%;
	}
}

/*---MOBILE---*/

@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 2.5rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 55px;
		height: 55px;
		position: fixed;
		right: 0;
		top: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.m1, .m2, .m3 {
		border-radius: 4px;
		margin: 4px;
		width: 35px;
		height: 3px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header .wrapper2 {
		height: 60vh;
	}

	header {
		height: 50vh;
		background-position: -370px;
	}

	header h1 {
		font-size: 4rem;
	}

	.history h2 {
		margin-top: 0;
		font-size: 2.5rem;
	}

	.history h2:before, .history h2:after {
		margin-bottom: 11px;
	}

	.history p {
		margin-top: 10px;
		margin-bottom: 5px;
		font-size: 1.5rem;
	}

	.services h1 {
		font-size: 3.5rem;
	}

	.services h2 {
		margin-bottom: 0px;
		top: 5px;
		font-size: 2.5rem;
	}

	.services h2:before, .services h2:after {
		margin-bottom: 11px;
	}

	.move-ul {
		top: 0;
	}

	.padding {
		padding-top: 0px;
		padding-bottom: 20px;
	}

	.services .list {
		flex-direction: column;
	}

	.testimony {
		flex-direction: column;
	}

	.testimony h1 {
		font-size: 1.4rem;
		margin-left: 0;
	}

	.move-quote {
		margin-top: -50px;
	}

	.fa-quote-right {
		left: -100px;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 100%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.links .inner:after {
		width: 33%;
		margin-top: -152px;
	}

	.social .inner {
		position: relative;
		top: -10px;
	}

	.social .inner:after {
		content: '';
		width: 18%;
		height: 2px;
		background-color: red;
		position: absolute;
		left: 0;
		margin-top: -43.75px;
	}

	.contact .inner:after {
		content: '';
		width: 24%;
		height: 2px;
		background-color: red;
		position: absolute;
		margin-top: -148px;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-top: 30px;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}

@media screen and (max-width: 375px) {

	/*---FOOTER---*/

	.links .inner:after {
		width: 37%;
	}

	.social .inner:after {
		margin-top: -38px;
		width: 20%;
	}

	.contact .inner:after {
		width: 27%;
	}
}

@media screen and (max-width: 325px) {
	.social .inner: after {
		margin-top: -39px;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>About | Kane Concrete & Construction</title>
	<link rel="stylesheet" href="../css/about.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<header>
		<div class="wrapper2">
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1"></div>
						<div class="m2"></div>
						<div class="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>
			<h1>About Us</h1>
		</div>
	</header>

	<section class="history" style="background-color: white;">
		<h2>Our History</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat? Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur.</p>
	</section>

	<section class="services" id="services">
		<div class="wrapper">
			<h1>Services</h1>
		</div>

		<div class="content">
			<h2>Our skills</h2>

			<div class="list">
				<ul class="skills move-ul padding2">
					<li><p style="color: rgba(102,102,102, 0.85);">Flatwork Concrete</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Paving</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Driveways</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Sidewalks</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Slab Repair</p></li>
				</ul>

				<ul class="skills adjust-height">
					<li><p style="color: rgba(102,102,102, 0.85);">Foundations</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p></li>
				</ul>

				<ul class="skills move-ul padding">
					<li><p style="color: rgba(102,102,102, 0.85);">Commercial</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Residential</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Curb Repair</p></li>
				</ul>
			</div>
		</div>
	</section>

	<section class="testimony">
		<div class="block">
			<span><i class="fas fa-quote-left left-quote"></i></span><h1 class="first-quote">Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote">-Some Person</span></h1>
		</div>

		<div class="block">
			<span class="move-quote"><i class="fas fa-quote-left left-quote"></i></span><h1 class="move-quote">I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1>
		</div>
	</section>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1>Quick Links</h1>

					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Services</a>
					<a href="#">Job Openings</a>
					<a href="#">Gallery</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1>Social</h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send is some feedback..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1>Contact</h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
				</div>
			</div>
		</div>
		
		<div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
</body>
</html>

2 个答案:

答案 0 :(得分：2)

你很近。但是，通过使用负数margin-top，可能会导致位置不一致。为了获得更一致的解决方案，我将页脚h1的标题包装在span标记内。这样，使用伪元素:after来添加红线并相对于标题进行定位。

基本上，除了多余的跨度以外，添加了以下CSS代码（并且删除了不必要的每个链接红线CSS）。取消隐藏代码段，然后运行以查看其工作原理。希望对您有所帮助。

.footer h1 span {
  display: inline;
  position: relative;
}

.footer h1 span:after {
  content: '';
  height: 2px;
  width: 100%;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
}


html, body {
	margin: 0;
	padding: 0;
}

nav li a {
	text-decoration-line: none;
	color: rgba(102,102,102,0.75);
}

.wrapper2 {
	width: 100%;
	height: 65vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

header {
	background-image: url(../img/pexels.jpg);
	background-position: center;
	background-size: cover;
	height: 65vh;
	background-attachment: fixed;
	background-repeat: no-repeat;
}

header h1 {
	color: white;
	margin: 0;
	font-size: 5rem;
	font-family: 'Arvo';
}

nav {
	background-color: white;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	box-shadow: 0px 0px 100px grey;
}

nav ul {
	margin-right: 30px;
	margin-top: 25px;
}

nav li {
	display: inline-block;
	font-size: 1.55rem;
	margin-right: 20px;
	font-family: 'Rajdhani';
	color: rgba(102,102,102,0.75);
}

nav li a:hover {
	cursor: pointer;
	color: #1a1a1a;
	transition: all 0.7s ease;
}

.after:after {
	position: relative;
	left: 12px;
	top: 2px;
	display: inline-block;
	content: "";
	width: 1px;
	height: 20px;
	background-color: rgba(102,102,102,0.25);
}

.logo {
	color: red;
	font-size: 3.7rem;
	margin: 10px;
	opacity: 1;
	margin-left: 30px;
}

/*---ABOUT---*/

.history h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

.history h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.history h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.history p {
	color: rgba(102,102,102, 0.85);
	font-family: 'Rajdhani';
	font-size: 1.7rem;
	text-align: center;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 35px;
	position: relative;
	top: -20px;
}

/*---SERVICES---*/

.services {
	background-image: url(../img/pour.jpeg);
	background-size: cover;
	background-attachment: fixed;
}

.services .wrapper {
	width: 100%;
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0, 0, 0, 0.3);
}

.services {
	color: white;
	font-family: 'Arvo';
	font-size: 3rem;
}

.services .content {
	background-color: white;
	width: 100%;
}

.services h2 {
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 0.85);
	font-size: 3rem;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 20px;
	position: relative;
	top: 20px;
}

.services h2:after {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-left: 5px;
	margin-bottom: 13px;
}

.services h2:before {
	content: '';
	width: 18px;
	height: 2px;
	background-color: red;
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 13px;
}

.services .list {
	display: flex;
	padding-bottom: -40px;
}

.move-ul {
	position: relative; 
	top: -45px;
}

.services ul {
	flex-basis: 33.333%;
	color: red;
	font-size: 1.8rem;
	display: inline-block;
	font-family: 'Rajdhani';
	list-style-type: square;
	margin-left: 80px;
	margin-top: 0px;
	margin-bottom: 0;
}

.padding {
	padding-top: 10px;
}

.services p {
	margin: 0;
}

/*---TESTIMONY---*/

.testimony {
	background-image: url('../img/wall4.jpg');
	display: flex;
	justify-content: space-around;
	background-attachment: fixed;
}

.testimony h1 {
	margin-bottom: 20px;
	margin-top: 20px;
	color: white;
	font-family: 'Arvo';
	padding: 30px;
	display: inline-block;
	flex-basis: 40%;
	margin-left: 30px;
}

.testimony span {
	color: white;
	font-size: 2.3rem;
}

.testimony .quote {
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	margin-left: 40px;
}

.testimony .left-quote {
	position: relative; 
	left: 60px; 
	top: 30px
}

.fa-quote-right {
	position: relative;
	right: 35px;
	top: 30px;
}

.testimony .move {
	right: 68px;
}

/*---FOOTER---*/

.footer .wrapper {
	display: flex;
}

.footer div {
	display: inline-block;
	flex-basis: 33.33%;
	font-family: 'Rajdhani';
	color: rgba(102,102,102, 1);
	margin-top: 5px;
}

.footer h1 {
	font-size: 2rem;
	margin-top: 15px;
  position: relative;
}

.footer h1 span {
  display: inline;
  position: relative;
}

.footer h1 span:after {
	content: '';
	height: 2px;
  width: 100%;
	background-color: red;
	position: absolute;
	bottom: 0;
  left: 0;
}

.footer .inner:before {
	display: inline-block;
	content: '';
	width: 27.1%;
	height: 2px;
	background-color: rgba(102,102,102, 0.6);
	position: absolute;
	margin-top: 54px;
}

.wrap:before {
	content: '';
	width: 100px;
	height: 2px;
	background-color: red;
	position: absolute;
	margin-top: 55px;
}

.links a {
	display: block;
	text-decoration-line: none;
	color: rgba(102,102,102, 1);
	font-size: 1.2rem;
	position: relative;
	top: -10px;
	transition: color 0.4s ease;
}

.links a:hover {
	color: red;
}

.contact p {
	position: relative;
	top: -10px;
}

.social i {
	font-size: 1.7rem;
	margin-right: 5px;
	position: relative;
	top: -20px;
	color: rgba(102,102,102, 0.7);
	transition: all 0.4s ease;
}

.social i:hover {
	color: red;
	cursor: pointer;
}

#msg {
	margin-top: -15px;
}

.footer-textarea {
	background-color: rgba(102,102,102, 0.2);
	outline: none;
	color: rgba(102,102,102, 1);
	resize: none;
	width: 102%;
}

.footer button {
	position: absolute;
	margin-left: 15.85%;
	margin-top: -18px;
	border: none;
	font-family: 'Rajdhani';
	font-size: 1.2rem;
	transition: all ease 0.4s;
	outline: none;
}

button:hover {
	cursor: pointer;
	color: red;
}

.dark {
	color: red;
}

.copyright {
	position: absolute;
	background-color: white;
	text-align: center;
	width: 100%;
	margin-bottom: 0;
	font-size: 1.2rem;
	padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/



/*---TABLET-LARGE---*/

@media screen and (max-width: 1024px) {

	/*---FOOTER---*/
	
	.footer .inner {
		margin-left: 30px;
	}

	.footer-textarea {
		width: 88%;
	}

	.footer button {
		margin-left: 22.25%;
	}

	.social .inner:after {
		width: 7.8%;
		margin-top: -80px;
		left: 36.25%;
	}

	.links .inner:after {
		width: 14%;
	}

	.contact .inner:after {
		width: 10%;
	}
}

@media screen and (max-width: 823px) {

	/*---MAIN---*/

	header, .wrapper2 {
		height: 100vh;
	}

}

/*---TABLET---*/

@media screen and (max-width: 768px) {

	/*---NAV---*/

	nav li {
		font-size: 1.55rem;
	}

	nav ul {
		margin-left: 0;
	}

	/*---MAIN--*/

	header {
		height: 65vh;
	}

	.wrapper2 {
		height: 65vh;
	}

	.services ul {
		font-size: 1.5rem;
		margin-left: 30px;
	}

	.padding2 {
		padding-top: 10px;
	}

	.testimony h1 {
		font-size: 1.1rem;
	}


	.testimony .fa-quote-right {
		display: none;
	}

	/*---FOOTER---*/

	.footer .inner {
		margin-left: 30px;
	}

	.links .inner:after {
		width: 18%;
	}

	.contact .inner:after {
		margin-top: -195px;
		width: 13%;
	}

	.social .inner:after {
		left: 37.25%;
		margin-top: -80px;
		width: 10%;
	}

	.footer button {
		margin-left: 20%;
	}

	.footer-textarea {
		width: 88.5%;
	}
}

/*------LANDSCAPE-MODE-MOBILE------*/

@media screen and (max-width: 715px) {
	
	/*---NAV---*/

	nav ul {
		padding-left: 0;
		margin: 0;
	}

	nav li {
		font-size: 1.4rem;
	}

	nav .logo {
		font-size: 2.5rem;
	}

	/*---MAIN---*/

	header {
		height: 100vh;
	}

	.wrapper2 {
		height: 100vh;
	}

	.history p {
		font-size: 1.5rem;
	}

	.testimony {
		flex-direction: column;
	}

	.testimony h1 {
		margin: 0;
	}

	.move-quote {
		position: relative;
		top: -30px;
	}

	.fa-quote-right {
		position: absolute;
		display: none;
	}

	/*---FOOTER---*/

	.contact .inner {
		margin-right: 15px;
	}

	.contact .inner:after {
		margin-top: -171.5px; 
		width: 14%
	}

	.social .inner:after {
		width: 11%
	}

	.links .inner:after {
		width: 20%
	}

	.contact p {
		margin: 5px;
	}

	.footer-textarea {
		position: relative;
		top: -15px;
	}

	.footer button {
		margin-top: -70px;
		margin-left: 19.5%;
	}
}

/*---MOBILE---*/

@media screen and (max-width: 425px) {

	/*---NAV---*/

	.logo {
		font-size: 2.5rem;
		margin-left: 10px;
	}

	ul {
		margin: 0;
		padding: 0;
	}

	nav li {
		display: none;
	}

	.ham-menu {
		width: 55px;
		height: 55px;
		position: fixed;
		right: 0;
		top: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.m1, .m2, .m3 {
		border-radius: 4px;
		margin: 4px;
		width: 35px;
		height: 3px;
		background-color: red;
		float: left;
	}

	/*---MAIN---*/

	header .wrapper2 {
		height: 60vh;
	}

	header {
		height: 50vh;
		background-position: -370px;
	}

	header h1 {
		font-size: 4rem;
	}

	.history h2 {
		margin-top: 0;
		font-size: 2.5rem;
	}

	.history h2:before, .history h2:after {
		margin-bottom: 11px;
	}

	.history p {
		margin-top: 10px;
		margin-bottom: 5px;
		font-size: 1.5rem;
	}

	.services h1 {
		font-size: 3.5rem;
	}

	.services h2 {
		margin-bottom: 0px;
		top: 5px;
		font-size: 2.5rem;
	}

	.services h2:before, .services h2:after {
		margin-bottom: 11px;
	}

	.move-ul {
		top: 0;
	}

	.padding {
		padding-top: 0px;
		padding-bottom: 20px;
	}

	.services .list {
		flex-direction: column;
	}

	.testimony {
		flex-direction: column;
	}

	.testimony h1 {
		font-size: 1.4rem;
		margin-left: 0;
	}

	.move-quote {
		margin-top: -50px;
	}

	.fa-quote-right {
		left: -100px;
	}

	/*---FOOTER---*/

	.footer .wrapper {
		display: flex;
		flex-direction: column;
	}

	.footer div {
		margin: 0;
	}

	.footer h1 {
		font-size: 2rem;
		margin-top: 10px;
	}

	.footer .inner {
		margin: 0;
	}

	.footer .inner:before {
		display: inline-block;
		content: '';
		width: 100%;
		height: 2px;
		background-color: rgba(102,102,102, 0.6);
		position: absolute;
		margin-top: 48px;
	}

	.links .inner:after {
		width: 33%;
		margin-top: -152px;
	}

	.social .inner {
		position: relative;
		top: -10px;
	}

	.social .inner:after {
		content: '';
		width: 18%;
		height: 2px;
		background-color: red;
		position: absolute;
		left: 0;
		margin-top: -43.75px;
	}

	.contact .inner:after {
		content: '';
		width: 24%;
		height: 2px;
		background-color: red;
		position: absolute;
		margin-top: -148px;
	}

	.links a {
		margin-left: 5px;
	}

	.social h1 {
		margin-bottom: 10px;
	}

	#msg {
		font-size: 1rem;
		margin-bottom: 0;
		margin-right: 25.5%;
		position: absolute;
		right: 5px;
		top: 80px;
	}

	.footer button {
		right: 9.25%;
		margin-top: 0.2px;
	}

	.social i {
		font-size: 1.8rem;
		margin-right: 2px;
		position: relative;
		top: -5px;
		left: 5px;
		color: rgba(102,102,102, 0.7);
		transition: all 0.4s ease;
	}

	.footer-textarea {
		width: 88.5%;
		margin-top: 30px;
		margin-left: 5px;
	}

	.contact p {
		margin: 5px;
		font-size: 1.2rem;
	}

	.copyright {
		background-color: red;
	}

	.copyright span {
		color: white;
		background-color: red;
	}

}

@media screen and (max-width: 375px) {

	/*---FOOTER---*/

	.links .inner:after {
		width: 37%;
	}

	.social .inner:after {
		margin-top: -38px;
		width: 20%;
	}

	.contact .inner:after {
		width: 27%;
	}
}

@media screen and (max-width: 325px) {
	.social .inner: after {
		margin-top: -39px;
	}
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, intitial-scale=1.0">
	<title>About | Kane Concrete & Construction</title>
	<link rel="stylesheet" href="../css/about.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
	<header>
		<div class="wrapper2">
			<nav>
				<div class="logo">
					<i class="fab fa-accusoft"></i>
				</div>

				<div class="nav">
					<div class="ham-menu">
						<div class="m1"></div>
						<div class="m2"></div>
						<div class="m3"></div>
					</div>
					<ul>
						<li class="after"><a href="index.html">Home</a></li>
						<li class="after"><a href="about.html">About</a></li>
						<li class="after"><a href="#services">Services</a></li>
						<li class="after"><a href="careers.html">Careers</a></li>
						<li><a href="contact.html">Contact</a></li>
					</ul>
				</div>
			</nav>
			<h1>About Us</h1>
		</div>
	</header>

	<section class="history" style="background-color: white;">
		<h2>Our History</h2>

		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat? Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur.</p>
	</section>

	<section class="services" id="services">
		<div class="wrapper">
			<h1>Services</h1>
		</div>

		<div class="content">
			<h2>Our skills</h2>

			<div class="list">
				<ul class="skills move-ul padding2">
					<li><p style="color: rgba(102,102,102, 0.85);">Flatwork Concrete</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Paving</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Driveways</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Sidewalks</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Slab Repair</p></li>
				</ul>

				<ul class="skills adjust-height">
					<li><p style="color: rgba(102,102,102, 0.85);">Foundations</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p></li>
				</ul>

				<ul class="skills move-ul padding">
					<li><p style="color: rgba(102,102,102, 0.85);">Commercial</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Residential</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p></li>
					<li><p style="color: rgba(102,102,102, 0.85);">Curb Repair</p></li>
				</ul>
			</div>
		</div>
	</section>

	<section class="testimony">
		<div class="block">
			<span><i class="fas fa-quote-left left-quote"></i></span><h1 class="first-quote">Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote">-Some Person</span></h1>
		</div>

		<div class="block">
			<span class="move-quote"><i class="fas fa-quote-left left-quote"></i></span><h1 class="move-quote">I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1>
		</div>
	</section>

	<section class="footer">
		<div class="wrapper">
			<div class="links">
				<div class="inner">
					<h1><span>Quick Links</span></h1>

					<a href="#">Home</a>
					<a href="#">About</a>
					<a href="#">Services</a>
					<a href="#">Job Openings</a>
					<a href="#">Gallery</a>
				</div>
			</div>

			<div class="social">
				<div class="inner">
					<h1><span>Social</span></h1>

					<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
					<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
					<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

					<button name="msg">Send</button>
					<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send is some feedback..."></textarea>
				</div>
			</div>

			<div class="contact">
				<div class="inner" class="wrap">
					<h1><span>Contact</span></h1>

					<p>(208)546-7827 - <span class="dark">Matt</span></p>
					<p>(208)546-7827 - <span class="dark">Keegan</span></p>
					<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
					<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
				</div>
			</div>
		</div>
		
		<div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
	</section>
</body>
</html>

答案 1 :(得分：0)

只需将页边距调整为

.social .inner:after {
    content: '';
    width: 5.8%;
    height: 2px;
    background-color: red;
    position: absolute;
    margin-top: -159.5px;
}
相关问题
最新问题