Balenciaga登陆页面

时间:2018-12-09 12:32:38

标签: html css css-grid

所以我对此并不陌生,我只是想尝试使用CSS网格。我想知道如何设置div高度,使其适合here这样的页面(女士,女士,男士)。

这就是我到目前为止所拥有的。

滚动时也有命令或其他内容,没有滚动条,页面仅滑动而页脚滑动了

.wrapper>div {
    background: #eee;
    padding: 5px;
    border: #000 1px solid;
    border-left: none;
    border-top: none;
}

.wrapper>div:nth-child(odd) {
    background: #ddd;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.content>div {
    border: #000 1px solid;
    border-left: none;
    border-top: none;
}

.men {
    background-color: aqua;
}

.women {}

.kids {}

body {
    padding: 0px;
    margin: 0px;
    text-align: center;
}
<body>

    <div class="wrapper">
        <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, vero.</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, culpa.</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, culpa.</div>
    </div>
    <div class="content">
        <div class="men">MEN</div>
        <div class="women">WOMEN</div>
        <div class="kids">KIDS</div>
    </div>

</body>

</html>

0 个答案:

没有答案