设为首页收藏本站

 找回密码
 立即注册
军机处»首页 › 百科文档 › 参考技术文档 › 系统办公 › css布局之格子布局
返回列表 发新帖

[软件相关] css布局之格子布局

[复制链接]
发表于 2021-9-24 13:21:21 | 显示全部楼层 |阅读模式


  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>格子布局</title>
  6.     <style>
  7.         section{
  8.             background: grey;
  9.             width: 670px;
  10.             overflow: hidden;
  11.         }
  12.         article{
  13.             width: 333px;
  14.             height: 233px;
  15.             float: left;
  16.             text-align: center;
  17.             border-bottom: 1px solid red;
  18.             border-left:  1px solid red;
  19.         }
  20.         article:nth-child(even){
  21.             border-right: 1px solid red;
  22.         }
  23.         article:nth-child(1){
  24.             border-top: 1px solid red;
  25.         }
  26.         article:nth-child(2){
  27.             border-top: 1px solid red;
  28.         }

  30.         img{
  31.             padding-top: 33px;
  32.             width: 33%;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37.     <section>
  38.         <article>
  39.             <img src="img/test.jpg" alt="" class="ims">
  40.             <h1>招财树</h1>
  41.             <p>招财进宝,日入斗金</p>
  42.         </article>

  44.         <article>
  45.             <img src="img/test.jpg" alt="">
  46.             <h1>招财树</h1>
  47.             <p>招财进宝,日入斗金</p>
  48.         </article>

  50.         <article>
  51.             <img src="img/test.jpg" alt="">
  52.             <h1>招财树</h1>
  53.             <p>招财进宝,日入斗金</p>
  54.         </article>

  56.         <article>
  57.             <img src="img/test.jpg" alt="">
  58.             <h1>招财树</h1>
  59.             <p>招财进宝,日入斗金</p>
  60.         </article>
  61.     </section>
  62. </body>
  63. </html>
复制代码


本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖

Archiver|手机版|小黑屋|如风追月 ( 皖ICP备06005222号 )

GMT+8, 2025-1-23 02:10 , Processed in 0.039821 second(s), 16 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表