Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > CSS flex 弹性布局和 grid 网格布局
Blogger Information
Blog 6
fans 0
comment 0
visits 6331
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS flex 弹性布局和 grid 网格布局
J
Original
1477 people have browsed it

1.flex 弹性布局

flex 弹性盒子布局是一种按行或按列布局元素的方法，元素可以膨胀或者收缩来适应空间

  • 使用 flex 布局实现 PC 端三列布局
  1. <body>
  2.  <!--页眉-->
  3.   <header>
  4.     <a href="">LOGO</a>
  5.     <a href="">新闻</a>
  6.     <a href="">视频</a>
  7.     <a href="">地图</a>
  8.     <a href="">贴吧</a>
  9.     <a href="">学术</a>
  10.     <a href="">更多</a>
  11.     <a href="">登录</a>
  12.   </header>
  13.   <!--主体-->
  14.   <div class="container">
  15.     <!--左边栏-->
  16.     <aside>左边栏</aside>
  17.     <!--主题内容区-->
  18.     <main>主体</main>
  19.     <!--右边栏-->
  20.     <aside>右边栏</aside>
  21.   </div>
  22.   <!--页脚-->
  23.   <footer>
  24.     <div class="about">
  25.       <a href="">关于我们</a>
  26.       <a href="">常见问题</a>
  27.       <a href="">反馈意见</a>
  28.     </div>
  29.     <p>Copyright © 2017-2020 xxxx 版权所有</p>
  30.   </footer>
  31. </body>

CSS 样式如下:

  1. /*初始化*/
  2. * {
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;
  6. }
  8. a {
  9.     text-decoration: none;
  10.     color: #666;
  11. }
  13. body {
  14.     width: 1050px;
  15.     /*转化为flex弹性盒子*/
  16.     display: flex;
  17.     /*主轴垂直*/
  18.     flex-flow: column nowrap;
  19.     margin: auto;
  20.     background-color: white;
  21. }
  23. header,
  24. footer {
  25.     height: 50px;
  26.     background-color: lightblue;
  27. }
  29. header {
  30.     /*页头转换为flex容器*/
  31.     display: flex;
  32.     /*水平对齐*/
  33.     /*justify-content: center;*/
  34.     /*垂直对齐*/
  35.     align-items: center;
  36. }
  38. header > a {
  39.     /*禁止放大,允许缩小*/
  40.     flex: 0 1 100px;
  41.     /*文本居中*/
  42.     text-align: center;
  43. }
  45. header > a:hover:not(:first-of-type) {
  46.     color: red;
  47. }
  49. header > a:first-of-type {
  50.     margin-right: 50px;
  51. }
  53. header > a:last-of-type {
  54.     margin-left: auto;
  55. }
  57. .container {
  58.     display: flex;
  59.     min-height: 500px;
  60.     justify-content: space-between;
  61.     /*flex-flow: row nowrap;*/
  62. }
  64. .container > aside {
  65.     flex: 0 0 200px;
  66.     background-color: lightyellow;
  67. }
  69. .container > main {
  70.     flex: 0 0 600px;
  71.     background-color: wheat;
  72. }
  74. footer {
  75.     display: flex;
  76.     flex-flow: column nowrap;
  77.     /*水平垂直居中*/
  78.     text-align: center;
  79.     justify-content: center;
  80. }
  82. footer > .about {
  83.     display: flex;
  84.     justify-content: center;
  85. }
  87. footer > .about > a {
  88.     /*设置左右边距*/
  89.     margin: 0 20px;
  90. }
  92. footer > .about > a:hover {
  93.     color: violet;
  94. }
  96. /*媒体查询*/
  97. /*当最大宽度900是,隐藏右边栏*/
  98. @media screen and (max-width: 900px) {
  99.     .container > aside:last-of-type {
  100.     display: none;
  101.     }
  102.     main {
  103.     flex: 1 0 auto;
  104.     }
  105. }
  107. /*当最大宽度700是,隐藏右边栏*/
  108. @media screen and (max-width: 700px) {
  109.     .container > aside,
  110.     header > a:not(:first-of-type):not(:last-of-type),
  111.     footer {
  112.     display: none;
  113.     }
  115.     /*登录按钮左边距350px*/
  116.     header > a:last-of-type {
  117.     margin-left: 350px;
  118.     }
  119. }

