gpt4 book ai didi

html - 网页布局问题

转载 作者:太空宇宙 更新时间:2023-11-03 18:42:22 26 4
gpt4 key购买 nike

我有这个页面

<html>
<head>
<title>Pagina</title>
<link href="estilo_duda.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="contenedor">
<div id="encabezado">
Encabezado
</div>
<div id="menu">
Menu con las opciones
</div>

<div id="principal">
Principal
Principal
Principal
</div>
<div id="publicidad">
Publicidad
</div>

<div id="piedepagina">
Pie de Pagina
</div>
</div>

</body>
</html>

这个CSS

.contenedor
{
width: auto;
height: auto;
margin: 0 auto;
}

#encabezado
{
font-family: Garamond,Arial;
font-size: 40px;
text-align: center;
padding-top: 25px;
color: white;
width: 987px; /* Ancho */
height: 100px; /* Alto */
background-color: #000000;
}

#menu
{
font-family: Arial;
font-size: 40px;
text-align: center;
background-color: #000000;
color: white;
width: 200px; /* Ancho */
height: 1720px; /* Alto */
float: left;
}

#principal
{
font-family: Arial;
font-size: 20px;
background-color: #000000;
width: 650px; /* Ancho */
height: 1720px; /* Alto */
color: #3FC665;
float: left;
padding-left: 10px;
}

#publicidad
{
font-family: Arial;
background-color: #000000;
width: 127px; /* Ancho */
height: 1720px; /* Alto */
text-align: center;
color: yellow;
float: left;
}

#piedepagina
{
font-family: Garamond;
font-size: 20px;
text-align: center;
vertical-align: middle;
color: orange;
width: 987px; /* Ancho */
height: 50px; /* Alto */
background-color: #000000;
padding-top: 25px;
clear:both;
}

在我的 14 英寸显示器上,但它看起来不错,但宽屏显示器看起来很糟糕,因为它显示所有正确对齐的内容

enter image description here

有人知道怎么解决吗?

最佳答案

只需在您的 CSS 文件中替换以下代码,并在您的 HTML 文件(菜单)中包含 break 标记。

body {
background-color:#000000;
font-family: georgia,sans-serif;
color:#333;
margin:0;
padding:0;
}

.contenedor
{
width: 1100px;
margin: 0 auto;
}

#encabezado
{
font-family: Garamond,Arial;
font-size: 40px;
text-align: center;
padding-top: 25px;
color: white;
width: 987px;
height: 100px;
background-color: #000000;
}

#menu
{
font-family: Arial;
font-size: 30px;
text-align: center;
background-color: #000000;
color: white;
width: 130px;
height: 500px;
float: left;
}

#principal
{
font-family: Arial;
font-size: 20px;
background-color: #000000;
width: 750px;
height: 500px;
color: #3FC665;
float: left;
padding-left: 100px;
}

#publicidad
{
font-family: Arial;
background-color: #000000;
width: 100px;
height: 500px;
text-align: center;
color: yellow;
float: left;
}

#piedepagina
{
font-family: Garamond;
font-size: 20px;
text-align: center;
vertical-align: middle;
color: orange;
width: 987px;
height: 50px;
background-color: #000000;
padding-top: 25px;
clear:both;
}

结果:

enter image description here

关于html - 网页布局问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17256520/

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