这是我第一次用HTML语言编写,如果我不遵守语言格式标准,请原谅我。



function show_or_hide_Block(show_hide){
    if (document.getElementById(show_hide).className == 'hide') {
        document.getElementById(show_hide).className = "show";}
	else{document.getElementById(show_hide).className = "hide";}
}

	function banner_adapt () {
		var b = document.getElementById("banner");
		b.style.maxWidth="100%";
		var p = document.getElementById("body_text");
			if (b.width >= 700){
				//alert("actual: " + b.width + " too large, setting to 700px.")
				b.style.maxWidth="700px";
			} else if (b.width < 700){
				//alert("Enought small to set 100%.")
				b.style.maxWidth="100%";}
			//alert("setting lar to:" + (Math.round(b.width/1600*449)+10) + "px");
			p.style.marginTop=(Math.round(b.width/1600*449)+10)+ "px";

	}

		$(window).load(function(){
			banner_adapt();
		});
		$(document).ready(function(){
  		$(window).resize(function(){
			banner_adapt();
		});
		});

body {
  background-color: #f6db75;
}

separatore_iniziale {
  margin-top: 60px;
  }

top_menu {
  font-size: 18px;
	position: fixed;
	top: 10px;
  }

bottom_menu {
  font-size: 18px;
	position: fixed;
	bottom: 25px;
  }

.ver {
  font-size: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
  }

.altro {
  font-size: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
  }
p{
	z-index: 2;
}

h1{
  margin-top: 0;
	margin-bottom: 0px;
  }

h2{
  font-size: 18px;
	margin-top: 0;
	margin-bottom: 10px;
  }

h3{
  font-size: 14px;
	margin-top: 5px;
	margin-bottom: 10px;
  }

h3.hide {
  display: none;
}

h3.show {

}

h4{
  margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 20px;
	text-align: justify;
  }

.tab {
  margin-left: 150px;
  margin-right: 20px;
  text-align: justify;
  }


ul {
  margin-top: 10px;
	margin-bottom: 10px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">

</head>
<body>
<top_menu>
<h1><a  href="./index.html">
<img  id="banner" style="max-width:300px;" src="https://i.ibb.co/7Q7rt2k/Banner-prova.png"></a>
</h1>
<br>
<h2><a>Homepage</a></h2>
<h2><a onClick="show_or_hide_Block('downloads_platforms')" href="javascript:void(0);">Downloads</a></h2>
<h3 id="downloads_platforms" class = "hide">
	&gt;<a href="..">Windows</a>
	<br><br>
	&gt;<a href="..">Mac OS X</a>
	<br><br>
	&gt;<a href="..">Linux/Ubuntu</a>
</h3>
</top_menu>
<p id="body_text" style="margin-top:227px;" >
	<h4>Write something above</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>

	<h4>Do you have some text?</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div>

	<h4>Question</h4>
	<div class="tab">List of points
	<ul>
		<li >point1;</li>
		<li >point1</li>
		<li >point1</li>
		<li >point1</li>
		</ul></div>
	<div class="tab">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>
</p>
<bottom_menu>
	<a class="ver">(v 2.0)</a><br>
	<a class="altro"><a href="./index.html">Back to index</a></a>
</bottom_menu>
</body>

</html>





如您所见,我将图像放在h1标签中,并固定在style.css中。然后,我希望图像可以适应在其中查看的窗口,因此我制作了一个可以适应图像和顶部文本的JS。问题是我的图像是透明的,并且没有填充窗口的宽度,因此文本可以在图像的后面和旁边滚动。我既不希望文本也不滚动。如何才能做到这一点?
预先感谢

最佳答案

我放
背景颜色: ;
右填充:100%;

现在,文字不会同时显示在图片广告的后面。



function show_or_hide_Block(show_hide){
    if (document.getElementById(show_hide).className == 'hide') {
        document.getElementById(show_hide).className = "show";}
	else{document.getElementById(show_hide).className = "hide";}
}

	function banner_adapt () {
		var b = document.getElementById("banner");
		b.style.maxWidth="100%";
		var p = document.getElementById("body_text");
			if (b.width >= 700){
				//alert("actual: " + b.width + " too large, setting to 700px.")
				b.style.maxWidth="700px";
			} else if (b.width < 700){
				//alert("Enought small to set 100%.")
				b.style.maxWidth="100%";}
			//alert("setting lar to:" + (Math.round(b.width/1600*449)+10) + "px");
			p.style.marginTop=(Math.round(b.width/1600*449)+10)+ "px";

	}

		$(window).load(function(){
			banner_adapt();
		});
		$(document).ready(function(){
  		$(window).resize(function(){
			banner_adapt();
		});
		});

body {
  background-color: #f6db75;
}

separatore_iniziale {
  margin-top: 60px;
  }

top_menu {
  font-size: 18px;
	position: fixed;
	top: 10px;
  }

bottom_menu {
  font-size: 18px;
	position: fixed;
	bottom: 25px;
  }

.ver {
  font-size: 14px;
	margin-top: 0px;
	margin-bottom: 0px;
  }

.altro {
  font-size: 18px;
	margin-top: 0px;
	margin-bottom: 0px;
  }
p{
	z-index: 2;
}

h1{
  margin-top: 0;
	margin-bottom: 0px;
  }

h2{
  font-size: 18px;
	margin-top: 0;
	margin-bottom: 10px;
  }

h3{
  font-size: 14px;
	margin-top: 5px;
	margin-bottom: 10px;
  }

h3.hide {
  display: none;
}

h3.show {

}

h4{
  margin-top: 10px;
	margin-bottom: 0px;
	margin-left: 150px;
	margin-right: 20px;
	text-align: justify;
  }

.tab {
  margin-left: 150px;
  margin-right: 20px;
  text-align: justify;
  }


ul {
  margin-top: 10px;
	margin-bottom: 10px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">

</head>
<body>
<top_menu>
<h1><a  href="./index.html">
<img  id="banner" style="max-width:300px; background-color: #EC3711; padding-right:100%;" src="https://i.ibb.co/7Q7rt2k/Banner-prova.png"></a>
</h1>
<br>
<h2><a>Homepage</a></h2>
<h2><a onClick="show_or_hide_Block('downloads_platforms')" href="javascript:void(0);">Downloads</a></h2>
<h3 id="downloads_platforms" class = "hide">
	&gt;<a href="..">Windows</a>
	<br><br>
	&gt;<a href="..">Mac OS X</a>
	<br><br>
	&gt;<a href="..">Linux/Ubuntu</a>
</h3>
</top_menu>
<p id="body_text" style="margin-top:227px;" >
	<h4>Write something above</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>

	<h4>Do you have some text?</h4>
	<div class="tab">
	Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div>

	<h4>Question</h4>
	<div class="tab">List of points
	<ul>
		<li >point1;</li>
		<li >point1</li>
		<li >point1</li>
		<li >point1</li>
		</ul></div>
	<div class="tab">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	<br>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
	</div>
</p>
<bottom_menu>
	<a class="ver">(v 2.0)</a><br>
	<a class="altro"><a href="./index.html">Back to index</a></a>
</bottom_menu>
</body>

</html>

09-25 17:10
查看更多