代码运行结果图:

  • flex 实现(m.php.cn)首页
  1. <body>
  2.   <!--顶部-->
  3.   <header>
  4.     <a href="" class="iconfont icon">&#xe65b;</a>
  5.     <img src="static/images/logo.png" alt="" />
  6.     <span class="iconfont icon">&#xe61f;</span>
  7.   </header>
  9.   <!--轮播图-->
  10.   <div class="slider">
  11.     <img src="static/images/slider.png" alt="" />
  12.   </div>
  13.   <!--主导航区-->
  14.   <nav>
  15.     <div>
  16.       <a href=""><img src="static/images/nav_1.png" alt="" /></a>
  17.       <a href="">HTML/CSS</a>
  18.     </div>
  19.     <div>
  20.       <a href=""><img src="static/images/nav_2.png" alt="" /></a>
  21.       <a href="">JavaScript</a>
  22.     </div>
  23.     <div>
  24.       <a href=""><img src="static/images/nav_3.png" alt="" /></a>
  25.       <a href="">服务端</a>
  26.     </div>
  27.     <div>
  28.       <a href=""><img src="static/images/nav_3.png" alt="" /></a>
  29.       <a href="">数据库</a>
  30.     </div>
  31.     <div>
  32.       <a href=""><img src="static/images/nav_5.png" alt="" /></a>
  33.       <a href="">移动端</a>
  34.     </div>
  35.     <div>
  36.       <a href=""><img src="static/images/nav_6.png" alt="" /></a>
  37.       <a href="">手册</a>
  38.     </div>
  39.     <div>
  40.       <a href=""><img src="static/images/nav_7.png" alt="" /></a>
  41.       <a href="">工具</a>
  42.     </div>
  43.     <div>
  44.       <a href=""><img src="static/images/nav_8.png" alt="" /></a>
  45.       <a href="">直播</a>
  46.     </div>
  47.   </nav>
  48.   <!--推荐课程-->
  49.   <div class="box recommend">
  50.     <h3 class="title">推荐课程</h3>
  51.     <div class="course_box">
  52.       <div class="box_left">
  53.         <img src="static/images/course_1.jpg" alt="" />
  54.       </div>
  55.       <div class="box_right">
  56.         <img src="static/images/course_2.jpg" alt="" />
  57.       </div>
  58.     </div>
  59.     <div class="course_inline">
  60.       <a href=""><img src="static/images/course_3.jpg" alt="" /></a>
  61.       <div class="course_intro">
  62.         <h2>
  63.           <a href="">CI框架30分钟极速入门</a>
  64.         </h2>
  65.         <p>
  66.           <span class="tag">中级</span>
  67.           <span>161651次播放</span>
  68.         </p>
  69.       </div>
  70.     </div>
  71.     <div class="course_inline">
  72.       <a href=""><img src="static/images/course_4.jpg" alt="" /></a>
  73.       <div class="course_intro">
  74.         <h2>
  75.           <a href="">2018前端入门_HTML5</a>
  76.         </h2>
  77.         <p>
  78.           <span class="tag">初级</span>
  79.           <span>161651次播放</span>
  80.         </p>
  81.       </div>
  82.     </div>
  83.   </div>
  84.   <!--最近更新-->
  85.   <div class="box update">
  86.     <h3 class="title">最近更新</h3>
  87.     <div class="update_list">
  88.       <a href=""><img src="static/images/u_1.png" alt="" /></a>
  89.       <div class="update_intro">
  90.         <h2><a href="">《我的十年撸码生涯》公益直播课</a></h2>
  91.         <p>主题：《十年撸码生涯：聊聊没羞没臊的工作...</p>
  92.         <p><span class="tag">初级</span><span>1616次播放</span></p>
  93.       </div>
  94.     </div>
  95.     <div class="update_list">
  96.       <a href=""><img src="static/images/u_2.png" alt="" /></a>
  97.       <div class="update_intro">
  98.         <h2><a href="">2天速成VueJS免费公益直播课</a></h2>
  99.         <p>php中文网免费公益直播课：两天四个小时Vue...</p>
  100.         <p><span class="tag">初级</span><span>1616次播放</span></p>
  101.       </div>
  102.     </div>
  103.     <div class="update_list">
  104.       <a href=""><img src="static/images/u_3.png" alt="" /></a>
  105.       <div class="update_intro">
  106.         <h2><a href="">PHP代码整洁之道</a></h2>
  107.         <p>本课程参考自 Robert C. Martin的Clean Code 书...</p>
  108.         <p><span class="tag">中级</span><span>1616次播放</span></p>
  109.       </div>
  110.     </div>
  111.     <div class="update_list">
  112.       <a href=""><img src="static/images/u_4.png" alt="" /></a>
  113.       <div class="update_intro">
  114.         <h2><a href="">前端课程（五郞八卦棍系列）第...</a></h2>
  115.         <p>本视频课程是Web开发的基础课程, 主要讲解H...</p>
  116.         <p><span class="tag">初级</span><span>1616次播放</span></p>
  117.       </div>
  118.     </div>
  119.     <div class="update_list">
  120.       <a href=""><img src="static/images/u_5.png" alt="" /></a>
  121.       <div class="update_intro">
  122.         <h2><a href="">小皮面板使用视频教程</a></h2>
  123.         <p>小皮面板（phpstudy-linux面板 ）针对Linux服...</p>
  124.         <p><span class="tag">初级</span><span>1616次播放</span></p>
  125.       </div>
  126.     </div>
  127.     <div class="update_list">
  128.       <a href=""><img src="static/images/u_6.png" alt="" /></a>
  129.       <div class="update_intro">
  130.         <h2><a href="">从零进入C语言</a></h2>
  131.         <p>本课程带你从零进入C语言，课程内容包括Linux...</p>
  132.         <p><span class="tag">初级</span><span>1616次播放</span></p>
  133.       </div>
  134.     </div>
  135.   </div>
  137.   <!--最新文章-->
  138.   <article class="box">
  139.     <h3 class="title">最新文章</h3>
  140.     <div class="article_list">
  141.       <div class="article_left">
  142.         <h2><a href="">php mysql 并发解决方案</a></h2>
  143.         <span>发布时间：2020-08-12</span>
  144.       </div>
  145.       <div class="article_right">
  146.         <a href=""><img src="static/images/a_1.jpg" alt="" /></a>
  147.       </div>
  148.     </div>
  149.     <div class="article_list">
  150.       <div class="article_left">
  151.         <h2><a href="">微信号被投诉了能查到是谁投诉的吗</a></h2>
  152.         <span>发布时间：2020-08-12</span>
  153.       </div>
  154.       <div class="article_right">
  155.         <a href=""><img src="static/images/a_2.jpg" alt="" /></a>
  156.       </div>
  157.     </div>
  158.     <div class="article_list">
  159.       <div class="article_left">
  160.         <h2><a href="">php如何使用正则替换img src</a></h2>
  161.         <span>发布时间：2020-08-12</span>
  162.       </div>
  163.       <div class="article_right">
  164.         <a href=""><img src="static/images/a_1.jpg" alt="" /></a>
  165.       </div>
  166.     </div>
  167.     <div class="article_list">
  168.       <div class="article_left">
  169.         <h2><a href="">php如何实现订单自动取消</a></h2>
  170.         <span>发布时间：2020-08-12</span>
  171.       </div>
  172.       <div class="article_right">
  173.         <a href=""><img src="static/images/a_3.jpg" alt="" /></a>
  174.       </div>
  175.     </div>
  176.     <div class="article_list">
  177.       <div class="article_left">
  178.         <h2><a href="">java常用代码有哪些</a></h2>
  179.         <span>发布时间：2020-08-12</span>
  180.       </div>
  181.       <div class="article_right">
  182.         <a href=""><img src="static/images/a_4.jpg" alt="" /></a>
  183.       </div>
  184.     </div>
  185.     <div class="more"><a href="">更多内容</a></div>
  186.   </article>
  188.   <!--最新博文-->
  189.   <div class="box blog">
  190.     <h3 class="title">最新博文</h3>
  191.     <div class="blog_list">
  192.       <a href="">
  193.         <h2>querylist采集</h2>
  194.         <span>2020-08-10</span>
  195.       </a>
  196.     </div>
  197.     <div class="blog_list">
  198.       <a href="">
  199.         <h2>酱茄社区论坛商城小程序pro更新与WordPress小程...</h2>
  200.         <span>2020-08-10</span>
  201.       </a>
  202.     </div>
  203.     <div class="blog_list">
  204.       <a href="">
  205.         <h2>showdoc 自动生成API文档</h2>
  206.         <span>2020-08-10</span>
  207.       </a>
  208.     </div>
  209.     <div class="blog_list">
  210.       <a href="">
  211.         <h2>私有版 showdoc 文档管理工具</h2>
  212.         <span>2020-08-10</span>
  213.       </a>
  214.     </div>
  215.     <div class="blog_list">
  216.       <a href="">
  217.         <h2>Windows服务器搭建网站步骤 iis配置网站 举栗子...</h2>
  218.         <span>2020-08-10</span>
  219.       </a>
  220.     </div>
  221.     <div class="more"><a href="">更多内容</a></div>
  222.   </div>
  224.   <!--最新问答-->
  225.   <div class="box question">
  226.     <h3 class="title">最新问答</h3>
  227.     <div class="question_list">
  228.       <a href="">
  229.         <h2>函数与结构体</h2>
  230.         <span>2020-08-12</span>
  231.       </a>
  232.     </div>
  233.     <div class="question_list">
  234.       <a href="">
  235.         <h2>我把laravel里面的东西拷贝到其他盘了，然后在...</h2>
  236.         <span>2020-08-12</span>
  237.       </a>
  238.     </div>
  239.     <div class="question_list">
  240.       <a href="">
  241.         <h2>在我的Terminal中好像不提示输入的信息，但是...</h2>
  242.         <span>2020-08-12</span>
  243.       </a>
  244.     </div>
  245.     <div class="question_list">
  246.       <a href="">
  247.         <h2>我也是使用镜像安装的，但不是按照咱们这样在...</h2>
  248.         <span>2020-08-12</span>
  249.       </a>
  250.     </div>
  251.     <div class="question_list">
  252.       <a href="">
  253.         <h2>想自己做网站有会做的师傅吗薪水丰厚</h2>
  254.         <span>2020-08-12</span>
  255.       </a>
  256.     </div>
  257.     <div class="more"><a href="">更多内容</a></div>
  258.   </div>
  260.   <!--底部-->
  261.   <footer>
  262.     <a href="" class="active"
  263.       ><span class="iconfont">&#xe60c;</span><span>首页</span></a
  264.     >
  265.     <a href=""><span class="iconfont">&#xe60a;</span><span>视频</span></a>
  266.     <a href=""><span class="iconfont">&#xe64b;</span><span>社区</span></a>
  267.     <a href=""><span class="iconfont">&#xe65b;</span><span>我的</span></a>
  268.   </footer>
  269. </body>

