Question

您好，Web开发人员，我对Web开发非常陌生，并且一直在自己练习。我正在尝试创建一个网站，目前正在使用HTML和CSS。我想要网站主页的以下演示文稿： website home

我一直在测试包装纸和身体包裹纸，以便当我在一个显示器上打开网站时，所有元素都如上图所示显示在中间，而当我在另一台较小的显示器上打开网站时，应该是相同，并以相同的布局显示所有元素。问题在于导航栏的标题，一旦窗口大小更改，所有内容都会更改位置。

这是我当前拥有的代码：

<!DOCTYPE html>
<html>
<title>WUNI</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">

<body>

<!-- !PAGE CONTENT! -->
<div>

        <!-- NAV BAR -->
        <a id="nav">
                <a href="/archive.html" class="item" class="max-width">Archive</a>
                <a href="/index.html" class="item" class="max-width">Home</a>
                <a href="/contact.html" class="item" class="max-width">Contact</a>
        </a>

    <div id="title">
    <h1 class="max-width">WUNI</h1>
    </div>
    <p id="motto" class="max-width">With a wide range of skills, we generate cohesive content that
    span from physical posters to interactive 3D web content
    </p>

</div>

<!-- BODY BORDER XD -->
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>


<!-- Footer -->
<footer id="footer">
    <i></i>
</footer>

</body>
</html>

这是我的CSS：

body {
    background-color: red;
    margin-right: auto;
    margin-left:  auto;
    max-width: 960px;
    padding-right: 10px;
    padding-left:  10px;
}


/**
 * Using max-width
 * will improve the browser's handling of small windows.
 * This is important when making a site usable on small devices.
 */
.max-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* end of special */

/* NAV BAR */
#nav{
    display: inline-block;
    padding-top: 20%;
    padding-left: 0%;
}

.item{
    color: white;
    text-decoration: none;
    font-size: 50px;
    padding-bottom: 20px;
    padding-left: 50px;
    font-family: Impact;
}

.item:hover{
    background-color: blue;
}
/* END NAV BAR */

#title{
    position: absolute;
    color: white;
    font-size: 150px;
    text-align: center;
    font-family: Impact;
    top: 10%;
    left: 30%;
}

#motto{
    position: absolute;
    color: white;
    font-size: 20px;
    text-align: center;
    font-family: Impact;
    top: 70%;
    left: 20%;
}

#footer{
    position: fixed;
    left: -3%;
    bottom: 0;
    padding-bottom: 8%;
    width: 100%;
    background-color: transparent;
    color: white;
    text-align: center;
}

/* BODY BORDER */

#top, #bottom, #left, #right {
    background-color: white;
    position: fixed;
}
#left, #right {
    top: 0; bottom: 0;
    width: 30px;
}
#left { left: 0; }
#right { right: 0; }

#top, #bottom {
    left: 0; right: 0;
    height: 30px;
}
#top { top: 0; }
#bottom { bottom: 0; }

/* END BODY BORDER */

如果有人可以帮助我，我将不胜感激！：D

Answer 1

我建议使用grid system来实现。网格系统解决了CSS当前存在的所有问题。我个人最喜欢的一个是bootstrap，因为它可以跨浏览器，各种屏幕尺寸工作，并且还捆绑了许多其他有用的功能。

当您不熟悉Web开发和引导程序时，可以使用可视化引导程序构建器（例如layitout）来快速启动。

还有另一个基于CSS的技巧，您可能还想考虑使字体大小具有响应性。 This answer应该是一个很好的起点

Answer 2

使用具有模板区域和媒体查询的Css网格系统。在此视频中，一个清晰的示例可以实现您想要的https://youtu.be/7kVeCqQCxlk

HTML元素根据窗口大小更改位置

2 个答案: