gpt4 book ai didi

html - 无法使我的网页适合屏幕(流畅),而是太大而不适合水平滚动

转载 作者:行者123 更新时间:2023-11-27 23:49:01 33 4
gpt4 key购买 nike

我是一名学习 html/css 的学生,我在创建第一个网站时遇到了问题。我在配置页面时遇到了很多困难,因此它是流动的而不是固定的。我配置了一个框、图像和一些文本,因此它们在页面上是绝对的,但我无法使页面本身流畅以适合(并且不会太大)浏览器。这是 css/html :

body {
background-color: white;
}

.square {
position: absolute;
left: 0px;
top: 0px;
box-sizing: border-box;
background-color: rgb(49, 184, 184);
width: 2023px;
height: 842px;
}

.image {
position: absolute;
left: 588px;
top: 41px;
width: 1376px;
height: 927px;
}

.con {
position: absolute;
font-size: 200px;
color: white;
width: 271px;
height: 209px;
left: 293px;
top: 106px;
}

.view {
position: absolute;
box-sizing: border-box;
border-width: 1px;
border-style: solid;
background-color: rgba(0, 103, 103, 0.7);
border-color: transparent;
font-size: 200px;
color: white;
left: 588px;
top: 104px;
width: 396px;
height: 212px;
}

html,
body,
square,
image,
con,
view {
display: block
}
<!DOCTYPE html>
<html lang="en">

<head>
<title>ConView</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="square"></div>
<img src="indeximage.jpg" class="image">
<p class="con">con</p>
<p class="view">view</p>
</body>

</html>

最佳答案

上述方法的主要问题是分配给页面上不同元素的固定宽度。在这方面,媒体查询将是您最好的 friend 。它让你知道设备尺寸和不同的样式可以实现到不同的设备尺寸约束。在这种特殊情况下,您可以将浏览器尺寸设置为正方形的宽度,而不是指定固定宽度。 Media Query

关于html - 无法使我的网页适合屏幕(流畅),而是太大而不适合水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56641294/

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