项目在网格单元和容器中对齐方式、防php.cn首页布局 - 每日作业

Home > List of blog posts > 项目在网格单元和容器中对齐方式、防php.cn首页布局

Blogger Information

Blog 64

fans 2

comment 1

visits 46858

Special Recommendation

More>

Related recommendations

一、项目在网格单元和容器中对齐的相关属性实例演示

项目在网格单元中的对齐方式

/* 1. 设置容器中的“所有项目”在网格单元中的对齐方式  */
     .container {
         /* place-items: 垂直方向 水平方向; */
         /* 垂直居上，水平居中 */
         place-items: start center;
         /* 垂直居中对齐 */
         place-items: center center;
         /* 简写，两个值一样的时候可以简写 */
         place-items: center;
         /* 垂直居下，水平居右 */
         place-items: end end;
         /* 垂直居上，水平居右 */
         place-items: start end;
         /* normal */
         place-items: normal center;
         /* normal当成auto的同义词 */
         place-items: auto center;
         /* 继承*/
         /* place-items: inherit; */
         /* 初始化 */
         /* place-items: initial; */
         /* 清楚 */
         /* place-items: unset; */
        /* 拉伸,取消项目的固定尺寸才可以看到效果 */
        /* place-items: stretch; */
     }
      /* 2.设置容器中的单个项目对齐方式用：place-self */
     .container>.item:nth-of-type(5) {
         background-color: lightsalmon;          
         /* 垂直向上，水平居左 */
         place-self: start ;
         /* 垂直水平居中 */
         place-self: center;
         /* 垂直向下，水平居右 */
         place-self: end;           
     }
     /* 单元格有两种表现形式：单元格、网格区域 */
     .container>.item:nth-of-type(5) {
         grid-area: span 2 / span 2;;
         place-self: center;
     }

项目在网格容器中的对齐方式

     /*  place-content: 垂直方向 水平方向   */
     .container {
         /* 两端对齐 */
         place-content: space-between;
         /* 分散对齐 */
         place-content: space-around;
         /* 平均对齐 */
         place-content: space-evenly;
     }

二、防php.cn首页

首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>防php中文网</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="../122501/css/font_edw7fy4dl8/iconfont.css">
</head>   
<body>
    <header>
        <div class="logo">
            <a href="php.cn"><img src="../122501/img/logo.png" alt=""></a>
        </div>
        <div class="header-top">
            <a href="">首页</a>
            <a href="">视频教程</a>
            <a href="">入门教程</a>
            <a href="">社区问答</a>
            <a href="">技术文章</a>
            <a href="">资源下载</a>
            <a href="">编程词典</a>
            <a href="">工具下载</a>
            <a href="">PHP培训</a>
        </div>
        <span class="iconfont icon-laba"></span>
        <div class="butt">
            <a href="php.cn"><img src="../122501/img/fdeb3f55f550059558a173a32693af17.jpg" alt=""></a>
        </div>
    </header>
    <!-- 主体 -->
    <div class="main">
        <div class="main-top">
            <!-- 左侧菜单 -->
            <div class="menus">
                <div>
                    <a href="">PHP开发</a>
                    <a>&gt</a>
                </div>
                <div>
                    <a href="">前端开发</a>
                    <a>&gt</a>
                </div>
                <div>
                    <a href="">服务器开发</a>
                    <a>&gt</a>
                </div>
                <div>
                    <a href="">移动开发</a>
                    <a>&gt</a>
                </div>
                <div>
                    <a href="">数据库 </a>
                    <a>&gt</a>
                </div>
                <div>
                    <a href="">服务器运维</a>
                    <a>&gt</a>
                </div>
                <div>
                    <a href="">在线工具箱</a>
                    <a>&gt</a>
                </div>
                <div>
                    <a href="">常用类库</a>
                    <a>&gt</a>
                </div>
            </div>
            <!-- 头部菜单 -->
            <div class="navs">
                <li><a href="">PHP头条</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>
                <li><a href="">课程直播</a></li>
                <li><input type="text" placeholder="输入关键词搜索"></li>
            </div>
            <!-- 轮播图 -->
            <div class="slider">
                <img src="../122501/img/5fb478a8e82cb116.jpg" alt="">
            </div>
            <!-- 底部菜单推荐 -->
            <ul class="course">
                <li>
                    <a href=""><img src="../122501/img/index_yunv.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/index_php_item2_.png" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/index_php_item3.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/index_php_new4.jpg" alt=""></a>
                </li>
            </ul>
        </div>
        <!-- 课程列表区 -->
        <div class="main-courses">
            <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
            <ul class="course-list">
                <li>
                    <a href=""><img src="../122501/img/index_learn_middel.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a1e28a9aa79e911.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a1e2953da3c4679.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a1e2953da3c4679.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a9fb97057b15707.jpeg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a40a5ac656b3153.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a161e2d393cb585.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a162a835bd25655.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a162ad093ab8241.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a372b552a2c4233.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a372e0cb6736575.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a699f1b2da2b398.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a3728258bf9f213.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a6848743a2b9344.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
            </ul>
        </div>
        <!-- 进阶学习路径 -->
        <div class="main-courses">
            <h3>&lt;\&gt;php进阶学习路径&lt;\&gt;</h3>
            <ul class="course-list">
                <li>
                    <a href=""><img src="../122501/img/index_learn_middel.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a1e28a9aa79e911.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a1e2953da3c4679.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a1e2953da3c4679.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a9fb97057b15707.jpeg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a40a5ac656b3153.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a161e2d393cb585.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a162a835bd25655.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a162ad093ab8241.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a372b552a2c4233.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a372e0cb6736575.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a699f1b2da2b398.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a3728258bf9f213.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
                <li>
                    <a href=""><img src="../122501/img/5a6848743a2b9344.jpg" alt=""></a>
                    <a href="">编程学习方法分享直播公益课</a>
                </li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="footer-muen">
            <ul>
                <li>网站首页</li>
                <li>PHP视频</li>
                <li>PHP实战</li>
                <li>PHP代码</li>
                <li>PHP手册</li>
                <li>词条手记</li>
                <li>编程词典</li>
                <li>php培训</li>
            </ul>
            <a>
                php中文网：公益在线php培训，帮助PHP学习者快速成长！
            </a>
            <a>
                Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1 关于我们免责申明赞助与捐赠广告合作
            </a>
        </div>
        <div class="footer-img">
            <img src="../122501/img/phpcn_erwei.jpg" alt="">
            <img src="../122501/img/qq.jpg" alt="">
        </div>
    </footer>