CSS 代码如下

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     /*box-sizing: border-box;*/
  5. }
  7. a {
  8.     text-decoration: none;
  9.     color: #666;
  10. }
  12. a:hover {
  13.     color: black;
  14. }
  16. html {
  17.     /*调整宽高为视口宽高*/
  18.     width: 100vw;
  19.     height: 100vh;
  20.     font-size: 14px;
  21.     color: #666;
  22. }
  24. body {
  25.     display: flex;
  26.     /*整个主轴垂直*/
  27.     flex-flow: column nowrap;
  28.     min-width: 360px;
  29.     background-color: #edeff0;
  30. }
  32. body > header {
  33.     display: flex;
  34.     width: 95vw;
  36.     background-color: #333;
  37.     color: #fff;
  39.     /*水平两端对齐*/
  40.     justify-content: space-between;
  41.     height: 42px;
  42.     /*交叉轴方向居中*/
  43.     align-items: center;
  44.     /*左右15px边距*/
  45.     padding: 0 15px;
  47.     position: fixed;
  48. }
  50. /*给字体图标加个字号*/
  51. header > .icon {
  52.     font-size: 26px;
  53.     color: #fff;
  54. }
  56. body > .slider {
  57.     height: 200px;
  58.     margin-top: 42px;
  59. }
  61. /*轮播图宽度占据整个视宽*/
  62. .slider > img {
  63.     width: 100%;
  64. }
  66. /*导航*/
  67. nav {
  68.     height: 200px;
  69.     background-color: #fff;
  70.     display: flex;
  71.     flex-flow: row wrap;
  72.     /*分散对齐*/
  73.     align-content: space-around;
  74.     /*上下边距10px */
  75.     margin-bottom: 10px;
  76. }
  78. nav > div {
  79.     /*转成flex容器*/
  80.     display: flex;
  81.     /*给一个25vw的宽度*/
  82.     flex: 0 1 25vw;
  83.     flex-flow: column nowrap;
  84.     align-items: center;
  85. }
  87. /*图片宽度改为原来大小的50%*/
  88. nav > div img {
  89.     width: 50%;
  90. }
  92. /*图片居中对齐*/
  93. nav > div > a:first-of-type {
  94.     text-align: center;
  95. }
  97. /*通用标题*/
  98. .title {
  99.     margin-top: 20px;
  100.     margin-bottom: 10px;
  101.     color: #888;
  102.     font-size: 18px;
  103.     font-weight: bold;
  104. }
  106. /*两边内边距*/
  107. .box {
  108.     padding: 0 10px;
  109. }
  111. /*推荐课程*/
  112. .recommend > .course_box {
  113.     display: flex;
  114.     /*分散对齐*/
  115.     justify-content: space-around;
  116. }
  118. .course_box img {
  119.     width: 47vw;
  120. }
  122. .course_inline {
  123.     background-color: #fff;
  124.     display: flex;
  125.     padding: 10px;
  126.     margin: 10px 0;
  127. }
  129. .course_inline img {
  130.     width: 40vw;
  131. }
  133. .course_intro {
  134.     display: flex;
  135.     flex-flow: column nowrap;
  136.     padding: 0 10px;
  137. }
  139. .course_intro > h2 {
  140.     font: 16px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial,
  141.     sans-serif;
  142.     font-weight: 400;
  143.     color: #777;
  144. }
  146. .course_intro > p {
  147.     margin-top: 10px;
  148. }
  150. /*标签*/
  151. .tag {
  152.     background-color: #333;
  153.     /*圆角*/
  154.     border-radius: 8px;
  155.     color: #fff;
  156.     font-size: 12px;
  157.     padding: 3px;
  158. }
  160. /*最近更新*/
  161. .update_list {
  162.     background-color: #fff;
  163.     display: flex;
  164.     padding: 10px;
  165.     margin: 20px 0;
  166.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  167. }
  169. .update_list img {
  170.     width: 40vw;
  171. }
  173. .update_intro {
  174.     display: flex;
  175.     flex-flow: column nowrap;
  176.     padding: 0 10px;
  177.     justify-content: space-around;
  178. }
  180. .update_list > .update_intro > h2 {
  181.     font-weight: 400;
  182.     font-size: 17px;
  183. }
  185. .update_intro > p:first-of-type {
  186.     font-size: 11px;
  187. }
  189. .update_intro > p:last-of-type {
  190.     display: flex;
  191.     justify-content: space-between;
  192. }
  194. /*最新文章*/
  195. article {
  196.     display: flex;
  197.     flex-flow: column nowrap;
  198. }
  200. article > .article_list {
  201.     background-color: #fff;
  202.     display: flex;
  203.     padding: 10px;
  204.     margin: 8px 0;
  205.     justify-content: space-between;
  206.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  207. }
  209. article > .article_list > .article_left {
  210.     display: flex;
  211.     flex-flow: column nowrap;
  212. }
  214. .article_list > .article_left h2 {
  215.     font-size: 14px;
  216.     font-weight: bold;
  217. }
  219. .article_list > .article_left span {
  220.     margin-top: 10px;
  221. }
  223. article > .article_list > .article_right {
  224.     width: 30vw;
  225. }
  227. article > .article_list > .article_right img {
  228.     width: 100%;
  229. }
  231. /*更多*/
  232. .more > a {
  233.     display: block;
  234.     background-color: #fff;
  235.     margin: 5px 0;
  236.     padding: 5px 0;
  237.     text-align: center;
  238. }
  240. /*最新博文,最新问答*/
  241. .blog > .blog_list,
  242. .question > .question_list {
  243.     background-color: #fff;
  244.     margin: 12px 0;
  245.     padding: 10px;
  246.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  247. }
  249. .blog > .blog_list > a,
  250. .question > .question_list > a {
  251.     display: flex;
  252.     justify-content: space-between;
  253. }
  255. .blog > .blog_list > a > h2,
  256. .question > .question_list > a > h2 {
  257.     font-size: 14px;
  258.     font-weight: bold;
  259.     color: #777;
  260. }
  262. .blog > .blog_list > a > span,
  263. .question > .question_list > a > span {
  264.     font-weight: 100;
  265. }
  267. .question .more {
  268.     margin-bottom: 65px;
  269. }
  271. /*页脚*/
  272. footer {
  273.     height: 55px;
  274.     background-color: #efefef;
  275.     width: 100vw;
  276.     display: flex;
  277.     justify-content: space-around;
  278.     align-items: center;
  279.     border-top: 1px solid #ccc;
  280.     position: fixed;
  281.     bottom: 0;
  282. }
  284. footer > a {
  285.     display: flex;
  286.     flex-flow: column nowrap;
  287.     align-items: center;
  288. }
  290. /*选中*/
  291. .active {
  292.     color: red;
  293. }

