简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >使用flex布局实现首页排版总结

使用flex布局实现首页排版总结

JKY辉哥
JKY辉哥原创
2020年07月01日 18:32:231212浏览

使用 flex 布局实现首页

1.html 结构代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>布局实例</title>
  7.     <link rel="stylesheet" href="css/common.css" />
  8.     <link rel="stylesheet" href="css/index.css" />
  9.   </head>
  10.   <body>
  11.     <header id="mainHeader" class="flexDis">
  12.       <div>LOGO</div>
  13.       <ul>
  14.         <li><a href="#">home</a></li>
  15.         <li><a href="#">html</a></li>
  16.         <li><a href="#">css</a></li>
  17.         <li><a href="#">js</a></li>
  18.         <li><a href="#">php</a></li>
  19.       </ul>
  20.       <div class="serchInfo">
  21.         <input type="text" placeholder="请输入关键词" value="" />
  22.         <a href=""></a>
  23.       </div>
  24.       <p><a href="#">login</a><a href="#">register</a></p>
  25.     </header>
  27.     <section class="contrain secCon1 flexDis">
  28.       <ul>
  29.         <li><a href="#">列表项1</a></li>
  30.         <li><a href="#">列表项2</a></li>
  31.         <li><a href="#">列表项3</a></li>
  32.         <li><a href="#">列表项4</a></li>
  33.         <li><a href="#">列表项5</a></li>
  34.         <li><a href="#">列表项6</a></li>
  35.         <li><a href="#">列表项7</a></li>
  36.       </ul>
  38.       <div class="preview applyFlex">
  39.         <p><a href="#"></a><a href="#"></a></p>
  40.         <div class="applyFlex">
  41.           <img src="./images/1.jpg" alt="" />
  42.           <img src="./images/2.jpg" alt="" />
  43.           <img src="./images/3.jpg" alt="" />
  44.           <img src="./images/4.jpg" alt="" />
  45.         </div>
  46.         <div class="controler">
  47.           <span></span><span></span><span></span><span></span>
  48.         </div>
  49.       </div>
  50.     </section>
  52.     <section class="secCon2 contrain">
  53.       <h1>大标题<small>标题内容提示信息</small></h1>
  54.       <div class="flexDis flexContentB">
  55.         <p>内容1</p>
  56.         <p>内容2</p>
  57.         <p>内容3</p>
  58.         <p>内容4</p>
  59.       </div>
  60.     </section>
  62.     <section class="secCon2 contrain">
  63.       <h1>大标题<small>标题内容提示信息</small></h1>
  64.       <div class="flexDis flexContentB">
  65.         <p>内容1</p>
  66.         <p>内容2</p>
  67.         <p>内容3</p>
  68.         <p>内容4</p>
  69.       </div>
  70.     </section>
  72.     <section class="secCon2 contrain">
  73.       <h1 class="flexDis flexAignC">
  74.         大标题<span
  75.           ><a href="#">选项1</a><a href="#">选项2</a> <a href="#">选项3</a
  76.           ><a href="#">选项4</a></span
  77.         >
  78.         <p><a href="">更多</a></p>
  79.       </h1>
  81.       <div class="flexDis con2 flexContentB">
  82.         <div>
  83.           <p>内容1</p>
  84.           <span>内容文字介绍1</span>
  85.         </div>
  86.         <div>
  87.           <p>内容2</p>
  88.           <span>内容文字介绍2</span>
  89.         </div>
  90.         <div>
  91.           <p>内容3</p>
  92.           <span>内容文字介绍3</span>
  93.         </div>
  94.         <div>
  95.           <p>内容4</p>
  96.           <span>内容文字介绍4</span>
  97.         </div>
  98.       </div>
  99.       <div class="flexDis con2 flexContentB">
  100.         <div>
  101.           <p>内容1</p>
  102.           <span>内容文字介绍1内容文字介绍1内容文字介绍1内容文字介绍1</span>
  103.         </div>
  104.         <div>
  105.           <p>内容2</p>
  106.           <span
  107.             >内容文字介绍2内容文字介绍2内容文字介绍2内容文字介绍2内容文字介绍2</span
  108.           >
  109.         </div>
  110.         <div>
  111.           <p>内容3</p>
  112.           <span>内容文字介绍3内容文字介绍3内容文字介绍3内容文字介绍3</span>
  113.         </div>
  114.         <div>
  115.           <p>内容4</p>
  116.           <span
  117.             >内容文字介绍4内容文字介绍4内容文字介绍4内容文字介绍4内容文字介绍4</span
  118.           >
  119.         </div>
  120.       </div>
  121.     </section>
  123.     <footer class="mainfooter">
  124.       <div class="contrain flexDis">
  125.         <div class="applyFlex">
  126.           <p>
  127.             <a href="">链接1</a>
  128.             <a href="">链接2</a>
  129.           </p>
  130.           <p class="copyrightInfo">copyright©京备xxx号</p>
  131.         </div>
  132.         <div>
  133.           <img src="images/code.jpg" />
  134.         </div>
  135.       </div>
  136.     </footer>
  137.   </body>
  138. </html>

