一、项目在网格单元和容器中对齐的相关属性实例演示
项目在网格单元中的对齐方式
/* 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>></a></div><div><a href="">前端开发</a><a>></a></div><div><a href="">服务器开发</a><a>></a></div><div><a href="">移动开发</a><a>></a></div><div><a href="">数据库 </a><a>></a></div><div><a href="">服务器运维</a><a>></a></div><div><a href="">在线工具箱</a><a>></a></div><div><a href="">常用类库</a><a>></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><\>php入门精品课程<\></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><\>php进阶学习路径<\></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;}