代码运行图如下:

2.Grid 网格布局

Grid 网格布局是一种将网页网格化，并实现布局的一种方式

  • 使用自定义 12 栅格布局实现百度首页
    html 代码如下:
  1. <body>
  2.   <div class="container">
  3.     <!-- 页眉 -->
  4.     <div class="row">
  5.       <div class="item col-12 header">
  6.         <nav>
  7.           <a href="">新闻</a>
  8.           <a href="">hao123</a>
  9.           <a href="">地图</a>
  10.           <a href="">视频</a>
  11.           <a href="">贴吧</a>
  12.           <a href="">学术</a>
  13.           <a href="">更多</a>
  14.         </nav>
  15.         <nav>
  16.           <a href="">高考加油</a>
  17.           <a href="">天气</a>
  18.           <a href="">登录</a>
  19.         </nav>
  20.       </div>
  21.     </div>
  22.     <!-- 主体 -->
  23.     <div class="row">
  24.       <div class="item col-2 left"></div>
  25.       <div class="item col-8 main">
  26.         <div class="baidu_img">
  27.           <a href=""><img src="static/image/baidu.png" alt="" /></a>
  28.         </div>
  29.         <div class="input"><input type="text" /><button>百度一下</button></div>
  30.         <div class="box">
  31.           <div class="menu">
  32.             <a class="active" href="">我的关注</a>
  33.             <a href="">推荐</a>
  34.             <a href="">导航</a>
  35.           </div>
  36.           <div class="content">
  37.             <div class="head_line">
  38.               <p>我的导航</p>
  39.               <div>
  40.                 <div class="cbox">
  41.                   <input type="checkbox" name="" id="show" /><label for="show"
  42.                     >分类显示</label
  43.                   >
  44.                 </div>
  45.                 <a href="">编辑</a>
  46.               </div>
  47.             </div>
  48.             <div class="list">
  49.               <div class="nav">
  50.                 <a href=""><img src="static/image/c_1.png" alt="" /></a>
  51.                 <a href="">百度贴吧</a>
  52.               </div>
  53.               <div class="nav">
  54.                 <a href=""><img src="static/image/c_2.png" alt="" /></a>
  55.                 <a href="">淘宝网</a>
  56.               </div>
  57.               <div class="nav">
  58.                 <a href=""><img src="static/image/c_3.png" alt="" /></a>
  59.                 <a href="">新浪微博</a>
  60.               </div>
  61.               <div class="nav">
  62.                 <a href=""><img src="static/image/c_4.png" alt="" /></a>
  63.                 <a href="">新闻</a>
  64.               </div>
  65.               <div class="nav">
  66.                 <span>+</span>
  67.                 <a href="">添加导航</a>
  68.               </div>
  69.             </div>
  70.           </div>
  71.           <div class="diy">
  72.             <a href=""><span>+</span></a>
  73.             <a href="">自定义</a>
  74.           </div>
  75.         </div>
  76.       </div>
  77.       <div class="item col-2 right"></div>
  78.     </div>
  80.     <!-- 页脚 -->
  81.     <div class="row">
  82.       <div class="item col-12 footer">
  83.         <nav>
  84.           <a href="">设为首页</a>
  85.           <a href="">关于百度</a>
  86.           <a href="">About</a>
  87.           <a href="">Baidu</a>
  88.           <a href="">百度营销</a>
  89.           <a href="">使用百度前必读</a>
  90.           <a href="">意见反馈</a>
  91.           <a href="">帮助中心</a>
  92.         </nav>
  93.       </div>
  94.     </div>
  95.   </div>
  96. </body>

