search

博客列表 >CSS flex 弹性布局和 grid 网格布局

CSS flex 弹性布局和 grid 网格布局

J
J原创
2020年08月13日 17:52:451476浏览

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. }

代码运行如图

上一条：Ajax实战下一条：演示的常用类型,流程控制 ,json
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
涅槃重生2020-08-14 11:46:061楼
向这位同学们学习

相关文章

查看更多