我正在上课我的投资组合页面。当浏览器调整大小时,我试图让浏览器调整网页。主要是我在标题中的导航链接。此外,当屏幕完整时,我的导航链接位于右上角。但当我恢复窗户时,它位于中间位置。我该怎么办?任何帮助将不胜感激。这是我的代码。如果这有帮助。
#header,
#main,
#footer{
display:block;
position:relative;
float:left;
}
#header,
#footer{
width:1100px;
height:80px;
}
#header{
margin-bottom:2px;
}
#footer{
margin-top:2px;
text-align:right;
border:2px;
}
#main{
width:650px;
height:200px;
margin-left:200px;
margin-right:200px;
margin-top:200px;
}
#leftcol{
float:left;
}
#nav{
border:2px solid #F00;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
#nav li{
display:inline;
}
#nav a{
display:inline-block;
padding:10px;
}
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<style type="text/css">
.auto-style1 {
text-align: left;
}
</style>
</head>
<body>
<div class="auto-style1">
<div id="header">Header
<h1>Creative Minds Inc.</h1>
</div>
<div id="nav">Navigation
<ul>
<li><a href="homepage.html">Homepage</a>
</li>
<li><a href="#">Tips and Trick</a>
</li>
</li><a href="aboutme.html">About me</a>
</li>
<li><a href="#">Get in Touch</a>
</li>
</ul>
</div>
<div id="main">Main
<h2>A passion for design and a creative mind.</h2>
<h3>Design, Develop, Dream</h3>
</div>
<div id="sidebar">Navigation</div>
<div id="footer">Footer
<h3>Creative Minds Inc. Jonathan Mourning</h3>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
您可以使用标准resize
DOM事件。然后在
window.onresize = function(event) {
...
}
你可以相应地调整elmenets的位置和大小。
但是一般情况下,您可以避免固定大小并为DOM元素提供百分比值,以便在所有屏幕大小和比率下自动调整大小。例如,如果您的网页具有垂直方向,请将width
更改为100%
,并使#main
元素始终与屏幕中心对齐:
#main{
width:650px; /*or 70% */
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:200px;
}
以下是代码示例:http://jsfiddle.net/TZGXf/4/ 这是一个全屏:http://jsfiddle.net/TZGXf/4/embedded/result/
答案 1 :(得分:1)
不使用像width: 1000px;
这样的设置宽度,而是使用像width: 100%;
这样的百分比值。但要小心,因为这会导致无法预料的问题。