效果图如下

HTML端代码如下

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="index.css" />
  8.     <title>grid布局</title>
  9.   </head>
  10.   <body>
  11.     <!-- 导航 -->
  12.     <header>
  13.       <div class="logo">php中文网</div>
  14.       <a href="">首页1</a>
  15.       <a href="">首页2</a>
  16.       <a href="">首页3</a>
  17.       <a href="">首页4</a>
  18.       <a href="">首页5</a>
  19.       <a href="">首页6</a>
  20.       <a href="">首页7</a>
  21.       <a href="">首页8</a>
  22.     </header>
  23.     <main>
  24.       <div class="main-top">
  25.         <ul class="navlift">
  26.           <li>php开发1</li>
  27.           <li>php开发2</li>
  28.           <li>php开发3</li>
  29.           <li>php开发4</li>
  30.           <li>php开发5</li>
  31.           <li>php开发6</li>
  32.           <li>php开发7</li>
  33.           <li>php开发8</li>
  34.         </ul>
  35.         <ul class="navs">
  36.           <li>caid1</li>
  37.           <li>caid2</li>
  38.           <li>caid3</li>
  39.           <li>caid4</li>
  40.           <li>caid5</li>
  41.           <li>caid6</li>
  42.           <li>caid7</li>
  43.           <li><input type="search" placeholder="输入关键字" /></li>
  44.         </ul>
  45.         <div class="main_banner">
  46.           <img
  47.             src="https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg"
  48.             alt=""
  49.           />
  50.         </div>
  51.         <ul class="courses">
  52.           <li>
  53.             <img src="https://www.php.cn/static/images/index_yunv.jpg" alt="" />
  54.           </li>
  55.           <li>
  56.             <img
  57.               src="https://www.php.cn/static/images/index_php_item2_.png?1"
  58.               alt=""
  59.             />
  60.           </li>
  61.           <li>
  62.             <img
  63.               src="https://www.php.cn/static/images/index_php_item3.jpg?1"
  64.               alt=""
  65.             />
  66.           </li>
  67.           <li>
  68.             <img
  69.               src="https://www.php.cn/static/images/index_php_new4.jpg?1"
  70.               alt=""
  71.             />
  72.           </li>
  73.         </ul>
  74.       </div>
  76.   <!-- 课程列表 -->
  77.   <div class="rmjpk">
  78.     <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
  79.     <ul class="class_list">
  80.         <li>
  81.             <img src="https://www.php.cn/static/images/index_learn_first.jpg"></img>
  82.         </li>
  83.         <li>
  84.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  85.         </li>
  86.         <li>
  87.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  88.         </li>
  89.         <li>
  90.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  91.         </li>
  92.         <li>
  93.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  94.         </li>
  95.         <li>
  96.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  97.         </li>
  98.         <li>
  99.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  100.         </li>
  101.         <li>
  102.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  103.         </li>
  104.         <li>
  105.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  106.         </li>
  107.         <li>
  108.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  109.         </li>
  110.         <li>
  111.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  112.         </li>
  113.         <li>
  114.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  115.         </li>
  116.         <li>
  117.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  118.         </li>
  119.         <li>
  120.             <img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png"></img>
  121.         </li>
  122.     </ul>
  123. </div> 
  125.     </main>
  126.    <footer></footer>
  127.   </body>
  128. </html>

CSS端代码如下

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   background-color: #dfdedf;
  8. }
  9. a {
  10.   text-decoration: none;
  11.   color: #b3b3b3;
  12. }
  13. li {
  14.   list-style: none;
  15. }
  16. header {
  17.   height: 4em;
  18.   background-color: black;
  19.   margin-bottom: 30px;
  20.   display: grid;
  21.   grid-template-columns: repeat(11, 1fr);
  22.   place-items: center;
  23. }
  25. header .logo:first-of-type {
  26.   background: linear-gradient(to top, #de3326, #eb605a);
  27.   padding: 0.5em;
  28.   border-radius: 48%;
  29.   color: white;
  30. }
  32. header a {
  33.   padding: 0.5em;
  34.   border-radius: 48%;
  35.   color: white;
  36. }
  37. .main-top {
  38.   margin: 2em auto;
  39.   width: 1200px;
  40.   display: grid;
  41.   grid-template-columns: 220px 980px;
  42.   grid-template-rows: 60px 328px 120px;
  43. }
  45. .navlift {
  46.   grid-area: 1 / 1 / span 3 / span 1;
  47.   display: grid;
  48.   grid-template-rows: repeat(8, 1fr);
  49.   place-items: center start;
  50.   padding-left: 2em;
  51.   background-color: #2b333b;
  52.   color: #aaadb0;
  53.   border-radius: 0.5em 0 0 0.5em;
  54. }
  55. .navs {
  56.   background-color: #ffffff;
  57.   display: grid;
  58.   grid-template-columns: repeat(9, 1fr);
  59.   place-items: center;
  60.   border-radius: 0 0.5em 0 0;
  61. }
  62. .navs li input {
  63.   grid-area: span 2;
  64. }
  66. .main_banner img {
  67.   width: 980px;
  68.   height: 328px;
  69. }
  70. .courses {
  71.   grid-area: 3/2;
  72.   display: grid;
  73.   grid-template-columns: repeat(4, 1fr);
  74.   place-items: center;
  75.   background-color: #ffffff;
  76.   border-radius: 0.5em;
  77. }
  78. .courses img {
  79.   border-radius: 0.5em;
  80. }
  82. .rmjpk {
  83.   background-color: #fff;
  84.   width: 1200px;
  85.   padding: 15px;
  86.   margin: 30px auto;
  87. }
  88. .rmjpk h3 {
  89.   text-align: center;
  90. }
  91. .rmjpk ul {
  92.   display: grid;
  93.   grid-template-columns: repeat(5, 1fr);
  94.   grid-template-rows: repeat(3, 1fr);
  95.   gap: 20px;
  96.   height: 560px;
  97.   margin: 10px auto;
  98. }
  99. .rmjpk ul * {
  100.   background-color: lightcyan;
  101.   border-radius: 10px;
  102. }
  103. .rmjpk ul li img {
  104.   width: 100%;
  105.   height: 100%;
  106.   border-radius: 20px;
  107. }
  108. .rmjpk ul li:first-of-type {
  109.   grid-area: span 2;
  110. }

更多相关文章

  1. crudapi零代码开发平台应用场景和成功案例
  2. 全网最全C/C++开发工具和教程分享
  3. [实践] 使用flex弹性布局仿写苏宁易购移动端首页
  4. 超级棒的170+款web前端开发工具汇总，千万要收藏好！
  5. Android 网络开发抓包工具Fiddler、tcpdump和Wireshark的使用
  6. 手机端首页仿写
  7. Java异常与调优一站式解决方案
  8. 一个数据开发人员使用的辅助工具
  9. IBM推出开源工具帮AI抵御对抗性样本***：DNN开发者的福音

随机推荐

  1. Android数据库SQLite性能优化技巧
  2. Android PendingIntent实现原理和代码
  3. Android照相机模块编程 照片颠倒问题及查
  4. android manifest.xml 标签汇总
  5. android-pull方式解析xml文件以及XML文件
  6. Android学习——android:cacheColorHint=
  7. Android Studio首次运行卡在Fetching and
  8. 一个提供Android各历史版本在线源码的网
  9. 转载——android 有用的知识
  10. Android MVVM之Databinding（二） 使用篇