gpt4 book ai didi

html - 切换分辨率时布局会发生变化

转载 作者:行者123 更新时间:2023-11-28 11:36:35 29 4
gpt4 key购买 nike

我正在制作一个网站(荷兰语),我在一台带外接屏幕的笔记本电脑上工作。外部屏幕的分辨率比我的笔记本电脑屏幕的分辨率高,因此在另一个屏幕上查看时网站会失真。我该如何解决这个问题?

<!DOCTYPE HTML>

<html>

<head> <style type="text/css">

body {
background-color: #D8D8D8;
}
nav {
/* Dit is voor de menubalk bovenin. */
position: relative;
background-color: black;
width: 100%;
height: 110px;
top: -16px;
left: -7.8px;
padding: 8px;
}
.menutekst1 {
position: relative;
width: 150px;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 40px;
font-family: verdana;

}
.menutekst2 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 25px;
font-family: verdana;
}
.menutekst3 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
right: 50px;
font-family: verdana;
}
.menutekst4 {
position: relative;
display: inline;
border-color: white;
color: white;
list-style-type: none;
float: right;
font-size: 39px;
top: 10px;
font-family: verdana;
}
#logo {
/* Dit is voor het logo rechts bovenin. */
position: absolute;
top: 30px;
left: 0px;
width: 300px;
}
#facebook {
/* Dit is voor het Facebook logo rechts bovenin. */
position: absolute;
top: 30px;
left: 320px;
width: 70px;
}
#hometekst {
/* Dit is voor de tekst op de home pagina. */
position: relative;
text-align: center;
font-size: 20px;
font-family: Verdana;
}
#home1 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: left;
left: 0px;
/* left: 40px; */
}
#home2 {
position: relative;
display: inline;
width: 320px;
height: 161px;
float: right;
left: px;
right: 250px; */
}
#home3 {
position: relative;
display: inline;
width: 250px;
height: 161px;
float: right;
/* right: 50px; */
}

</style>

</head>

<body>

<nav>
<ul>
<img id="logo" src="Foto/logoalgemeen.png" />

<a href="https://www.facebook.com/pages/Ve-screen-Ve-woning-en-scheepsstoffering/369675879764436?fref=ts" target="_blank" title="Facebook"><img id="facebook" src="Foto/facebookalgemeen.png" /></a>

<div class="menutekst4"><li>Contact </li></div>
<div class="menutekst2"><li>Wat doen wij </li></div>
<div class="menutekst3"><li>Producten</li></div>
<div class="menutekst1"><li>Home</li></div>

</ul>
</nav>

<p id="hometekst">

<strong>Welkom bij VE-Screen</strong><br>
Ve-stoffering is een betrouwbare partner, denkt met u mee<br>
en weet wat kwaliteit is of het nu gaat om uw woning, schip<br>
of kantoor.<br>
Onze kracht is de ervaring en goede samenwerking met u<br>
als klant, de interieurbouwers en andere aannemers zodat<br>
alles perfect op elkaar afgestemd en opgeleverd wordt.<br>
Desgewenst incl. stoffering van banken, het leveren van<br>
matrassen en bedtextiel en natuurlijk het plaatsen van ons<br>
eigen Ve-screen zonwering.
</p>

<img id="home3" src="Foto/home3.png" />
<img id="home2" src="Foto/home2.png" />
<img id="home1" src="Foto/home1.png" />

</body>

</html>

最佳答案

我认为这是因为您将宽度用作百分比,然后绝对定位您的按钮。这意味着 100% 值将适应屏幕尺寸,但不会适应按钮的位置,因为它们将始终使用每个屏幕的相同值进行绝对定位。

一种解决方案是使用一个精确的宽度值,另一种解决方案是不绝对定位按钮,而是使用按钮的 float 属性。希望这会有所帮助。

关于html - 切换分辨率时布局会发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20892387/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com