Html 在不同的计算机上查看或调整大小时，导航栏和文本会移动

我是新来的。在我的网站上，当窗口调整大小或在不同的计算机屏幕上查看时，导航栏（由矩形和三角形组成）和文本会四处移动，部分内容会消失。尺寸是否需要以百分比表示？如果是这样，我不确定需要更换哪些部件

要查看它，请按照此链接并单击全屏按钮

正文{
背景图像：url（'http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#背景{
背景色：白色；
身高：100%；
宽度：75%；
位置：相对位置；
顶部：100px；
左边距：自动；
右边距：自动；
}
#标题{
单词包装：打断单词；
边框：1px纯黑；
身高：30%；
宽度：60%；
位置：相对位置；
底部：90px；
左边距：自动；
右边距：自动；
}
.光容器{
边界：透明；
身高：55%；
宽度：65%；
位置：相对位置；
底部：60px；
左边距：自动；
右边距：自动；
}
.光电接收器img{
宽度：100%；
身高：100%；
}
.navcontainer{
边框：1px纯黑；
身高：10%；
宽度：99%；
位置：相对位置；
底部：70像素；
左边距：自动；
右边距：自动；
溢出：隐藏；
}
.navcontainer.navbar.navigation li{
列表样式：无；
显示：块；
浮动：左；
边缘：1米；
文本对齐：居中；
位置：相对位置；
左：15%；
}
.navcontainer.navbar.navigation li a{
字体系列：流沙；
文字装饰：无；
文本转换：大写；
显示：块；
宽度：110%；
颜色：#000000；
字体大小：20px；
垂直对齐：中间对齐；
线高：31px；
}
.导航李a：悬停{
边缘顶部：2倍；
}
navbar先生{
保证金：0自动；
宽度：90%；
位置：相对位置；
底部：42px；
}
.navcontainer.navbar.rectangle{
背景：#f1e5cd；
高度：62px；
位置：相对位置；
-moz盒阴影：0px 0px 4px rgba（0,0,0,0.55）；
盒影：0px 0px 4px rgba（0,0,0,0.55）；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
z索引：500；/*堆栈顺序：前台*/
保证金：3em0；
}
.navcontainer.navbar.l-三角形顶部{
边框颜色：#e7dbc3透明；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：相对位置；
浮动：左；
顶部：1px；
左：-50px；
}
.navcontainer.navbar.l-三角形-底部{
边框颜色：透明透明#e7dbc3；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：相对位置；
浮动：左；
顶部：-40px；
左：-150px；
}
.navcontainer.navbar.r三角形顶部{
边框颜色：#e7dbc3透明；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：相对位置；
浮动：对；
右：-45px；
顶部：-107px；
}
.navcontainer.navbar.r-三角形-底部{
边框颜色：透明透明#e7dbc3；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：相对位置；
浮动：对；
顶部：-149px；
右：-145px；
}

阅读本文“” 你的代码有点混乱。 希望这有帮助

这里有一个基本示例：

ul {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

li {
    float: left;
}

a {
    background-color: #dddddd;
    display: block;
    width: 60px;
}

---

你可以在我的小提琴中找到答案，包括绝对定位的三角形。为了简化起见，我删除了你的标题

正文{
背景图像：url（'http://www.rgbstock.com/cache1u7YbL/users/x/xy/xymonau/300/nXWyMYC.jpg')
}
#背景{
背景色：白色；
身高：100%；
宽度：75%；
位置：相对位置；
顶部：100px；
左边距：自动；
右边距：自动；
}
.光容器{
边界：透明；
身高：55%；
宽度：65%；
位置：相对位置；
底部：60px；
左边距：自动；
右边距：自动；
}
.光电接收器img{
宽度：100%；
身高：100%；
}
.navcontainer{
身高：10%；
宽度：99%；
左边距：自动；
右边距：自动；
溢出：隐藏；
}
.navcontainer.navbar.navigation{
文本对齐：居中；
保证金：0；
填充：0；
}
.navcontainer.navbar.navigation li{
列表样式：无；
显示：内联块；
边缘：1米；
文本对齐：居中；
}
.navcontainer.navbar.navigation li a{
字体系列：流沙；
文字装饰：无；
文本转换：大写；
颜色：#000；
字体大小：20px；
线高：31px；
过渡时间：0.2s；
显示：内联块；
位置：相对位置；
}
.导航李a：悬停{
变换：translateY（10px）；
}
navbar先生{
保证金：0自动；
宽度：90%；
位置：相对位置；
底部：42px；
}
.navcontainer.navbar.rectangle{
背景：#f1e5cd；
高度：62px；
位置：相对位置；
-moz盒阴影：0px 0px 4px rgba（0,0,0,0.55）；
盒影：0px 0px 4px rgba（0,0,0,0.55）；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
z指数：500；
/*堆栈顺序：前台*/
保证金：3em0；
}
.navcontainer.navbar.l-三角形顶部{
边框颜色：#e7dbc3透明；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：绝对位置；
排名：0；
左：-38px；
}
.navcontainer.navbar.l-三角形-底部{
边框颜色：透明透明#e7dbc3；
边框样式：实心；
边框宽度：50px；
高度：0px；
宽度：0px；
位置：绝对位置；
顶部：-38px；
左：-38px；
}
.navcontainer.navbar.r三角形顶部{
border-c