CSS 代码如下

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #555;
  9. }
  10. body {
  11.   display: flex;
  12.   justify-content: center;
  13.   align-items: center;
  15.   /* 视口大小 */
  16.   min-height: 100vh;
  17.   min-width: 100vw;
  18. }
  20. .container {
  21.   width: 1000px;
  22.   display: grid;
  23.   gap: 5px;
  24. }
  26. .container > .row {
  27.   display: grid;
  28.   grid-template-columns: repeat(12, 1fr);
  30.   min-height: 50px;
  31.   gap: 5px;
  33.   grid-template-areas: "";
  34. }
  35. .container > .row > .item {
  36.   padding: 10px;
  37. }
  38. .col-1 {
  39.   grid-column: span 1;
  40. }
  41. .col-2 {
  42.   grid-column: span 2;
  43. }
  44. .col-3 {
  45.   grid-column: span 3;
  46. }
  47. .col-4 {
  48.   grid-column: span 4;
  49. }
  50. .col-5 {
  51.   grid-column: span 5;
  52. }
  53. .col-6 {
  54.   grid-column: span 6;
  55. }
  56. .col-7 {
  57.   grid-column: span 7;
  58. }
  59. .col-8 {
  60.   grid-column: span 8;
  61. }
  62. .col-9 {
  63.   grid-column: span 9;
  64. }
  65. .col-10 {
  66.   grid-column: span 10;
  67. }
  68. .col-11 {
  69.   grid-column: span 11;
  70. }
  71. .col-12 {
  72.   grid-column: span 12;
  73. }
  74. /* 页眉 */
  75. .header {
  76.   display: grid;
  77.   grid-template-columns: 3fr 1fr;
  78.   grid-template-rows: 1fr;
  79.   align-items: center;
  80. }
  81. /* 导航 */
  82. nav {
  83.   background-color: #fff;
  84. }
  85. nav > a {
  86.   padding: 10px;
  87. }
  88. nav > a:hover {
  89.   color: blue;
  90. }
  91. /* 主体 */
  92. .main {
  93.   height: 600px;
  94.   display: grid;
  95.   grid-template-rows: 1fr 1fr 3fr;
  96.   place-items: center;
  97. }
  98. /* LOGO */
  99. .baidu_img {
  100.   display: grid;
  101. }
  102. .baidu_img img {
  103.   width: 50%;
  104. }
  105. .baidu_img a {
  106.   text-align: center;
  107. }
  108. /* 输入框 */
  109. .input > input {
  110.   width: 300px;
  111.   height: 44px;
  112.   border: 2px solid #c4c7ce;
  113.   border-radius: 5px;
  114.   background-color: #fff;
  115.   padding: 0 10px;
  116. }
  118. .input > button {
  119.   background-color: #4e6ef2;
  120.   border: 0;
  121.   border-radius: 0 8px 8px 0;
  122.   color: #fff;
  123.   height: 44px;
  124.   width: 108px;
  125.   margin-left: -3px;
  126. }
  127. /* 主要内容区 */
  128. .box {
  129.   width: 600px;
  130.   height: 200px;
  131.   display: grid;
  132.   grid-template-rows: 1fr 6fr;
  133. }
  134. /* 内容区菜单 */
  135. .box > .menu {
  136.   display: grid;
  137.   grid-auto-flow: column;
  138.   place-content: center start;
  139. }
  140. .menu > a {
  141.   font-size: 14px;
  142.   padding: 5px 10px;
  143.   color: #777;
  144. }
  146. .menu > a:hover {
  147.   color: #000;
  148. }
  149. /* 选中状态 */
  150. .active {
  151.   border-bottom: 2px solid #4e6ef2;
  152. }
  153. /* 内容区主体 */
  154. .content {
  155.   background-color: #fff;
  156.   border-radius: 8px;
  157.   box-shadow: 2px 3px 2px #ddd;
  158. }
  159. /* 主体头部 */
  160. .head_line {
  161.   display: grid;
  162.   grid-auto-flow: column;
  163.   grid-template-columns: 5fr 2fr;
  164.   padding: 10px 15px;
  165. }
  166. .head_line > p,
  167. .cbox label,
  168. .head_line > div > a {
  169.   font-size: 14px;
  171.   font-weight: 100;
  172.   color: #777;
  173. }
  174. .head_line > div {
  175.   display: grid;
  176.   grid-auto-flow: column;
  177.   justify-content: space-around;
  178. }
  180. /* 内容区内容 */
  181. .list {
  182.   padding: 15px;
  183.   display: grid;
  184.   grid-auto-flow: column;
  185.   grid-template-columns: repeat(5, 1fr);
  186.   place-items: center;
  187. }
  189. .list > .nav {
  190.   display: flex;
  191.   flex-flow: column;
  192.   align-items: center;
  193. }
  194. .nav img {
  195.   width: 25%;
  196. }
  197. .nav a {
  198.   font-size: 14px;
  199.   text-align: center;
  200. }
  201. .nav a:hover {
  202.   color: #4e6ef2;
  203. }
  205. /* 自定义 */
  206. .diy {
  207.   display: grid;
  208.   place-content: start;
  209.   margin-top: 10px;
  210. }
  212. .diy {
  213.   display: flex;
  214.   justify-content: start;
  215.   align-items: center;
  216. }
  217. .diy > a:hover {
  218.   color: #4e6ef2;
  219. }
  221. .diy > a > span {
  222.   padding: 5px;
  223.   font-weight: bold;
  224.   font-size: 16px;
  225. }
  227. /* 页脚 */
  228. .footer {
  229.   display: grid;
  230.   align-items: center;
  231. }
  233. .footer > nav a {
  234.   font-size: 12px;
  235.   color: #777;
  236. }
  237. .footer > nav a:hover {
  238.   color: #4e6ef2;
  239. }

