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

首页 > 博客列表 > 项目在网格单元和容器中对齐方式、防php.cn首页布局

博主信息

博文 64

粉丝 2

访问量 58955

专题推荐

更多>

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

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

/* 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;
            }

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

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

2020-12-10 11:12:03

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

二、 防php.cn首页

首页

样式

二、防php.cn首页