首页 / 技术问答 / Html问答列表 / 问答详情

Html 难以构建网页

我正在努力学习css、html、媒体查询、flexbox和网格.

以下是网页片段:

body {
    background-color: whitesmoke;
    max-width: 992px;
    margin: auto;
}
h1,h2,h3,h4,h5,h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}
p {
    margin-top: 0px;
    margin-bottom: 0px;
}
div#container1 {
    background-color: red;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr 1fr;
    grid-template-areas: 
    "navBar"
    "main"
    "basDePage";
    height: 100vh;
}

div.headContainer {
    background-color: bisque;
    display: flex;
}
div.logo {
    background-color: cadetblue;
}
div.hybrid {
    background-color: darkcyan;
    flex-grow: 2;
}
div.hebergement {
    background-color: darkblue;
}
main#container2 {
    background-color: purple;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "section"
    "articles";
    grid-area: main;
}
section#filtersContainer {
    background-color: lightgreen;
    grid-area: section;
}
div.rechercheBar {
    background-color: silver;
    display: flex;
}
div.rechercheBarMobile {
    display: none;
}
div.filters {
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
}
div.filterRelou {
    display: flex;
    flex-wrap: wrap;
}
div.filter {
    background-color: azure;
    display: flex;
}
div.headInformation {
    background-color: slateblue;
    display: flex;
}
article#container3 {
    background-color: lightgreen;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "article1 article2"
    "article3 article3";
    grid-area: articles;
}
section.article1 {
    background-color: peru;
    grid-area: article1;
    border-radius: 15px;
    margin: 15px;
}

aside.article2 {
    background-color: indianred;
    grid-area: article2;
    border-radius: 15px;
    margin: 15px;
}

section.article3 {
    background-color: darkslateblue;
    grid-area: article3;
}

footer.basDePage {
    background-color: gray;
    grid-area: basDePage;

}
/*Format tablette*/
@media screen and (max-width: 992px) and (min-width: 769px) {
    header.navBar {
        background-color: lightpink;
    }
}
<!DOCTYPE html>
<html>
    <head>
        <!--<link rel="stylesheet" href="./css/style.css"/>-->
        <!--<link rel="icon" href="Google__Logo.ico"/>-->
    </head>
    <body>
       <div id="container1">
            <header class="navBar">
                <div class="headContainer"> 
                    <div class="logo">Logo</div>
                    <div class="hybrid"></div>
                    <div class="hebergement">
                        <nav>
                            <a href="#">Hebergment</a>
                            <a href="#">Activités</a>
                        </nav>
                    </div>
                </div>
            </header>
            <main id="container2">
                <section id="filtersContainer">
                    <h1>trouver votre hébergement</h1><p>En plain centre</p> 
                    <div class="rechercheBar">
                        <i>icon</i>
                        <p>Marseille,France</p>
                        <p>bouton recherche</p>
                    </div>
                    <div class="rechercheBarMobile">
                        <i>icon</i>
                        <p>Marseille,France</p>
                        <i>icon loupe</i>
                    </div>
                    <div class="filters">
                        <p>Filtres:</p>
                        <div class="filterRelou"> 
                            <div class="filter">
                                <i>icon</i>
                                <p>Economique</p>
                            </div>
                            <div class="filter">
                                <i>icon</i>
                                <p>Famille</p>
                            </div>
                        </div> 
                        <div class="filter">
                            <i>icon</i>
                            <p>Romantique</p>
                        </div>
                        <div class="filter">
                            <i>icon</i>
                            <p>Animaux</p>
                        </div>
                    </div>
                    <div class="headInformation">
                        <i>icon</i>
                        <p>plus de 500...</p>
                    </div>
                </section>
                <article id="container3">
                    <section class="article1">Hébergement</section>
                    <aside class="article2">Les plus populaires</aside>
                    <section class="article3">Activités à Marseille</section>
                </article>
            </main>
            <footer class="basDePage"> pied de page </footer>
       </div>
    </body>
</html>

推荐答案

您已将网格设置为这样:

enter image description here

div#container1 {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4fr 1fr;
  grid-template-areas: "navBar" "main" "basDePage";
  height: 100vh;
}

通过将行数指定为等于1fr 4fr 1fr，可以请求:

  • 页眉为页面高度的1分之一.
  • main是页面高度的4个分数.
  • 页脚为页面高度的1分之一.

如果你想让你的头达到一个特定的高度，那么就把它设置为你想要的高度，例如20px