代码运行如图

  • Grid 布局实现响应式网络相册

html 代码如下

  1. <body>
  2.   <h1>动物头像</h1>
  3.   <div class="container">
  4.     <div class="item">
  5.       <a href=""><img src="static/image/1.jpg" alt="" /></a>
  6.       <a href="">头像1</a>
  7.     </div>
  8.     <div class="item">
  9.       <a href=""><img src="static/image/2.jpg" alt="" /></a>
  10.       <a href="">头像2</a>
  11.     </div>
  12.     <div class="item">
  13.       <a href=""><img src="static/image/3.jpg" alt="" /></a>
  14.       <a href="">头像3</a>
  15.     </div>
  16.     <div class="item">
  17.       <a href=""><img src="static/image/4.jpg" alt="" /></a>
  18.       <a href="">头像4</a>
  19.     </div>
  20.     <div class="item">
  21.       <a href=""><img src="static/image/5.jpg" alt="" /></a>
  22.       <a href="">头像5</a>
  23.     </div>
  24.     <div class="item">
  25.       <a href=""><img src="static/image/6.jpg" alt="" /></a>
  26.       <a href="">头像6</a>
  27.     </div>
  28.     <div class="item">
  29.       <a href=""><img src="static/image/7.jpg" alt="" /></a>
  30.       <a href="">头像7</a>
  31.     </div>
  32.     <div class="item">
  33.       <a href=""><img src="static/image/8.jpg" alt="" /></a>
  34.       <a href="">头像8</a>
  35.     </div>
  36.     <div class="item">
  37.       <a href=""><img src="static/image/9.jpg" alt="" /></a>
  38.       <a href="">头像9</a>
  39.     </div>
  40.     <div class="item">
  41.       <a href=""><img src="static/image/10.jpg" alt="" /></a>
  42.       <a href="">头像10</a>
  43.     </div>
  44.     <div class="item">
  45.       <a href=""><img src="static/image/11.jpg" alt="" /></a>
  46.       <a href="">头像11</a>
  47.     </div>
  48.   </div>
  49. </body>

