实例演示课堂中学到的Grid的属性

程序实现

.banner { grid–row:1/1; grid–column:1/4; background–image: url(head_banner.jpg); color: aliceblue; top:0;/* fixed不能固定上面设置的background-image *//* position: fixed; */ position: sticky; z–index:1;} header { display: grid; border:1px solid red; height:5em; margin:0auto; grid–template–columns:10vw80vw10v源码网点我wcqh.cnw; grid–template–rows:1.5em3.5em; background–color: teal;} header .banner { grid–row:1/1; grid–column:1/4; background–image: url(head_banner.jpg); color: aliceblue; top:1em;/* 这里的粘性设置，只能在父元素内，父元素滚动到后台后，也不会粘住,后面的sticky滚动时会覆盖前面的*/ position: sticky;} header nav { grid–row:2/2; grid–column:2/3; text–align: center;/* line-he源码网点我wcqh.cnight和父元素等高，可用于文字定位于垂直中间位置 */ line–height:3.5em;/* place-content 似乎对grid排版无效 *//* place-content: center; place-content: space-evenly; */} nav a {/* min-width: 15em; *//* 去掉a标签下划线 */ text–decoration: none; color: aliceblue; min–width:10em;}.right { grid–area:2/3/ span 1/ span 1;/* text-align: right; */ text–align:cen源码网点我wcqh.cnter; line–height:3.5em;/* padding用于限制内部元素排版 *//* padding: 0 20px; *//* 此处改变了font-size大小，所以文字高度和line-height不一样，所以不居中了 */ font–size: larger; font–weight: bolder;}.right a { color: aliceblue; text–decoration: none;}.logo { grid–area:2/1/ span 1/ span 1;/* text-align: center 对图片设置无效 */ text–align: center;/* padding不加单位似乎源码网点我wcqh.cn对图片无效 */ padding:1px1px;}#tops_logo {/* width: 5vw; */ height:3.5em;}.container { width:auto; height:100vh; border:1px solid blue; display: grid; grid–template–columns:10vw80vw10vw;}

实现效果

批改老师：

PHPz 批改状态：合格老师批语：

作者最新博文

开学第一课

2023-03-10 16:14:27

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END