body {
  background-color: whitesmoke;
  max-width: 992px;
  margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

div#container1 {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 18px 4fr 20px;
  grid-template-areas: "navBar" "main" "basDePage";
  height: 100vh;
}

div.headContainer {
  background-color: bisque;
  display: flex;
}

div.logo {
  background-color: cadetblue;
}

div.hybrid {
  background-color: darkcyan;
  flex-grow: 2;
}

div.hebergement {
  background-color: darkblue;
}

main#container2 {
  background-color: purple;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "section" "articles";
  grid-area: main;
}

section#filtersContainer {
  background-color: lightgreen;
  grid-area: section;
}

div.rechercheBar {
  background-color: silver;
  display: flex;
}

div.rechercheBarMobile {
  display: none;
}

div.filters {
  background-color: skyblue;
  display: flex;
  flex-wrap: wrap;
}

div.filterRelou {
  display: flex;
  flex-wrap: wrap;
}

div.filter {
  background-color: azure;
  display: flex;
}

div.headInformation {
  background-color: slateblue;
  display: flex;
}

article#container3 {
  background-color: lightgreen;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "article1 article2" "article3 article3";
  grid-area: articles;
}

section.article1 {
  background-color: peru;
  grid-area: article1;
  border-radius: 15px;
  margin: 15px;
}

aside.article2 {
  background-color: indianred;
  grid-area: article2;
  border-radius: 15px;
  margin: 15px;
}

section.article3 {
  background-color: darkslateblue;
  grid-area: article3;
}

footer.basDePage {
  background-color: gray;
  grid-area: basDePage;
}


/*Format tablette*/

@media screen and (max-width: 992px) and (min-width: 769px) {
  header.navBar {
    background-color: lightpink;
  }
}
<div id="container1">
  <header class="navBar">
    <div class="headContainer">
      <div class="logo">Logo</div>
      <div class="hybrid"></div>
      <div class="hebergement">
        <nav>
          <a href="#">Hebergment</a>
          <a href="#">Activités</a>
        </nav>
      </div>
    </div>
  </header>
  <main id="container2">
    <section id="filtersContainer">
      <h1>trouver votre hébergement</h1>
      <p>En plain centre</p>
      <div class="rechercheBar">
        <i>icon</i>
        <p>Marseille,France</p>
        <p>bouton recherche</p>
      </div>
      <div class="rechercheBarMobile">
        <i>icon</i>
        <p>Marseille,France</p>
        <i>icon loupe</i>
      </div>
      <div class="filters">
        <p>Filtres:</p>
        <div class="filterRelou">
          <div class="filter">
            <i>icon</i>
            <p>Economique</p>
          </div>
          <div class="filter">
            <i>icon</i>
            <p>Famille</p>
          </div>
        </div>
        <div class="filter">
          <i>icon</i>
          <p>Romantique</p>
        </div>
        <div class="filter">
          <i>icon</i>
          <p>Animaux</p>
        </div>
      </div>
      <div class="headInformation">
        <i>icon</i>
        <p>plus de 500...</p>
      </div>
    </section>
    <article id="container3">
      <section class="article1">Hébergement</section>
      <aside class="article2">Les plus populaires</aside>
      <section class="article3">Activités à Marseille</section>
    </article>
  </main>
  <footer class="basDePage"> pied de page </footer>
</div>

Html相关问答推荐

打印pdf时100 vh迪夫有半页高

如何在css中将包含多行文本的多个p-tag放在一起(并排)？

防止SVG边框半径zoom

如何阻止Chromecast图标出现在HTML5视频

使用css第n个子元素，如何迭代Y组中的X个元素？

如何在图像中垂直和水平居中显示文本？

如何使用Reaction Js读取html文件中的代码

单独处理Button：Focus的多行按钮

在每个列宽由带有固定值的minmax()函数定义的网格中，CSS如何为列分配空间？

如何生成随机字符串的字母数字字符集长度到html跨度？

使用bash从html表格中提取表格

浮动Div在CSS中未按预期工作

如何解决水平塌陷问题？

`table>；的消失；tbody：nth子级(1)`HTML

高度大于页面高度和页面大于覆盖的 CSS 覆盖

单击时 HTML 锚元素不重定向到相对路径

如何并排放置
和
的定义列表，但如果
变长，
会向下移动？

如何使我的下拉菜单响应？

为四开本网站主页添加背景图片

具有淡入/淡出效果的 CSS 选框

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630