CSS 代码如下

  1. /* 初始化 */
  2. * {
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;
  6. }
  8. a {
  9.     text-decoration: none;
  10.     color: #555;
  11. }
  13. body {
  14.     background-color: lightseagreen;
  15. }
  16. /* 页头标题 */
  17. h1 {
  18.     color: #fff;
  19.     text-align: center;
  20.     font-size: 2.5rem;
  21.     font-weight: normal;
  22.     text-shadow: 2px 2px 2px #555;
  23.     margin-top: 20px;
  24. }
  25. /* 主体 */
  26. .container {
  27.     width: 100vw;
  28.     height: 100vh;
  29.     padding: 50px;
  31.     display: grid;
  33.     /* 自动填充简介实现媒体查询 */
  34.     grid-template-columns: repeat(auto-fill, 180px);
  35.     grid-template-rows: repeat(auto-fill, 200px);
  36.     /* 垂直,水平平均对齐 */
  37.     place-content: space-evenly;
  38.     /* 间隔 */
  39.     gap: 10px;
  40. }
  42. .container img {
  43.     width: 100%;
  44.     /* 图片居中 */
  45.     text-align: center;
  46. }
  48. .container > .item {
  49.     /* 圆角 */
  50.     border-radius: 10px;
  51.     padding: 10px;
  52.     background-color: #eee;
  54.     /* 细节调整 */
  55.     display: flex;
  56.     flex-flow: column nowrap;
  57.     align-items: center;
  58.     justify-content: center;
  59. }
  60. /* 鼠标覆盖样式 */
  61. .container > .item:hover {
  62.     box-shadow: 0 0 10px #666;
  63.     width: calc(100% * 1.02);
  64.     background-color: lightpink;
  65. }

代码运行如图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：非常棒, 推荐给大家了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
涅槃重生 2020-08-14 11:46:06
向这位同学们学习
1 floor
Author's latest blog post