Html CSS网格渲染不正确
我试图创建的网格有三个问题，用于构建页面布局 第一个问题是我不希望网格跨越页面的长度。目前，它被设置为正确的宽度，但我希望整个事情集中在页面的中间。目前它是左对齐的，我不能让它在中心对齐 第二个问题是，我有一个带有id侧栏的第二个网格，并且我已经为它分配了ro grid area侧栏。侧栏有十六行。我创建了一个.btn类，并试图在每个按钮内放置一个图像。当前，图像被放置在正确的网格区域中，但按钮未渲染 第三个问题是，我已将#bannergrid指定给网格区域横幅。我在template.html中的div中设置了正确显示的背景图像#bannergrid的右上方有一个网格区域，我已将其设置为“登录”。我有一个.btn登录，我正试图将它放在#login div中，但它没有显示出来 如果您想查看我当前看到的内容，我当前在开发服务器上运行该页面 您可以在此处看到我的所有项目代码： 以下是相关文件： template.htmlHtml CSS网格渲染不正确,html,css,css-grid,Html,Css,Css Grid,我试图创建的网格有三个问题，用于构建页面布局 第一个问题是我不希望网格跨越页面的长度。目前，它被设置为正确的宽度，但我希望整个事情集中在页面的中间。目前它是左对齐的，我不能让它在中心对齐 第二个问题是，我有一个带有id侧栏的第二个网格，并且我已经为它分配了ro grid area侧栏。侧栏有十六行。我创建了一个.btn类，并试图在每个按钮内放置一个图像。当前，图像被放置在正确的网格区域中，但按钮未渲染 第三个问题是，我已将#bannergrid指定给网格区域横幅。我在template.html中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="{{ meta_name }}" content="{{ meta_content }}" />
<title>{{ title }}</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Monda&display=swap" rel="stylesheet">
{% for style in stylesheets %}
<link href="{{ style.style }}" type="text/css" rel="stylesheet" />
{% endfor %}
</head>
<body>
<div class="container">
<div id="bannergrid" style="background:url(/static/img/banner.jpg">
<div id="topleft"></div>
<div id="login">
<div class="btn-login"></div>
</div>
<div id="bottom"></div>
</div>
<div id="left"></div>
<div id="sidebargrid" style="background:url(/static/img/sidebar.jpg">
<div id="rules">
<div class="button">
</div>
</div>
<div id="games">
<div class="btn">
<img src="/static/img/sidebar/gamesGOLD.png"
onmouseover="this.src='/static/img/sidebar/gamesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/gamesGOLD.png'" />
</div>
</div>
<div id="stories">
<div class="btn">
<img src="/static/img/sidebar/storiesGOLD.png"
onmouseover="this.src='/static/img/sidebar/storiesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/storiesGOLD.png'" />
</div>
</div>
<div id="heroes">
<div class="btn">
<img src="/static/img/sidebar/heroesGOLD.png"
onmouseover="this.src='/static/img/sidebar/heroesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/heroesGOLD.png'" />
</div>
</div>
<div id="npcs">
<div class="btn">
<img src="/static/img/sidebar/npcsGOLD.png"
onmouseover="this.src='/static/img/sidebar/npcsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/npcsGOLD.png'" />
</div>
</div>
<div id="locations">
<div class="btn">
<img src="/static/img/sidebar/locationsGOLD.png"
onmouseover="this.src='/static/img/sidebar/locationsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/locationsGOLD.png'" />
</div>
</div>
<div id="skills">
<div class="btn">
<img src="/static/img/sidebar/skillsGOLD.png"
onmouseover="this.src='/static/img/sidebar/skillsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/skillsGOLD.png'" />
</div>
</div>
<div id="abilities">
<div class="btn">
<img src="/static/img/sidebar/abilitiesGOLD.png"
onmouseover="this.src='/static/img/sidebar/abilitiesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/abilitiesGOLD.png'" />
</div>
</div>
<div id="powers">
<div class="btn">
<img src="/static/img/sidebar/powersGOLD.png"
onmouseover="this.src='/static/img/sidebar/powersBLUE.png'"
onmouseout="this.src='/static/img/sidebar/powersGOLD.png'" />
</div>
</div>
<div id="flaws">
<div class="btn">
<img src="/static/img/sidebar/flawsGOLD.png"
onmouseover="this.src='/static/img/sidebar/flawsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/flawsGOLD.png'" />
</div>
</div>
<div id="equipment">
<div class="btn">
<img src="/static/img/sidebar/equipmentGOLD.png"
onmouseover="this.src='/static/img/sidebar/equipmentBLUE.png'"
onmouseout="this.src='/static/img/sidebar/equipmentGOLD.png'" />
</div>
</div>
<div id="devices">
<div class="btn">
<img src="/static/img/sidebar/devicesGOLD.png"
onmouseover="this.src='/static/img/sidebar/devicesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/devicesGOLD.png'" />
</div>
</div>
<div id="armor">
<div class="btn">
<img src="/static/img/sidebar/armorGOLD.png"
onmouseover="this.src='/static/img/sidebar/armorBLUE.png'"
onmouseout="this.src='/static/img/sidebar/armorGOLD.png'" />
</div>
</div>
<div id="weapons">
<div class="btn">
<img src="/static/img/sidebar/weaponsGOLD.png"
onmouseover="this.src='/static/img/sidebar/weaponsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/weaponsGOLD.png'" />
</div>
</div>
<div id="vehicles">
<div class="btn">
<img src="/static/img/sidebar/vehiclesGOLD.png"
onmouseover="this.src='/static/img/sidebar/vehiclesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/vehiclesGOLD.png'" />
</div>
</div>
<div id="constructs">
<div class="btn">
<img src="/static/img/sidebar/constructsGOLD.png"
onmouseover="this.src='/static/img/sidebar/constructsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/constructsGOLD.png'" />
</div>
</div>
</div>
<div id="middle"></div>
<div id="content">
{% include includehtml %}
</div>
<div id="right"></div>
</div>
</body>
</html>
#rules{
grid-area: rulea;
}
#games{
grid-area: games;
}
#stories{
grid-area: stories;
}
#heroes{
grid-area: heroes;
}
#npcs{
grid-area: npcs;
}
#locations{
grid-area: locations;
}
#skills{
grid-area: skills;
}
#abilities{
grid-area: abilities;
}
#powers{
grid-area: powers;
}
#flaws{
grid-area: flaws;
}
#equipment{
grid-area: equipment;
}
#devices{
grid-area: devices;
}
#armor{
grid-area: armor;
}
#weapons{
grid-area: weapons;
}
#vehicles{
grid-area: vehicles;
}
#constructs{
grid-area: constructs;
}
.btn{
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
width: 250px;
height: 45px;
margin: 0px;
border-bottom: 2px solid #cdb99d;
}
.btn:hover {
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
width: 250px;
height: 45px;
margin: 0px;
border-bottom: 2px solid #7ecef6;
border-left: 2px solid #7ecef6;
border-right: 2px solid #7ecef6;
}
好的，我解决了所有的问题 边栏按钮没有显示，因为我没有在app.py中为css文件设置正确的路径 为了使.container成为中心，我在template.html中的div中添加了justify内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="{{ meta_name }}" content="{{ meta_content }}" />
<title>{{ title }}</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Monda&display=swap" rel="stylesheet">
{% for style in stylesheets %}
<link href="{{ style.style }}" type="text/css" rel="stylesheet" />
{% endfor %}
</head>
<body>
<div class="container">
<div id="bannergrid" style="background:url(/static/img/banner.jpg">
<div id="topleft"></div>
<div id="login">
<div class="btn-login"></div>
</div>
<div id="bottom"></div>
</div>
<div id="left"></div>
<div id="sidebargrid" style="background:url(/static/img/sidebar.jpg">
<div id="rules">
<div class="button">
</div>
</div>
<div id="games">
<div class="btn">
<img src="/static/img/sidebar/gamesGOLD.png"
onmouseover="this.src='/static/img/sidebar/gamesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/gamesGOLD.png'" />
</div>
</div>
<div id="stories">
<div class="btn">
<img src="/static/img/sidebar/storiesGOLD.png"
onmouseover="this.src='/static/img/sidebar/storiesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/storiesGOLD.png'" />
</div>
</div>
<div id="heroes">
<div class="btn">
<img src="/static/img/sidebar/heroesGOLD.png"
onmouseover="this.src='/static/img/sidebar/heroesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/heroesGOLD.png'" />
</div>
</div>
<div id="npcs">
<div class="btn">
<img src="/static/img/sidebar/npcsGOLD.png"
onmouseover="this.src='/static/img/sidebar/npcsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/npcsGOLD.png'" />
</div>
</div>
<div id="locations">
<div class="btn">
<img src="/static/img/sidebar/locationsGOLD.png"
onmouseover="this.src='/static/img/sidebar/locationsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/locationsGOLD.png'" />
</div>
</div>
<div id="skills">
<div class="btn">
<img src="/static/img/sidebar/skillsGOLD.png"
onmouseover="this.src='/static/img/sidebar/skillsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/skillsGOLD.png'" />
</div>
</div>
<div id="abilities">
<div class="btn">
<img src="/static/img/sidebar/abilitiesGOLD.png"
onmouseover="this.src='/static/img/sidebar/abilitiesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/abilitiesGOLD.png'" />
</div>
</div>
<div id="powers">
<div class="btn">
<img src="/static/img/sidebar/powersGOLD.png"
onmouseover="this.src='/static/img/sidebar/powersBLUE.png'"
onmouseout="this.src='/static/img/sidebar/powersGOLD.png'" />
</div>
</div>
<div id="flaws">
<div class="btn">
<img src="/static/img/sidebar/flawsGOLD.png"
onmouseover="this.src='/static/img/sidebar/flawsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/flawsGOLD.png'" />
</div>
</div>
<div id="equipment">
<div class="btn">
<img src="/static/img/sidebar/equipmentGOLD.png"
onmouseover="this.src='/static/img/sidebar/equipmentBLUE.png'"
onmouseout="this.src='/static/img/sidebar/equipmentGOLD.png'" />
</div>
</div>
<div id="devices">
<div class="btn">
<img src="/static/img/sidebar/devicesGOLD.png"
onmouseover="this.src='/static/img/sidebar/devicesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/devicesGOLD.png'" />
</div>
</div>
<div id="armor">
<div class="btn">
<img src="/static/img/sidebar/armorGOLD.png"
onmouseover="this.src='/static/img/sidebar/armorBLUE.png'"
onmouseout="this.src='/static/img/sidebar/armorGOLD.png'" />
</div>
</div>
<div id="weapons">
<div class="btn">
<img src="/static/img/sidebar/weaponsGOLD.png"
onmouseover="this.src='/static/img/sidebar/weaponsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/weaponsGOLD.png'" />
</div>
</div>
<div id="vehicles">
<div class="btn">
<img src="/static/img/sidebar/vehiclesGOLD.png"
onmouseover="this.src='/static/img/sidebar/vehiclesBLUE.png'"
onmouseout="this.src='/static/img/sidebar/vehiclesGOLD.png'" />
</div>
</div>
<div id="constructs">
<div class="btn">
<img src="/static/img/sidebar/constructsGOLD.png"
onmouseover="this.src='/static/img/sidebar/constructsBLUE.png'"
onmouseout="this.src='/static/img/sidebar/constructsGOLD.png'" />
</div>
</div>
</div>
<div id="middle"></div>
<div id="content">
{% include includehtml %}
</div>
<div id="right"></div>
</div>
</body>
</html>