</body>
</html>

样式

            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
                list-style: none;
                text-decoration: none;
            }
            body {
                background-color: rgb(248, 244, 244);
            }
            header {
                height: 60px;
                background-color: #000;
                display: grid;
                grid-template-columns: 140px 1fr 60px 68px;
                padding: 0.5rem;
                place-content: space-around;
                margin-bottom: 1rem;
            }
            header>.log {
                display: grid;
                place-items: center;
            }
            header>.logo>a>img {
                width: 100%;
            }
            .header-top {
                display: grid;
                grid-template-columns: repeat(9, 96px);
                grid-template-rows: 60px;
                place-content: space-around;
                place-items: center;
                font-size: 1em;
            }
            a {
                color: #dad5d5;
            }
            header .iconfont {
                display: grid;
                color: white;
                font-size: 25px;
                place-self: center;
                opacity: 0.8;
            }
            .butt {
                display: grid;
                place-items: center;
            }
            .butt img {
                width: 45px;
                height: 45px;
                border-radius: 50%;
            }
            header .header-top a:hover {
                color: #fafafa;
                transition: 0.5s;
                border-bottom: 3px solid lightgreen;
            }
            header .header-top a:hover {
                cursor: pointer;
                opacity: 0.8;
            }
            /* 主体区 */
            .main .main-top {
                height: 530px;
                width: 1220px;
                margin-bottom: 30px;
                display: grid;
                grid-template-columns: 216px 1fr;
                grid-template-rows: 60px 1fr 120px;
                margin: auto;
                background-color: #fff;
            }
            /* 左侧导航区 */
            .main .main-top .menus {
                background-color: #2B333B;
                display: grid;
                grid-area: span 3;
                border-radius: 10px 0 0 10px;
                place-items: center start;
                padding: 2rem;
            }
            /* 顶部的导航区 */
            .main .main-top .navs {
                display: grid;
                grid-template-columns: repeat(8, 1fr);
                place-items: center;
                border-radius: 0 10px 0 0;
                color: black;
                font-size: 15px;
                background-color: #fff;
            }
            .main .main-top .navs a {
                color: rgb(70, 66, 66);
            }
            .main .main-top .navs a:hover {
                transition: 0.5s;
                border-bottom: 3px solid lightgreen;
                cursor: pointer;
                opacity: 0.8;
            }
            .main .main-top .navs li>input {
                width: 250px;
                height: 40px;
                /* border-radius: 2px; */
            }
            /* 推荐区 */
            .main .main-top .course {
                padding: 0.5rem;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
            }
            .main .main-top .course a img {
                border-radius: 10px;
            }
            /* 课程列表区 */
            .main .main-courses {
                width: 1200px;
                height: 646px;
                padding: 15px;
                margin: 30px auto;
                display: grid;
                grid-template-rows: 50px 1fr;
                gap: 10px;
                border-radius: 10px;
            }
            .main .main-courses h3 {
                text-align: center;
                margin-bottom: 30px;
                color: #444444;
            }
            .main .main-courses .course-list {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(3, 1fr);
                gap: 10px;
            }
            .main .main-courses .course-list img {
                border-radius: 10px;
                width: 217px;
            }
            .main .main-courses .course-list * {
                color: rgb(75, 70, 70);
            }
            .main .main-courses .course-list li:first-of-type {
                grid-area: span 2;
            }
            footer {
                height: 174px;
                background-color: #393D49;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: repeat(3, 1fr);
                place-content: space-around;
                padding: 30px;
            }
            footer .footer-muen {
                color: rgb(221, 221, 221);
                font-size: 12px;
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                grid-template-rows: repeat(3, 1fr);
                place-items: start;
                padding-left: 30px;
            }
            footer .footer-muen ul {
                display: grid;
                grid-template-columns: repeat(8, 1fr);
            }
            footer .footer-img {
                display: grid;
                grid-template-columns: repeat(2, 200px);
                place-items: center;
            }
            footer .footer-img img {
                width: 100px;
                place-self: center;
            }

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

1208软件的安装和标签的使用

2020-12-10 11:12:03

一、项目在网格单元和容器中对齐的相关属性实例演示

二、 防php.cn首页

首页

样式

二、防php.cn首页