用grid仿php.cn首页代码

<!DOCTYPE html>
<html lang="zh-CN">
<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>用grid仿php.cn首页</title>
    <link rel="stylesheet" href="php.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <ul><div>php中文网</div></ul>
        <ul class="top-navs">
            <li>
                <div class="title">首页</div>
            </li>
            <li>
                <div class="title">视频教程</div>
            </li>
            <li>
                <div class="title">入门教程</div>
            </li>
            <li>
                <div class="title">社区问答</div>
            </li>
            <li>
                <div class="title">技术文章</div>
            </li>
            <li>
                <div class="title">资源下载</div>
            </li>
            <li>
                <div class="title">工具下载</div>
            </li>
            <li>
                <div class="title">PHP培训</div>
            </li>
        </ul>
        <ul>声音</ul>
    </header>
    <!-- 主体顶部区 -->
    <div class="main-top">
        <!-- 侧边菜单 -->
        <nav class="menus">            
            <li class="item">
                <h5>php开发</h5>
                <h5>></h5>
            </li>
            <li class="item">
                <h5>前端开发</h5>
                <h5>></h5>
            </li>
            <li class="item">
                <h5>服务端开发</h5>
                <h5>></h5>
            </li>
            <li class="item">
                <h5>移动开发</h5>
                <h5>></h5>
            </li>
            <li class="item">
                <h5>数据库</h5>
                <h5>></h5>
            </li>
            <li class="item">
                <h5>服务器运维&下载</h5>
                <h5>></h5>
            </li>
            <li class="item">
                <h5>在线工具箱</h5>
                <h5>></h5>
            </li>
            <li class="item">
                <h5>常用类库</h5>
                <h5>></h5>
            </li>
        </nav>
        <!-- 顶部菜单 -->
        <ul class="navs">
            <li>
                <div>
                    <a href="">PHP头条</a>
                    <h6>新</h6>
                </div>
            </li>
            <li>
                <div>
                    <a href="">独孤九贱</a>
                    <h6></h6>
                </div>
            </li>
            <li>
                <div>
                    <a href="">学习路线</a>
                    <h6>新</h6>
                </div>
            </li>
            <li>
                <div>
                    <a href="">在线工具</a>
                    <h6></h6>
                </div>
            </li>
            <li>
                <div>
                    <a href="">趣味课堂</a>
                    <h6>新</h6>
                </div>
            </li>
            <li>
                <div>
                    <a href="">社区问答</a>
                    <h6></h6>
                </div>
            </li>
            <li>
                <div>
                    <a href="">课程直播</a>
                    <h6></h6>
                </div>
            </li>
            <li><input type="text" placeholder="输入关键字搜索"></li>
        </ul>
        <!-- 轮播图 -->
        <div class="slider"><img src="https://img.php.cn/upload/article/000/000/001/6034a327aef30703.png" alt=""></div>
        <!-- 底部的课程推荐 -->
        <ul class="course">
            <li><a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a></li>
            <li><a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a></li>
            <li><a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a></li>
            <li><a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a></li>
        </ul>
    </div>
    <!-- 课程列表区 -->
    <div class="main-courses">
        <div class="title">
            <div><\></div><div>php入门精品课程</div><div><\></div>
        </div>
        <ul class="course-list">
            <li><a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5ab346fc62ce4221.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/126/153/5acc118f11d6b969.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/001/120/5a9fb97057b15707.jpeg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24019911a24370.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5cecd27a4348b582.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a13c87351613730.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/171/829/5b19ef2990649817.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d240300be85b731.jpg" alt=""></a></li>
        </ul>
    </div>
    <!-- 课程列表区 -->
    <div class="main-courses">
        <div class="title">
            <div><\></div><div>php进阶学习课程</div><div><\></div>
        </div>
        <ul class="course-list">
            <li><a href=""><img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24010108e3d268.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a372b552a2c4233.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a3728258bf9f213.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a373991d9cd9819.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a5322a085219472.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a53090b27254106.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24230536122573.jpg" alt=""></a></li>
            <li><a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2402695ce37351.jpg" alt=""></a></li>
        </ul>
    </div>
    <!-- 页脚 -->
    <footer>
        <div class="left">
            <ul class="bottom-navs">
                <li><a href="">网站首页</a></li>
                <li><a href="">PHP视频</a></li>
                <li><a href="">PHP代码</a></li>
                <li><a href="">PHP手册</a></li>
                <li><a href="">词条</a></li>
                <li><a href="">手记</a></li>
                <li><a href="">编程词典</a></li>
                <li><a href="">php培训</a></li>
            </ul>
            <div>
                php中文网：公益在线php培训，帮助PHP学习者快速成长！
            </div>
            <div>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 |
            </div>
        </div>
        <div>二维码</div>
    </footer>
</body>
</html>

php.css 代码


