我一直在为一个朋友编写一个项目的网站,我正在努力。花了更多的时间,我应该研究如何使用JavaScript来使网站链接加载到内容"我得到了它的工作,第二个问题:内容加载但位于"内容"内的一个小方块内。 div我想知道如何调整下面div中显示的内容是我的页面代码
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Breezies Blog</title>
<style>
.header {
background-color: white;
background-image: url('file:///C:/Users/Zenga/Desktop/egoblog/bg21.png');
background-size: cover;
background-repeat: no-repeat;
color: black;
text-align: center;
max-width: 1000px;
height: 187px;
margin: 0 auto;
margin-top: 5px;
border: 1px solid white;
border-radius: 20px;
position: static;
}
a {
color: white;
}
ul {
padding: 5px;
background: rgba(0,0,0,.5);
position: relative;
top: 142px;
border-radius: 10px;
}
li {
display: inline;
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
}
body {
background-image: url('file:///c:Users/Zenga/Desktop/egoblog/fullbg.jpg');
background-size: cover;
background-repeat: no-repeat;
color: black;
}
section {
background-color: rgba(0,0,0,.5);
color: white;
position: relative;
height: 600px;
max-width: 1000px;
margin: 0 auto;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="header">
<nav id="menu">
<ul>
<li><a href="#" onclick="load_home()">Home</a></li>
<li><a href="#" onclick="load_cast()">Cast Of Characters</a></li>
<li><a href="#" onclick="load_hist()">History of Ego</a></li>
<li><a href="#" onclick="load_create()">Meet the Creators</a></li>
</ul>
</nav>
</div>
<br>
<section>
<div class="content" id="content"> </div>
</section>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="main.html"></object>';
}
function load_cast(){
document.getElementById("content").innerHTML='<object type="text/html" style="overflow: hidden" data="cast.html"></object>';
}
function load_hist(){
document.getElementById("content").innerHTML='<object type="text/html" data="hist.html"></object>';
}
function load_create(){
document.getElementById("content").innerHTML='<object type="text/html" data="create.html"></object>';
}
</script>
</body>
</html>
答案 0 :(得分:0)
你没有给内容div一个大小所以它只是自动,给它一个最小宽度和最小高度