0
今日、私はscratch cssとhtmlで遊んできました。しかし、1つのことバグ私の心とそれは私がウェブサイト上でスクロールすることはできません、それだけで私を許可しません。私はHTMLとCSSをあなたに提供します。ウェブサイトでスクロールできない
<html>
<head>
<title>Website</title>
<link rel="stylesheet" href="css/mystyle.css">
<html lang ="en"></html>
</head>
<body>
<!-- NAVBAR -->
<div class="navbar">
<div class="navbarposition">
<div class="lists">
<a href="#" class="listo">Home<span></span></a>
<a href="#" class="listo">Contact<span></span></a>
<a href="#" class="listo">About<span></span></a>
<a href="#" class="listo">Blog<span></span></a>
</div>
</div>
</div>
<div class="banner">
<h1 class="headingbanner">Web Development</h1>
<a href=# class="btn">Read More</a>
</div>
<div class="offerings">
<h3 class="secondheader">My Services</h3>
<div class="jobnumber1">
<img class="cloudphoto" src="http://www.iconsdb.com/icons/preview/orange/cloud-3-xxl.pngf">
<h3 class="thirdheader">Web Development</h3>
<p class="pjob">I'm Fully able to build you a website that is going to handle the traffic.<br>Price: 300 USD <br></p>
</div>
</div>
<div class="randomquote">
</div>
</body>
とCSS
@import url('https://fonts.googleapis.com/css?family=Encode+Sans');
body{
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: scroll;
}
.navbar{
background: #22264b;
height: 80px;
margin-top: -20px;
padding: 20px 10 10 20;
}
.navbarposition{
text-align: right;
margin: 20px;
margin-top: 20px;
}
.listo{
color: #e6cf8b;
text-decoration: none;
font-size: 25px;
margin: 20px;
font-family: 'Encode Sans', sans-serif;
}
.lists{
padding: 20px;
}
.listo:hover{
color: crimson;
}
.img-container{
text-align: center;
}
.banner{
text-align: center;
}
.content{
text-align: center;
}
.banner{
margin-top: -20px;
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background: url(https://i.stack.imgur.com/21f6K.jpg);
background-position: fixed;
background-size: cover;
}
.headingbanner{
color: white;
font-size: 120px;
margin-top: 140px;
font-family: 'Encode Sans', sans-serif;
opacity: 1;
z-index: 10;
}
.btn{
border: 2px solid white;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
font-size: 25px;
font-family: 'Encode Sans', sans-serif;
border-radius: 5px;
opacity: 1;
z-index: 10;
}
.btn:hover{
background: white;
color:black;
}
.offerings{
margin-top: -20px;
width: 100%;
height: 400px;
position: fixed;
top: 600px;
background:#22264b;
background-position: fixed;
background-size: cover;
align-content: center;
}
.secondheader{
text-align: center;
font-size: 45px;
color:white;
font-family: 'Encode Sans', sans-serif;
}
.cloudphoto{
display: block;
margin: auto;
height: 120px;
}
.jobnumber1{
align-content: center;
}
.thirdheader{
font-family: 'Encode Sans', sans-serif;
color:white;
font-size: 25px;
text-align: center;
}
.pjob{
font-family: 'Encode Sans', sans-serif;
color:darkgoldenrod;
text-align: center;
font-size: 15px;
}
.randomquote{
margin-top: -20px;
width: 100%;
height: 200px;
top: 1000px;
position:fixed;
background:url(https://i.stack.imgur.com/S4bDF.jpg);
background-position: fixed;
background-size: cover;
align-content: center;
}
誰かがコードを見て、これをデバッグする方法を見つけるために私を助けるためにとても親切だろう場合、私は本当に感謝そこに行きます。
、あなたのCSSを変更する必要があります。 –
位置を固定しないで同じ結果を得る方法はありますか？ –
もし私があなただったら、その周りのマージンをぐるぐる回りに止めてしまうでしょう。どちらかのホルダーにポジション要素を使わないでください。 位置情報の詳細については、https：//www.w3schools.com/css/css_positioning.asp –