/* 初始化 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    color: #444;
    text-decoration: none;
}
/* -------------------- */
/* 页眉 */
header {
    display: grid;
    grid-auto-flow:column;
    grid-template-columns:100px 1fr 100px;
    place-items: center space-between;
    height: 60px;
    background-color: black;
    color: #999;
    margin-bottom: 30px;
}
header>ul:first-of-type, header>ul:last-of-type{
    text-align: center;
    line-height: 60px;
}
header>ul.top-navs {
    height: 60px;
    display: grid;
    grid-auto-flow:column;
    place-items: space-between center;
    gap: 1px;
}
header>ul.top-navs>li {
    height: 60px;
    display: grid;
    place-items: center center; 
    grid-template-rows:1fr 5px;
    cursor: pointer;
}
header>ul.top-navs>li:hover{
    border-bottom: 5px solid lightgreen;
}
header>ul.top-navs>li:first-of-type{
    background-color: #444;
}
/* 页脚 */
footer {
    display: grid;
    grid-auto-flow:column;
    grid-template-columns:1fr 100px;
    height: 160px;
    color: #666;
    background-color: #444;
    place-items: center start;
}
footer>div.left{
    width: 100%;
    height: 160px;
    display: grid;
    place-items: center start;
}
footer .left>ul.bottom-navs {
    display: grid;
    grid-auto-flow:column;
    gap: 10px;
    margin-left: 10px;
}
footer .left>ul.bottom-navs>li>a {
    color: white;
}
/* 主体顶部区 */
.main-top {
    height: 510px;
    width: 1200px;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 216px 1fr;
    grid-template-rows: 60px 1fr 120px;
    margin: auto;
}
/* 左侧导航区 */
.main-top>nav.menus {
    grid-area: span 3;
    background-color: #444;
    color: #ccc;
    border-radius: 10px 0 0  10px ;
    padding: 10px 0 10px 0;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center space-between;
}
.main-top>nav.menus>li.item {
    display: grid;
    grid-auto-flow:column;
    grid-template-columns: 1fr 20px;
    padding: 0 0px 0 20px;
    place-items: center start;
}
.main-top>nav.menus>li.item:hover {
    background-color: #666;
    cursor: pointer;
}
/* 顶部的导航区 */
.main-top>ul.navs {
    /* background-color: lightcyan; */
    display: grid;
    grid-template-columns: repeat(8,103px) 1fr;
    place-items: center;
    border-radius: 0 10px 0 0;
}
.main-top>ul.navs>li>div {
    display: grid;
    grid-auto-flow:column;
    place-items: center center;
}
.main-top>ul.navs>li>div>h6 {
    width: 20px;
    color: white;
    text-align: center;
}
.main-top>ul.navs>li:nth-of-type(1)>div>h6 {
    background-color: orangered;
}
.main-top>ul.navs>li:nth-of-type(3)>div>h6 {
    background-color: #444;
}
.main-top>ul.navs>li:nth-of-type(5)>div>h6 {
    background-color: orange;
}
.main-top>ul.navs>li:last-of-type {
    background-color: #eee;
    height: 30px;
    /* 搜索 */
    place-self: center start;
    padding: 0px 10px 0 10px;
}
.main-top>ul.navs>li:last-of-type>input {
    height: 30px;
    border: none;
    outline: none;
    background-color: #eee;
}
/* 轮播图已经自动归位了 */
.main-top .slider {
   /* background-color: #ccc; */
}
/* 底部的课程推荐 */
.main-top>ul.course>li>a>img{
    background-color: violet;
    cursor: pointer;
    border-radius: 10px;
}
.main-top>ul.course {
    /* background-color: wheat; */
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    padding: 10px;
    display: grid;
    border-radius: 0 0 10px 0;
}
/* -------------------- */
/* 主体课程 */
.main-courses {
    width: 1200px;
    height: 646px;
    padding: 15px;
    background-color: lightskyblue;
    margin: 30px auto;
    display: grid;
    grid-template-rows: 50px 1fr;
    gap: 20px;
    border-radius: 10px;
}
/* 标题 */
.main-courses .title {
    color: #444;
    display: grid;
    grid-auto-flow:column;
    grid-template-columns: 1fr 130px 1fr;
    place-items: center center;
    margin-bottom: 30px;
    font-weight: bolder;
}
.main-courses .title>div:first-of-type {
    color: blue;
    place-self: center end;
}
.main-courses .title>div:last-of-type {
    color: blue;
    place-self: center start;
}
.main-courses .course-list {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 20px;
}
.main-courses .course-list>li>a>img {
    width: 100%;
    border-radius: 10px;
}
.main-courses .course-list>li:first-of-type {
    grid-area: span 2;
}

效果图

grid实现媒体查询:美女相册代码


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid实现媒体查询:美女相册</title>
    <style>
        /* 样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a {
            text-decoration: none;
            color: #555;
        }
        body {
            background-color: lightseagreen;
            background-color: violet;
        }
        h1 {
            color: white;
            text-align: center;
            font-weight: normal;
            text-shadow: 2px 2px 2px #444;
            margin-top: 1em;
        }
        .container {
            min-width: 100vw;
            min-height: 100vh;
            padding: 3em;
            display: grid;
            /* 自动填充,可以实现媒体查询的效果 */
            grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
            grid-template-rows: repeat(auto-fit, minmax(13em, 70%));
            /* 垂直紧贴起始线(顶部), 水平则平均对齐 */
            place-content: start space-evenly;
            gap: 1.5em;
        }
        .container img {
            width: 100%;
        }
        .container>.item {
            background-color: #eee;
            padding: 1em;
            border-radius: 0.5em;
            display: grid;
            place-items: center;
        }
        .container>.item:hover {
            background-color: pink;
            cursor: pointer;
            transition: 1s;
        }
    </style>
</head>
<body>
    <h1>前女友相册</h1>
    <div class="container">
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友1</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友2</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友3</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友4</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友5</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友6</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友7</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友8</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友9</a>
        </div>
        <div class="item">
            <a href=""><img src="girl.jpg" alt="" /></a>
            <a href="">前女友10</a>
        </div>
    </div>
</body>
</html>