2.公共样式文件 common.css

  1. #mainHeader {
  2.   background: white;
  3.   padding: 1.5em;
  4.   box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.2);
  5. }
  7. #mainHeader ul {
  8.   padding: 0 1em;
  9. }
  11. #mainHeader ul li {
  12.   display: inline-block;
  13.   padding: 0 0.8em;
  14. }
  16. #mainHeader ul li a {
  17.   color: #38e;
  18. }
  20. #mainHeader ul li a:hover {
  21.   color: black;
  22. }
  24. #mainHeader .serchInfo {
  25.   padding: 0 1em;
  26. }
  28. #mainHeader .serchInfo a {
  29.   vertical-align: middle;
  30.   background: #38e;
  31.   padding: 0.3em 0.6em;
  32.   color: white;
  33. }
  34. #mainHeader .serchInfo a::after {
  35.   content: "\f001";
  36.   font-family: icon;
  37. }
  39. #mainHeader .serchInfo input {
  40.   border: solid 1px silver;
  41.   padding: 0.5em;
  42.   outline: none;
  43.   vertical-align: middle;
  44.   border-radius: 0.3em 0 0 0.3em;
  45. }
  47. #mainHeader > p {
  48.   margin-left: auto;
  49. }
  51. #mainHeader > p a {
  52.   color: #38e;
  53.   margin: 0 0.6em;
  54. }
  56. .secCon1 {
  57.   height: 480px;
  58. }
  60. .secCon1 ul {
  61.   width: 200px;
  62.   background-color: gray;
  63. }
  65. .secCon1 ul li {
  66.   background-color: gray;
  67.   list-style: none;
  68. }
  70. .secCon1 ul li a {
  71.   display: block;
  72.   padding: 0.8em 1.5em;
  73.   color: white;
  74. }
  76. .secCon1 ul li a:hover {
  77.   background-color: rgba(255, 255, 255, 0.2);
  78. }
  80. .secCon1 .preview {
  81.   position: relative;
  82.   height: 100%;
  83. }
  85. .secCon1 .preview .applyFlex {
  86.   position: relative;
  87.   height: 100%;
  88. }
  90. .secCon1 .preview img {
  91.   position: absolute;
  92.   left: 0;
  93.   top: 0;
  94.   width: 100%;
  95.   height: 100%;
  96.   object-fit: cover;
  97. }
  99. .secCon1 .preview p {
  100.   position: absolute;
  101.   width: 100%;
  102.   top: 50%;
  103.   left: 0;
  104.   z-index: 1;
  105. }
  106. .secCon1 .preview p a {
  107.   position: absolute;
  108.   width: 30px;
  109.   height: 30px;
  110. }
  112. .secCon1 .preview p a:first-of-type {
  113.   border: solid 2px white;
  114.   border-style: solid none none solid;
  115.   transform: rotate(-45deg);
  116.   left: 1em;
  117. }
  119. .secCon1 .preview p a:last-of-type {
  120.   border: solid 2px white;
  121.   border-style: none solid solid none;
  122.   transform: rotate(-45deg);
  123.   right: 1em;
  124. }
  126. .secCon1 .controler {
  127.   position: absolute;
  128.   right: 1em;
  129.   bottom: 1em;
  130. }
  132. .secCon1 .controler span {
  133.   display: inline-block;
  134.   width: 9px;
  135.   height: 9px;
  136.   background: white;
  137.   border-radius: 1em;
  138.   margin: 0 1em;
  139.   cursor: pointer;
  140.   opacity: 0.5;
  141. }
  143. .secCon1 .controler span:hover {
  144.   opacity: 1;
  145. }
  147. .secCon2 {
  148. }
  150. .secCon2 h1 {
  151.   font-size: 26px;
  152.   padding: 0.4em 0;
  153. }
  155. .secCon2 h1 small {
  156.   font-size: 14px;
  157.   color: gray;
  158. }
  160. .secCon2 h1 span {
  161. }
  163. .secCon2 h1 small {
  164.   font-size: 16px;
  165.   color: gray;
  166. }
  167. .secCon2 h1 span {
  168.   font-size: 14px;
  169.   color: gray;
  170. }
  172. .secCon2 h1 span a {
  173.   margin: 0 0.6em;
  174. }
  176. .secCon2 h1 > p {
  177.   margin-left: auto;
  178.   font-size: 14px;
  179. }
  181. .secCon2 > div {
  182.   text-align: center;
  183. }
  185. .secCon2 h1 > p a {
  186.   color: gray;
  187. }
  189. .secCon2 > div {
  190.   text-align: center;
  191. }
  193. .secCon2 > div p {
  194.   background: gray;
  195.   width: 20%;
  196.   padding: 3em 0;
  197.   border-radius: 0.4em;
  198. }
  199. .secCon2 .con2 {
  200.   margin: 1em auto;
  201. }
  202. .secCon2 .con2 > div {
  203.   width: 210px;
  204. }
  205. .secCon2 .con2 span {
  206.   padding: 0.4em 0 0;
  207.   line-height: 2;
  208. }
  210. .secCon2 .con2 > div p {
  211.   width: 100%;
  212. }
  214. .mainfooter {
  215.   background-color: gray;
  216.   padding: 2em;
  217. }
  219. .mainfooter p a {
  220.   color: #000;
  221. }
  223. .mainfooter .copyrightInfo {
  224.   padding-top: 2em;
  225. }

