代码如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css" /><style> * {text-decoration: none; }.row:nth-of-type(2){ min-height: 60vh;}.header > a { margin-left: 5em;}.header > a:first-of-type{ margin-right: 8em;}.left{ display: grid; place-content: center; width: ;}.mainbox{ display: grid; grid-template-rows: 3em; grid-auto-rows: 3em; gap: 1em}.mainbox > .box{ /* place-self: center; */ background-color: yellow; border: 1px solid; mar}</style></head><body> <div class="container"> <!-- 头部 --> <div class="row"><div class="item col-12"> <div class="header"><a href="">首页</a><a href="">视频教程</a><a href="">入门教程</a><a href="">社区问答</a><a href="">技术文章</a><a href="">资源下载</a></div></div> </div><!-- 主体 --><div class="row"><div class="item col-3"> <div class="left"> <img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></div></div><div class="item col-9"> <div class="mainbox"> <div class="box">文字1</div> <div class="box">文字2</div> <div class="box">文字3</div> <div class="box">文字4</div> <div class="box">文字5</div> <div class="box">文字6</div> </div></div></div><!-- 底部 --> <div class="row"><div class="item col-12"> <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1</p></div></div> </div> </div></body></html>
效果如下：
