gpt4 book ai didi

javascript - 部分没有响应 CSS

转载 作者:行者123 更新时间:2023-11-28 15:58:41 25 4
gpt4 key购买 nike

我已经开始编写这个着陆页的代码,在我完成 fullvp 菜单后,class="hero"部分现在没有响应,当我尝试在 chrome 上编辑它时它确实有效。所以,我回到我的来源,看看是否有任何拼写错误或缺失的符号 - 没有找到 -_-,所以......需要社区的帮助,谢谢附言这可能是我所做的愚蠢的事情,所以我很抱歉 =)

img { width: 100%; }

header {
background-color: #000;
padding: 1px;
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
}

#logo {
border: 5px solid #fff;
display: inline-block;
color: #fff;
padding: 5px;
}


#menu-icon {
position: fixed;
top: 0;
left: 0;
z-index: 1;
padding: 5px;
width: 50px;
background: royalblue;
color: white;
transition: .3s ease;
display: inline-block;
}

#menu-icon:hover, #menu-icon:focus {
/*background: black;*/
transition: .5s ease;
width: 100%;
}

.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}

.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}

.overlay a {
padding: 8px;
text-decoration: none;
font-size: 46px;
color: #818181;
display: block;
transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
color:royalblue;
}

.closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px !important;
}

@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}

.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>Student Loan Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="norm.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="wrap">
<section class="header">
<header>
<h1 id="logo">SAVVY STUDENT</h1>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times" aria-hidden="true"></i></a>
<div class="overlay-content">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</div>
<span id="menu-icon" style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="fa fa-bars" aria-hidden="true"></i></span>
</header>
</section>
<section class="hero">
<div class="hero-content">
<h2 id="hero-content-headline">GRADUATE FROM STUDENT LOANS</h2>
<p id="hero-content-content">STUDENT LOAN DEBT, RECORD BREAKING $1.5 TRILIAN. POST STUDENTS ARE TAKING ADVANTAGE OF DEBT RELIEFE. WE BELIVE THAT EVERYONE DESERVES A SECOND CHANGE. DON’T FALL BEGIND TAKE ADVANTAGE OF STUDENT LOAN FORGIVENESS. APPLY NOW AND FIND OUT HOW MUCH YOU CAN GET FORGIVEN</p>
</div>
<div class="form-wrap">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
</section>
<section class="why-program">
<div class="why-program-wrap">
<h1>Why Apply to Student Loan Forgiveness Program?</h1>
<ul>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Reduce payment</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Consolidate loans</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Increase credit Score</li>
<li><span><i class="fa fa-check-circle-o" aria-hidden="true"></i></span>Deal with one lender</li>
</ul>
</div>
</section>
<section class="features">
<div class="feature-apply feeature">
<span><i class="fa fa-pencil" aria-hidden="true"></i></span>
<h3>Apply today</h3>
<p>Fill out the form or give us a call.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-thumbs-up" aria-hidden="true"></i></span>
<h3>Approved</h3>
<p>Submit your request with 1 of our consultants and get approved in minutes.</p>
</div>
<div class="feature-apply feeature">
<span><i class="fa fa-graduation-cap" aria-hidden="true"></i></span>
<h3>Enroll</h3>
<p>To one of the programs and change your life today</p>
</div>
<div class="features-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/BeBx8UdVOCc" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section class="reviews">
<h3>What Are Clients Say...</h3>
<div class="review">
<img src="" alt="Reviewer-name" class="reviewer-photo">
<h3 class="review-name">Bob Smith</h3>
<p class="review-content">Best Company Ever</p>
</div>
</section>
<section class="how-works">
<div class="how how-1">
<h3>one stop shop</h3>
<p>We do it all for you from preparing your documentation, talking to your lender, enrolling you to the program, you don’t need to lift a finger.</p>
</div>
<div class="line"></div>
<div class="how how-2">
<h3>You are safe</h3>
<p>We are a trusted company with your information encrypted to our system where only the Department of Education has access too.</p>
</div>
<div class="line"></div>
<div class="how how-3">
<h3>Approved in 1 call</h3>
<p>In just 1 phone call our team of experts will let you know if you get approved.</p>
</div>
</section>
<section class="why-us">
<h3>Why Us</h3>
<p>[company] main priority is to help post students get the financial aid they deserve. Company has been in business for years. Professionally providing great customer service with 1 point of contact and quick response. While keeping your personal information safe and secured. Our team of consultants and underwriters strive on providing on point information on enrolling you to the program that will best benefit you. We stick by you on the full length of your program, providing you with answers to all your questions and concerns.</p>
</section>
<div class="divider"><hr></div>
<section class="articles">
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
<a href="" class="article-button">read more</a>
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
<a href="" class="article-button">read more</a>
</div>
<div class="article">
<img class="article-img" alt="" src="RES/HERO-2.jpg">
<h3 class="article-head">Lorem Ipsum has been</h3>
<p class="article-content">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled</p>
<a href="" class="article-button">read more</a>
</div>
</section>
<footer>
<section class="contact-us">
<div class="colm-1">
<h3>Contact Us</h3>
<ul>
<li>Office: (866) 210-1337</li>
<li>Address: 2351 W 3rd St<br>Los Angeles, CA</li>
<li>Email: info@fslforgive.com</li>
</ul>
</div>
<div class="colm-2">
<form method="post" action="send.php">
<legend>Find out how much you can get forgiven <span class="form-tagline">Enter your details and we will get in touch</span></legend>
<fieldset class="form-fields">
<label for="user-first">First Name</label>
<input type="text" name="user_first_name" class="user-first">
<label for="user-last">Last Name</label>
<input type="text" name="user_last_name" class="user-last"><br>
<label for="user-email">Email</label>
<input type="email" name="user_email_address" class="user-email">
<label for="user-phone">Phone</label>
<input type="tel" name="user_phone_number" class="user-phone"><br>
<label for="user-address">Address</label>
<input type="text" name="user_address_street" class="user-address">
<label for="user-city">City</label>
<input type="text" name="user_address_city" class="user-acity"><br>
<label for="user-state">State</label>
<input type="text" name="user_address_state" class="user-state">
<label for="user-zip">Zip</label>
<input type="number" name="user_address_zip" class="user-zip"><br>
<button type="submit">find out now!</button>
</fieldset>
</form>
</div>
<div class="social">
<span><i class="fa fa-facebook-official" aria-hidden="true"></i></span>
<span><i class="fa fa-youtube-play" aria-hidden="true"></i></span>
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-envelope" aria-hidden="true"></i></span>
</div>
</section>
</footer>
</div>
<script src="https://use.fontawesome.com/e4028997c7.js"></script>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>

最佳答案

@media 屏幕未正确关闭

@media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.closebtn {
font-size: 40px !important;
top: 15px;
right: 35px;
}
}/**closing bracket is missing***/

.hero {
background: green;
display: inline-block;
margin-top: 150px;
padding: 1px;
}

http://codepen.io/nagasai/pen/xORWmd

关于javascript - 部分没有响应 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37974462/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com