1
첫 번째 문제는 jQuery CDN을 HTML 파일에 연결하고 jQuery 효과 코드를 썼습니다 (텍스트가 페이지로드 후에 페이드 인 상태로 유지되기를 원함).하지만 모두 그것은 단지 텍스트를 숨기는 것입니다. 두 번째 문제는 내가 완전히 반응하는 사이트를하려고하는 것입니다. 그리고 모든 섹션은 100vh 여야합니다. 그러나 아이폰 6 플러스 해상도 이하로 창을 축소하면 다른 섹션의 이미지와 텍스트가 다른 섹션 등에서 겹쳐지기 시작합니다. 이 문제를 어떻게 해결할 수 있습니까? 나는 초보자이고 향상시키기위한 비판을 듣고 싶습니다.1. jQuery가 제대로 작동하지 않습니다/2. 반응이 빠른 문제
$(document).ready(function() {
$(".fade").hide(0).delay(300).fadeIn(500);
});body {
font-family: Gotham A, Gotham B, Helvetica, Arial, sans-serif;
}
h1 {
font-size: 3em;
text-transform: uppercase;
}
h4 {
font-size: 1.5em;
color: #9e9e9e;
}
section {
width: 100%;
display: inline-block;
margin: 0;
max-width: 960;
height: 100vh;
vertical-align: middle;
}
#welcome-screen {
width: 100%;
display: table;
margin: 0;
max-width: none;
height: 100vh;
background-color: #ebebeb;
padding: 0 7%;
}
.heading {
display: table-cell;
vertical-align: middle;
}
.heading-span {
display: block;
color: #8e8e8e;
font-size: 18px;
margin-top: 0px;
text-transform: none;
}
.scrolldown-button {
position: absolute;
display: table;
text-align: center;
bottom: 30px;
left: 0;
right: 0;
margin: 0 auto 0 auto;
width: 48px;
height: 48px;
font-size: 20px;
}
a {
color: #000000;
transition: ease-in-out 0.15s;
}
a:hover {
color: #d09800;
text-decoration: none;
}
#about {
width: 100%;
min-height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 30px;
}
p {
display: column;
vertical-align: middle;
max-width: 960px;
margin-top: 50px;
}
.content-heading-span {
display: block;
font-size: 2em;
margin-top: 0px;
text-transform: uppercase;
margin-left: -20px;
color: #d09800;
}
.contact-btn {
font-size: 2em;
color: #000000;
}
.photo {
margin-bottom: 3em;
}
.copyright {
text-align: center;
color: #cccccc;
}
.phone {
display: column;
vertical-align: middle;
max-width: 960px;
margin-top: 0px;
font-size: 2em;
color: #000000;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cloud.typography.com/6493094/7214972/css/fonts.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<section id="welcome-screen">
<div class="heading fade">
<h1><span class="heading-span">Hi! My name is</span>
<strong>John Doe</strong>
</h1>
</div>
<div class="scrolldown-button">
<a href="#about"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
</div>
</section>
<section>
<div id="about">
<div class="wrapper">
<span><img src="http://www.placehold.it/250x250" class="photo"></img></span>
<p><span class="content-heading-span"><strong>About me</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna, ut
lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor lectus
ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra massa.
Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<a href=""><strong>Download my resume</strong></a>
</div>
</div>
<div id="blabla">
<div class="wrapper">
<p><span class="content-heading-span"><strong>Lorem Ipsum sit dolor amet</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus
rutrum magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec
porttitor lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis
viverra massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
</div>
<div id="blabla2">
<div class="wrapper">
<p><span class="content-heading-span"><strong>Proin eget elit</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum magna,
ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor
lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra
massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
</div>
<div id="contact">
<div class="wrapper">
<p><span class="content-heading-span"><strong>consectetur tincidunt</strong></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget bibendum odio, eget varius tortor. Etiam imperdiet, sem in faucibus convallis, justo purus rutrum
magna, ut lacinia ex tellus sit amet lectus. Curabitur tempor imperdiet laoreet. Quisque magna magna, tempus a nibh vitae, maximus malesuada mi. Nulla a justo dolor. Nullam risus nisl, vulputate vel arcu id, viverra finibus mauris. Donec porttitor
lectus ut augue vehicula, vitae vehicula turpis eleifend. Proin eu quam at odio consectetur tincidunt. Proin eget elit id purus lacinia tincidunt. Nam at urna est. Quisque viverra nisi eu molestie accumsan. Ut at porttitor sem, quis viverra
massa. Nulla odio libero, dictum a diam euismod, rhoncus efficitur lectus. Suspendisse eu mi vel diam euismod fermentum at et.</p>
<span><p>E-mail:</p></span>
<a href="mailto:[email protected]" class="contact-btn">[email protected]</a>
<p>mobile:</p>
<p class="phone">235 635 123</p>
<div class="copyright">
<p>Copyright @ 2017 by <a href="index.html">John Doe</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
jQuery를 두 번 포함합니다. 그것은 당신의 문제의 원인이 아니지만 확실히 도움이되지 않을 것입니다 –