3.首页样式文件 index.css

  1. #mainHeader {
  2.   background: white;
  3.   padding: 1.5em;
  4.   box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.2);
  5. }
  7. #mainHeader ul {
  8.   padding: 0 1em;
  9. }
  11. #mainHeader ul li {
  12.   display: inline-block;
  13.   padding: 0 0.8em;
  14. }
  16. #mainHeader ul li a {
  17.   color: #38e;
  18. }
  20. #mainHeader ul li a:hover {
  21.   color: black;
  22. }
  24. #mainHeader .serchInfo {
  25.   padding: 0 1em;
  26. }
  28. #mainHeader .serchInfo a {
  29.   vertical-align: middle;
  30.   background: #38e;
  31.   padding: 0.3em 0.6em;
  32.   color: white;
  33. }
  34. #mainHeader .serchInfo a::after {
  35.   content: "\f001";
  36.   font-family: icon;
  37. }
  39. #mainHeader .serchInfo input {
  40.   border: solid 1px silver;
  41.   padding: 0.5em;
  42.   outline: none;
  43.   vertical-align: middle;
  44.   border-radius: 0.3em 0 0 0.3em;
  45. }
  47. #mainHeader > p {
  48.   margin-left: auto;
  49. }
  51. #mainHeader > p a {
  52.   color: #38e;
  53.   margin: 0 0.6em;
  54. }
  56. .secCon1 {
  57.   height: 480px;
  58. }
  60. .secCon1 ul {
  61.   width: 200px;
  62.   background-color: gray;
  63. }
  65. .secCon1 ul li {
  66.   background-color: gray;
  67.   list-style: none;
  68. }
  70. .secCon1 ul li a {
  71.   display: block;
  72.   padding: 0.8em 1.5em;
  73.   color: white;
  74. }
  76. .secCon1 ul li a:hover {
  77.   background-color: rgba(255, 255, 255, 0.2);
  78. }
  80. .secCon1 .preview {
  81.   position: relative;
  82.   height: 100%;
  83. }
  85. .secCon1 .preview .applyFlex {
  86.   position: relative;
  87.   height: 100%;
  88. }
  90. .secCon1 .preview img {
  91.   position: absolute;
  92.   left: 0;
  93.   top: 0;
  94.   width: 100%;
  95.   height: 100%;
  96.   object-fit: cover;
  97. }
  99. .secCon1 .preview p {
  100.   position: absolute;
  101.   width: 100%;
  102.   top: 50%;
  103.   left: 0;
  104.   z-index: 1;
  105. }
  106. .secCon1 .preview p a {
  107.   position: absolute;
  108.   width: 30px;
  109.   height: 30px;
  110. }
  112. .secCon1 .preview p a:first-of-type {
  113.   border: solid 2px white;
  114.   border-style: solid none none solid;
  115.   transform: rotate(-45deg);
  116.   left: 1em;
  117. }
  119. .secCon1 .preview p a:last-of-type {
  120.   border: solid 2px white;
  121.   border-style: none solid solid none;
  122.   transform: rotate(-45deg);
  123.   right: 1em;
  124. }
  126. .secCon1 .controler {
  127.   position: absolute;
  128.   right: 1em;
  129.   bottom: 1em;
  130. }
  132. .secCon1 .controler span {
  133.   display: inline-block;
  134.   width: 9px;
  135.   height: 9px;
  136.   background: white;
  137.   border-radius: 1em;
  138.   margin: 0 1em;
  139.   cursor: pointer;
  140.   opacity: 0.5;
  141. }
  143. .secCon1 .controler span:hover {
  144.   opacity: 1;
  145. }
  147. .secCon2 {
  148. }
  150. .secCon2 h1 {
  151.   font-size: 26px;
  152.   padding: 0.4em 0;
  153. }
  155. .secCon2 h1 small {
  156.   font-size: 14px;
  157.   color: gray;
  158. }
  160. .secCon2 h1 span {
  161. }
  163. .secCon2 h1 small {
  164.   font-size: 16px;
  165.   color: gray;
  166. }
  167. .secCon2 h1 span {
  168.   font-size: 14px;
  169.   color: gray;
  170. }
  172. .secCon2 h1 span a {
  173.   margin: 0 0.6em;
  174. }
  176. .secCon2 h1 > p {
  177.   margin-left: auto;
  178.   font-size: 14px;
  179. }
  181. .secCon2 > div {
  182.   text-align: center;
  183. }
  185. .secCon2 h1 > p a {
  186.   color: gray;
  187. }
  189. .secCon2 > div {
  190.   text-align: center;
  191. }
  193. .secCon2 > div p {
  194.   background: gray;
  195.   width: 20%;
  196.   padding: 3em 0;
  197.   border-radius: 0.4em;
  198. }
  199. .secCon2 .con2 {
  200.   margin: 1em auto;
  201. }
  202. .secCon2 .con2 > div {
  203.   width: 210px;
  204. }
  205. .secCon2 .con2 span {
  206.   padding: 0.4em 0 0;
  207.   line-height: 2;
  208. }
  210. .secCon2 .con2 > div p {
  211.   width: 100%;
  212. }
  214. .mainfooter {
  215.   background-color: gray;
  216.   padding: 2em;
  217. }
  219. .mainfooter p a {
  220.   color: #000;
  221. }
  223. .mainfooter .copyrightInfo {
  224.   padding-top: 2em;
  225. }

