0

当我使用代码并打开检查元素时，我想更改部分的位置，它显示应用了网格模板区域，但页面的布局根本没有改变，我无法找出这些区域的原因的布局不改变。任何提示都会有很大帮助，因为我到处都是 serchong 并且我使用的相同代码行在任何地方都使用，但我似乎无法让它工作 提前谢谢你。

body{
background-color:red;
  background-image: url(../img/backg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
div#main-page{
  height: 50%;
  width: 90%;
  margin: 0px auto;
  padding: 20px;
  background: rgba(255, 255, 255, .2);
  box-shadow: 5px 10px;
}
article{
  display: block;
}
.tm-header{
  height: 100px;
}
.tm-container{
  margin: 0 auto;
}
header{
  align-items: center;
}
nav{
  padding-left: 50px;
  float: left;
}
.tm-logo{
  margin-top: 5px;
  margin-left: 10px;
  float: left;
  position: absolute;
}

#menu ul li{
  display: inline-block;
}
#menu ul li a{
  padding: 10px 20px;
  text-decoration: none;
  color: white;
  line-height: 10px;
}
#menu li a:hover{
  background-color: orange;
  color: black;
}
#menu li a.active{
  background-color: orange;
  color: black;
}

h1{
  color: orange;
  letter-spacing: -2px
}
h2{
  border-bottom: dotted 2px;
}
p{
  color: white;
}
a{
  text-decoration: none;
  color: orange;
}
#main{
  margin: 20px 20px 20px 0px;
  width: 70%;
  float: left
}
.info-profesorii{
  float: left;
  margin: 20px 20px 20px 0px;
  width: 70%;
}
aside {
    margin-top: 20px;
    width: 25%;
    float: right;
    font-size: 14px;
    padding: 15px;
    background-color: #FFCD50;
    color: #594F4F;
}
section, footer{
  clear: both; 
}
footer{
  clear: both;
  text-align: right;
  border-top: 2px dotted #3B3131;
}
table{
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 400px;
  height: 50px;
}
th{
  background-color: orange;
  color: white;
}
td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
.company-name{
  color: orange;
}
.delete-pic, .edit-pic {
  width: 30px;
  height: 30px;
}

button {
    background:#D77D00;
    color: #FFF;
    border: none;
    border-radius: 8px;
    margin: 10px 0px;
    font-size:14px;
    font-weight: bold;
}
button a {
  color: #FFF; 
  display: block; 
   padding: 15px 8px;
 }
 @media screen and (max-width: 480px ){
  body{
    overflow-x: hidden;
    background-color: black;
    background-image: auto;
  }
  #main-page{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0.1fr 0.1fr 0.1fr 0.1fr;
    grid-template-areas: 
    "tm-logo" 
    "aside" 
    "text1" 
    "info-profesorii"
     "footer";
  }

   nav {
    display: none;
  }

  #main{
    width: 100%;
  }
  .info-profesorii{
    width: 100%;
  }
   aside{
    width: 100%;
    grid-column-end: span 1;
   }


}
<!DOCTYPE html>
<html>
<head>
<title>Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/stil1.css">
</head>
<body>
  <div id="main-page">
  <header class="tm-header">
    <div class="tm-container">
    <img class="tm-logo" alt="logo" src="img\logo.png" width="70px" height="60px"/>
    <nav id="menu">
      <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a  href="clienti.html">Clienti</a></li>
        <li><a  href="facturi.html">Facturi</a></li>
        <li><a  href="rapoarte.html">Rapoarte</a></li>
        <li><a  href="cautare.html">Cautare</a></li>
          </ul>
        </nav>
        </div>
  </header>
  <section id="main">
    <article class="text1">
      <header>
        <h1>Gestiune clienti si facturi</h1>
      </header>
      <p>Incididunt consequat tempor ullamco ipsum nostrud ipsum nulla sunt esse dolore eu magna qui minim eiusmod proident ipsum.
         Aute ad occaecat cillum dolor nisi ut do tempor commodo incididunt deserunt laboris officia consectetur commodo sunt consequat.
          Ut est reprehenderit occaecat esse laboris est quis. Reprehenderit pariatur occaecat aute duis ut nisi esse amet est mollit.
           Voluptate dolore mollit ipsum cillum nulla elit Lorem ad dolor nulla. Adipisicing magna mollit quis Lorem enim aliqua exercitation aute enim.
           Commodo ut labore ipsum sunt nisi esse ad velit deserunt culpa veniam sunt elit ullamco.</p>
    </article>
  </section>
  <article>
      <header class="info-profesorii">
        <h1>Despre noi</h1>
        <p>Coordonator SGBD:
        <a href="mailto:mmuntean@uab.ro">Lect. Univ. Dr. Maria Muntean</a>
        <p>Coordonator WEB:
          <a href="mailto:ccucu@uab.ro">Lect. Univ. Dr. Ciprian Cucu</a>
        </p>
      </header>
    </article>
  <aside>
    <h2>Ultimii Clienti</h2>
    <ul>
      <li><a  href="">Dud PFA (loc. - Bucuresti)</a></li>
      <li><a  href="">Free SNC (loc. - Bucuresti)</a></li>
      <li><a  href="">Yummy SRL (loc. - Bucuresti)</a></li>
    </ul>
    <h2>Ultimele facturi</h2>
    <ul>
      <li><a href="#">99999 / 2018-02-03(1234.56 lei)</a></li>
      <li><a href="#">20110001 / 2017-02-21(231.30 lei)</a></li>
      <li><a href="#">20110002 / 2017-02-20(150.95 lei)</a></li>
    </ul>
  </aside>
  <footer>
    <p>Copyright 2021|
      <a href="http://www.uab.ro" target="_blank">UAB</a>
    </p>
  </footer>
</div>
</body>
</html>

4

0 回答 0