由于某些原因,我的网格模板区域不起作用.它只是显示每个区域的下方,而不是我如何设置它们.

我试着判断我是否有任何打字错误,但没有.我的浏览器确实支持网格功能. 我不知道问题是不是我设置为网格模板的行或列.

`<!DOCTYPE html>
<html>
    <head>
        <title>Uputstvo</title>
        <link rel="stylesheet" href="styleeee.css">
    </head>
    <body>
        <div class="LogoStranice">
            <img src="add.png" alt="none">
        </div>
        <div class="NaslovStranice">
            <h1>Dodavanje studenata na listu predmeta</h1>
            <h3>Uputstvo za dodavanje studenata</h3>
        </div>
        <div class="Info">
            <marquee>Dobrodošli na stranicu na kojoj možete dodati studente na listu predmeta. Ispravno
                popunjen obrazac, kojim se student dodaje na listu, možete pronaći 
                na stranici<a href="uputstvo.html"> Uputstvo</a> </marquee>
        </div>
        <div class="Navigacija">
            <ul>
                <li><a href="uputstvo.html">Uputstvo</a></li>
                <li><a href="dodaj.html">Dodaj studenta</a></li>
            </ul>
        </div>
        <div class="Sadrzaj">
            <p class="tekst">Da bi unos podataka, koji se odnose na studenta, bio validan, potrebno je da podaci imaju sledeću formu:<br/>
                Ime i Prezime<br/>
                    I ime i prezime moraju biti kraćei od 20 karaktera i ne smeju sadržati brojeve.<br/>
                        Ispravni formati unosa su:<br/>
                            Petar<br/>
                            Marko<br/>
                            Marinkovic  <br/>
                        Nevalidni formati unosa su:<br/>
                            01Goran<br/>
                            Goran01<br/>
                            Petrovic9<br/>      
                Broj indeksa<br/>
                    Validan format gggg/bbbb, gde gggg predstavlja godinu, dok bbbb predstavlja redni broj. Bitno je da na petoj poziciji postoji znak '/'.<br/>
                        Ispravni formati unosa su:<br/>
                            2014/000 <br/>
                            2015/0699<br/>
                            2001/0322<br/>
                        Nevalidni formati unosa su: <br/>       
                            20/0001   <br/>
                            20011/1000<br/>
                            2/899    <br/> 
            </p>
        </div>
        <div class="PotpisStranice">
            <p>Skolska 2022/23 Stranica poslednji put azurirana <span class="Modifikacija">18.08.2023</span> </p>
        </div>
    </body>
</html>`
`.body{
    width:1000px;
    height:700px;
    display:grid;
    grid-template-rows:200px 50px 400px 50px ;
    grid-template-columns: 200px 800px;
    grid-template-areas: 
    "LogoStranice   NaslovStranice"
    "Info      Info"
    "Navigacija  Sadrzaj"
    "PotpisStranice  PotpisStranice";
    margin: auto;

}
.LogoStranice{
    background-color: #78fd94;
    height: 200px;
    width:200px;
    grid-area: LogoStranice;
}
.NaslovStranice{
    height: 200px;
    width: 800px;
    background-color: #78fd94;
    text-align: center;
    padding-top: 40px;
    grid-area: NaslovStranice;
}
.Info{
    background-color: blue;
    color: white;
    height: 20px;
    width: 1000px;
    grid-area: Info;
}
.Navigacija{
    background-color: gray;
    font-size: 16px;
    font-weight: bold;
    height: 550px;
    width:200px;
    grid-area: Navigacija;
}
.Sadrzaj{
    background-color:#d3e9d8 ;
    height: 550px;
    width: 800px;
    grid-area: Sadrzaj;

}
.tekst{
    padding: 30px 30px 30px 30px;
}
.PotpisStranice{
    grid-area: PotpisStranice;
    height: 40px;
    width: 1000px;
    color: white;
    background-color: #2034fc;
}
.Modifikacija{
    color:yellow;
}
img{
    height: 200px;
    width: 200px;
}`

推荐答案

问题出在样式表中.您使用的是带点(.)的.body {},但这是一个102 Select 器.因为<body>103,所以正确的语法只是它的名字,不带点:

body {
    width: 1000px;
    height: 700px;
    display: grid;
    grid-template-rows: 200px 50px 400px 50px;
    grid-template-columns: 200px 800px;
    grid-template-areas:
        "LogoStranice NaslovStranice"
        "Info Info"
        "Navigacija Sadrzaj"
        "PotpisStranice PotpisStranice";
    margin: auto;

}

但是,不建议仅出于样式目的而使用<body>.您设置为<body>元素的属性将在整个网站中复制.如果您最终决定创建一个具有不同布局的新页面,事情将变得混乱.

相反,创建特定于您当前正在处理的页面布局的包装器会更好,并且可以省go 一些麻烦.

另一个(真正的)好习惯是写semantic HTML.以您的代码为例:让我们将其分为三个部分:

  • <header>
  • <main>
  • <footer>

现在,我们可以分别设置每个代码的样式,使代码更易访问、更灵活、更有意义.

我创建codepen是为了说明布局的一种更好的方法;希望您不介意:)代码上有注释,解释了这些建议.

一些参考资料:

CSS Selector Reference

Styling Layout Wrappers In CSS(优秀项目)

Semantic HTML5 Elements Explained

Html相关问答推荐

Rmarkdown上的垂直标签集

为什么在这种情况下是弹性基础:自动不解决内容的大小?

CSS/添加margin—top到嵌入式facebook帖子

创建具有圆锥渐变的水平CSS聚光灯

SVG动画只有在打开S开发工具的浏览器时才开始播放

使具有FLEX父项的溢出自动的子元素收缩

带有图标和悬停过渡的CSS按钮

根据Tailwind CSS中的子计数而非子宽度进行对齐,并水平对齐

HTML 邮箱在 Gmail 中无法正确显示

如何在黑暗模式切换中添加图标

:after 伪元素没有出现,即使它有 content 属性

如何使用jQuery将我制作的通用头部和底部加载到多个HTML文件中?

我正在使用 NVDA 并多次读取关闭按钮,但它的读取非常完美

具有 css 高度的输入元素:100% 溢出父 div

CSS:第一个类型的伪类没有按预期工作

导航丸被选中(活动),但内容未显示.怎么会?

如何在 blazor 中单击单个按钮调用 2 个等待任务

列宽等于最宽列宽度的无界容器

两个按钮范围滑块的 CSS

无法使用 Reactjs 多次更新本地存储