1

我正在为课程制作我的作品集页面。当浏览器调整大小时，我试图让网页与浏览器一起调整。主要是我在标题中的导航链接。此外，当屏幕已满时，我的导航链接位于右上角。但是当我恢复窗口时，它位于中间。我该怎么办？任何帮助将不胜感激。这是我的代码。如果这有帮助的话。

#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>
4

2 回答 2

1

您可以使用标准的resizeDOM 事件。然后在

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/

于 2013-09-03T01:49:12.107 回答
1

width: 1000px;而不是使用像使用百分比值这样的设置宽度width: 100%;。但要小心，因为这可能会导致无法预料的问题。

于 2013-09-03T01:52:03.463 回答