flex 布局网站首页 运行截图

flex

5. flex 媒体查询

  • 演示代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex媒体查询</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       /* flex媒体查询:根据用户设备，跨终端显示页面 */
  13.       .container {
  14.         display: flex;
  15.         /* 第一：必须允许创建多行容器 */
  16.         flex-flow: row wrap;
  17.       }
  19.       /* flexBox项目 */
  20.       .container > .item {
  21.         /* flex:是否允许放大，是否允许收缩，基础尺寸大小 */
  22.         flex: 1 1 150px;
  23.         height: 40px;
  24.         background-color: lightslategray;
  25.       }
  26.     </style>
  27.   </head>
  28.   <body>
  29.     <div class="container">
  30.       <div class="item">1</div>
  31.       <div class="item">2</div>
  32.       <div class="item">3</div>
  33.       <div class="item">4</div>
  34.     </div>
  35.   </body>
  36. </html>

运行截图
媒体查询

6.总结

  • flex 媒体查询:根据用户设备，跨终端显示页面，非常适合布局手机端页面实现自适应
  • flex 布局也能布局 PC 页面，主要是一维排版，主要考虑的是横向或竖向排版，有自身局限性
上一条：12 grid的基本操作下一条：Win10功能有哪些？8种有趣的小功能等你来使用【147下载站】
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多