我试图建立一个基本的网站与CSS和HTML。我现在已经调整了以下文件中的代码，将图像缩小到可显示的大小。但是让我们假设我试着减少我的浏览器的宽度(我使用我的笔记本电脑)，内容得到重组，文本移动到图片下方的预期。但问题是我无法向下滚动。我尝试了各种解决方案，如设置html溢出滚动，设置overflow-x属性隐藏在html中。
<!DOCTYPE html>
<html>
<head>
<script data-ad-client="ca-pub-7652187840778484" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<title>
W3Coders
</title>
<link rel="stylesheet" href="better-style.css">
</head>
<body>
<div class = "topping">
<h1 style="float: left;color: rgb(58, 118, 209);">W3Coders</h1>
<h1 style="float: left;margin-left: 870px;color: rgb(58, 118, 209);">Definitely not world's most visited site</h1>
<img src="images/w3image.png" alt="The Logo" style="float: right; height: 68px;">
</div>
<div class="navbar">
<a href="index.html" class="active">Home</a>
<a href="resources.html">Resources</a>
<a href="skills.html">Skills</a>
<a href="rate.html">Rate</a>
<a href="contact.html">Contact</a>
</div>
<div class="contents">
<img src="images/wwwimage.jpg" alt="Just a picture" style="height: 97%;float: left;">
<h1>Purpose Of Existence</h1>
<h4>W3Coders was created for the sole purpose of <s>helping people </s>showcasing my web development skills</h4>
<h4>It was at this moment i ran out of content to put here. Contact me if you have an idea on what i should do with all the empty space</h4>
<h1>Random stuff cuz i have idea what do with space:</h1>
<h4>"Any programmer can write code a computer can understand. It takes skills to write code a person can understand."</h4>
</div>
</body>
.topping
background-color: white;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
height: 9%;
color: rgb(92, 84, 84);
padding: 0%;
}
.navbar{
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position:fixed;
top:68px;
left:0px;
}
.people{
background-color: rgb(58,118,209);
overflow: hidden;
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
.navbar a{
float:left;
color: white;
padding:14px 26px;
text-decoration: none;
text-align: center;
font-size: 17px;
}
.people a{
float:left;
color: white;
padding: 14px 26px;
text-decoration: none;
text-align: center;
font-size: 15px;
}
.navbar a.active{
color: white;
background-color: rgb(58,118,209);
}
.people a.active{
background-color:black;
color: white;
}
.navbar a:hover{
color: white;
background-color: cyan;
}
.people a:hover{
color:white;
background-color: rgb(92, 84, 84);
}
.contents{
background:url("images/background.jpg");
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
}
.card{
background-color: white;
width: fit-content;
color: black;
padding: 20px;
margin: 10px;
border-radius: 5px;
border-width: 10px;
float: left;
border-color: black;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2);
}
h2 .card{
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
}
a img:hover{
border-radius: 10px;
border-width: 3px;
border-color: grey;
border-style: solid;
animation-name: links;
animation-duration: 3s;
animation-fill-mode: forwards;
}
@keyframes links{
0%{
border-color: grey;
}
25%{
border-color: red;
}
50%{
border-color: green;
}
100%{
border-color:blue;
}
}
我使用github页面来托管我的网站:https://godofgames0070.github.io另外，我正在使用谷歌浏览器来查看我的网站。
我想这将有助于修改以下内容:
//内容是可滚动的
.contents {
background: url(images/background.jpg);
width: 100%;
position: fixed;
left: 0px;
top: 15%;
height: 85%;
overflow: scroll;
}
导航栏看起来也很挤，我已经更新了顶部的样式，所以它固定而不是隐藏。试试下面的命令:
.navbar {
background-color: rgb(92,84,84);
overflow: hidden;
width: 100%;
height: 6%;
position: fixed;
top: 9%;
left: 0px;
}
你的内容有一个CSS属性position: fixed应用。你需要删除它，以便滚动你的内容。
如果你正在寻找一个固定的背景效果，考虑background-attachment: fixed代替。
您可以将img放在带有float: right的内容中开始，然后使用媒体查询来减少屏幕以更改float像这样:
.contents{
background-image: url("images/background.jpg");
width: 100%;
margin-top: 100px;
height: 85%;
}
.contents>img {
width: 30%;
float: left;
}
@media screen and (max-width:1000px) {
.contents>img {
width: 100%;
float: none;
}
}