HTML网格布局（Grid）实战-实现一个简单的类商城首页

最新推荐文章于 2022-11-14 19:30:15 发布

News777

最新推荐文章于 2022-11-14 19:30:15 发布

阅读量717

点赞数

分类专栏： HTML CSS 文章标签： html css

本文链接：https://blog.csdn.net/News777/article/details/119685767

版权

HTML 同时被 2 个专栏收录

9 篇文章 5 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

成品展示

请添加图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="网格布局.css">
</head>

<body>

    <div class="grid_container">
        <div class="grid_nav clearfix">
            <ul class="nav_ul">
                <div class="logo">
                    <a href="#"><img src="./QQ.png" alt="" width="50" height="50">
                        <h1>LOGO</h1>
                    </a>
                </div>
                <li><a href="">首页</a> </li>
                <li><a href="">首页</a> </li>
                <li><a href="">首页</a> </li>
                <li><a href="">首页</a> </li>
                <li><a href="">首页</a> </li>
                <li><a href="">首页</a> </li>
            </ul>
        </div>
        <div class="leftside"></div>
        <div class="floatimg">
            <img src="./backgrond.jpg" alt="" height="500px" width="1000">
        </div>
        <div class="rightside"></div>
        <div class="content clearfix">
            <div class="shop">
                <img src="./backgrond.jpg" alt="" ">
                <div class="ver ">
                    <div class="text ">backgrond</div>
                </div>
            </div>
            <div class="shop ">
                <img src="./backgrond.jpg " alt=" " ">
                <div class="ver ">
                    <div class="text ">backgrond</div>
                </div>
            </div>
            <div class="shop ">
                <img src="./backgrond.jpg " alt=" " ">
                <div class="ver ">
                    <div class="text ">backgrond</div>
                </div>
            </div>
            <div class="shop ">
                <img src="./backgrond.jpg " alt=" " ">
                <div class="ver ">
                    <div class="text ">backgrond</div>
                </div>
            </div>
            <div class="shop ">
                <img src="./backgrond.jpg " alt=" " ">
                <div class="ver ">
                    <div class="text ">backgrond</div>
                </div>
            </div>
            <div class="shop ">
                <img src="./backgrond.jpg " alt=" " ">
                <div class="ver ">
                    <div class="text ">backgrond</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.grid_container {
    display: grid;
    height: 100%;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 61px 500px auto;
}

.grid_nav {
    grid-column: 1 / 4;
    background-color: aqua;
    height: auto;
    height: 61px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.clearfix ::after {
    content: "";
    clear: both;
    display: table;
}

.logo {
    float: left;
}

.logo a {
    color: white;
    text-decoration: none;
    top: 5px;
}

.logo a img {
    padding-top: 5px;
}

.logo a h1 {
    display: inline-block;
    vertical-align: top;
    line-height: 60px;
}

.grid_nav .nav_ul {
    list-style-type: none;
    background-color: black;
    overflow: hidden;
}

.nav_ul li {
    float: left;
}

.nav_ul li a {
    display: inline-block;
    text-decoration: none;
    padding: 20px 18px;
    color: white;
}

.nav_ul li a:hover {
    background-color: #ccc;
    color: black;
}

.leftside {
    grid-row: 2 / 4;
}

.floatimg {
    grid-column: 2 /3;
    grid-row: 2/3;
    width: auto;
    text-align: center;
}

.floatimg img {
    background-size: contain;
    width: 100%;
}

.rightside {
    grid-row: 2/4;
}

.content {
    /* grid-column: 2 /3;
    grid-row: 3 / 4; */
    box-sizing: border-box;
    background-color: #ccc;
    min-width: 1503px;
}

.content img {
    display: block;
    width: 461px;
}

.shop {
    margin: 20px;
    float: left;
    position: relative;
}

.shop .ver {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 100%;
    bottom: 0px;
    height: 0;
    overflow: hidden;
    background-color: rgb(204, 223, 240);
    transition: 0.5s ease-in-out;
}

.ver .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    color: #fff;
}

.shop:hover .ver {
    top: 0px;
    height: 100%;
}