search

博客列表 >flex布局（弹性布局）实战仿PHP中文网手机页面

flex布局（弹性布局）实战仿PHP中文网手机页面

赵大叔
赵大叔原创
2020年04月12日 00:45:00778浏览

效果展示地址：
仿PHP中文网手机页面

flex布局（弹性布局）实战仿PHP中文网手机页面

1、布局分析：整个页面分为：头部header、轮播图banner、导航nav 、主体main、尾部footer五大部份。

1.1 头部header: 用户头像、logo 、用户导航，水平排列

1.2 轮播图banner：可点图片a+img

1.3 导航nav:2个无序列表ul垂直排列。每个ul中4个列表li水平排列。li内是可点击a的1张图片img和图片说明span。

1.4 主体main：主体main分为：推荐课程recomment、最新更新rupdate、最新文章article、最新博文blog、最新问答quan五部分垂直排列。

1.5 尾部footer：4个字体图标和说明span水平排列，每个字体图标和说明span垂直排列。

2、html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>m.php.cn</title>
  6.     <link rel="stylesheet" href="./css/iconfont.css">
  7.     <link rel="stylesheet" href="./css/m.php.cn.css">
  8. </head>
  9. <body>
  10. <header>
  11.     <a href=""><img src="./img/profilephoto.jpg" alt=""></a>
  12.     <a href=""><img src="./img/logo.png" alt=""></a>
  13.     <span class="iconfont"></span>
  14. </header>
  16. <div class="banner">
  17.     <a href=""><img src="./img/banner.png" alt=""></a>
  18. </div>
  20. <nav>
  21.     <ul>
  22.         <li>
  23.             <a href="">
  24.                 <img src="./img/html.png" alt="">
  25.                 <span>HTML/CSS</span>
  26.             </a>
  27.         </li>
  28.         <li>
  29.             <a href="">
  30.                 <img src="./img/JavaScript.png" alt="">
  31.                 <span>JavaScript</span>
  32.             </a>
  33.         </li>
  34.         <li>
  35.             <a href="">
  36.                 <img src="./img/code.png" alt="">
  37.                 <span>服务端</span>
  38.             </a>
  40.         </li>
  41.         <li>
  42.             <a href="">
  43.                 <img src="./img/sql.png" alt="">
  44.                 <span>数据库</span>
  45.             </a>
  46.         </li>
  47.     </ul>
  48. </nav>
  50. <main>
  51.     <article class="recommend">
  52.         <h3>推荐课程</h3>
  53.         <section>
  54.             <a href=""><img src="./img/recom1.jpg" alt=""></a>
  55.             <a href=""><img src="./img/recom2.jpg" alt=""></a>
  56.         </section>
  57.         <section>
  58.             <div>
  59.                 <a href=""><img src="./img/recom3.jpg" alt=""></a>
  60.                 <span>
  61.                     <a href="">CI框架30分钟极速入门</a>
  62.                     <span><i>中级</i>61226次播放</span>
  63.                 </span>
  64.             </div>
  65.         </section>
  66.     </article>
  68.     <article class="update">
  69.         <h3>最新更新</h3>
  70.         <section>
  71.             <div>
  72.                 <a href=""><img src="./img/up1.png" alt=""></a>
  73.                 <span>
  74.                     <a href="">PHP快速操控Excel之PhpSpreadsheet</a>
  75.                     <span>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet...</span>
  76.                     <span><i>中级</i>15011次播放</span>
  77.                 </span>
  78.             </div>
  79.         </section>
  80.     </article>
  82.     <article class="article">
  83.         <h3>最新文章</h3>
  84.         <section>
  85.             <span>
  86.                 <a href="">sublime正则搜索替换修改数据的方法</a>
  87.                 <span><i>发布时间：</i>2020-04-11</span>
  88.             </span>
  89.             <a href=""><img src="./img/art1.jpg" alt=""></a>
  90.         </section>
  91.         <section>
  92.             <a href="">更多内容</a>
  93.         </section>
  94.     </article>
  96.     <article class="blog">
  97.         <h3>最新博文</h3>
  98.         <section>
  99.             <span>
  100.                 Jquery+AJAX上传文件，无刷新上传并重命名文件...
  101.             </span>
  102.             <i>2020-04-11</i>
  103.         </section>
  104.         <section>
  105.             <a href="">更多内容</a>
  106.         </section>
  108.     </article>
  110.     <article class="questions_answers">
  111.         <h3>最新问答</h3>
  112.         <section>
  113.             <span>
  114.                制定的学习计划在哪能找到 咋找不到呢?
  115.             </span>
  116.             <i>2020-04-11</i>
  117.         </section>
  118.         <section>
  119.             <a href="">更多内容</a>
  120.         </section>
  121.     </article>
  122. </main>
  124. <footer>
  125.     <div>
  126.         <span class="iconfont"></span>
  127.         <span>首页</span>
  128.     </div>
  129.     <div>
  130.         <span class="iconfont"></span>
  131.         <span>视频</span>
  132.     </div>
  133.     <div>
  134.         <span class="iconfont"></span>
  135.         <span>社区</span>
  136.     </div>
  137.     <div>
  138.         <span class="iconfont"></span>
  139.         <span>我的</span>
  140.     </div>
  141. </footer>
  142. </body>
  143. </html>

3、css代码

  2. body {
  3.     width: 768px;
  4.     background-color: #EDEFF0;
  5.     margin: auto;
  6. }
  8. /*头部样式*/
  9. header{
  10.     width: 768px;
  11.     height: 50px;
  12.     background-color: #444444;
  13.     /*转为flex*/
  14.     display: flex;
  15.     /*两端对齐*/
  16.     justify-content: space-between;
  17.     /*垂直方向居中排列*/
  18.     align-items: center;
  19.     position: fixed;
  20.     top: 0;
  21. }
  22. /*设置用户头像/用户导航图标大小*/
  23. header > a:first-of-type > img {
  24.     width: 30px;
  25.     height: 30px;
  26.     border-radius: 50%;
  27.     margin: 5px 15px;
  28. }
  30. header > a:nth-of-type(2) > img {
  31.     width: 90px;
  32.     height: 50px;
  33.     margin: 5px 15px;
  34. }
  36. header > .iconfont {
  37.     color: white;
  38.     font-size: 1.5rem;
  39.     margin: 5px 15px;
  40. }
  42. /*轮播图*/
  43. .banner {
  44.     display: flex;
  45.     margin-top: 0;
  46. }
  47. .banner img {
  48.     width: 768px;
  49.     height: 280px;
  50. }
  52. /*导航区*/
  53. nav {
  54.     background-color: #fff;
  55.     display: flex;
  56.     /*垂直，不换行*/
  57.     flex-flow: column nowrap;
  58. }
  59. nav img {
  60.     width: 45px;
  61.     height: 49px;
  62. }
  63. nav > ul {
  64.     display: flex;
  65. }
  66. nav ul li {
  67.     flex: 1;
  68.     list-style: none;
  69. }
  70. nav ul li a {
  71.     display: flex;
  72.     flex-flow: column wrap;
  73.     align-items: center;
  74.     margin: 10px;
  75. }
  76. nav ul li a span {
  77.     margin-top: 5px;
  78.     align-items: center;
  79. }
  82. /*主体内容区*/
  83. main {
  84.     display: flex;
  85.     flex-direction: column;
  86. }
  88. /*推荐课程区*/
  89. main > .recommend {
  90.     display: flex;
  91.     flex-direction: column;
  92. }
  94. main > .recommend > section:first-of-type {
  95.     display: flex;
  96.     justify-content: space-around;
  97.     background-color: #fff;
  98. }
  100. main > .recommend > section:first-of-type img {
  101.     width: 368px;
  102.     height: 90px;
  104. }
  106. main > .recommend > section:nth-last-of-type(-n+2) div {
  107.     display: flex;
  109. }
  111. main > .recommend > section:nth-last-of-type(-n+2) div img {
  112.     width: 295px;
  113.     height: 83px;
  114.     margin: 8px;
  115. }
  117. main > .recommend > section:nth-last-of-type(-n+2) div > span {
  118.     display: flex;
  119.     flex-direction: column;
  120.     margin: 8px;
  121. }
  123. main > .recommend > section:nth-last-of-type(-n+2) div > span > a {
  125. }
  127. main > .recommend > section:nth-last-of-type(-n+2) div > span > span {
  128.     margin-top: 8px;
  129. }
  131. main > .recommend > section:nth-last-of-type(-n+2) div > span > span > i {
  132.     width: 30px;
  133.     height: 24px;
  134.     background-color: #444444;
  135.     color: white;
  136.     border-radius: 10px;
  137.     margin-right: 5px;
  138. }
  140. /*最新更新区*/
  141. main > .update {
  142.     display: flex;
  143.     flex-direction: column;
  144. }
  145. main > .update img {
  146.     width: 299px;
  147.     height: 82px;
  148. }
  150. main > .update section {
  151.     display: flex;
  152.     flex-direction: column;
  153.     background-color: #fff;
  154. }
  156. main > .update section > div {
  157.     height: 102px;
  158.     display: flex;
  159. }
  161. main > .update section > div > span {
  162.     display: flex;
  163.     flex-direction: column;
  164.     font-size: 0.8rem;
  165.     margin-left: 15px;
  166. }
  168. main > .update section > div > span > span:first-of-type {
  169.     margin: 10px auto;
  170. }
  172. main > .update section > div > span > span:last-of-type i {
  173.     background-color: #444444;
  174.     color: white;
  175.     border-radius: 10px;
  176.     margin-right: 5px;
  177. }
  179. /*最新文章*/
  180. main > .article img {
  181.     width: 222px;
  182.     height: 69px;
  183. }
  184. main > .article {
  185.     display: flex;
  186.     flex-direction: column;
  187. }
  189. main > .article > section {
  190.     display: flex;
  191.     justify-content: space-between;
  192.     background-color: #fff;
  193. }
  195. main > .article > section > span {
  196.     display: flex;
  197.     flex-direction: column;
  198.     justify-content: space-around;
  199.     margin-left: 10px;
  200. }
  202. main > .article > section:last-of-type {
  203.     align-self: center;
  204.     font-size: 1.2rem;
  205. }
  208. /*最新博文*/
  209. main > .blog {
  210.     display: flex;
  211.     flex-direction: column;
  212. }
  214. main > .blog > section {
  215.     display: flex;
  216.     justify-content: space-between;
  217.     margin: 5px;
  218.     background-color: #fff;
  219. }
  221. main > .blog > section:last-of-type {
  222.     align-self: center;
  223.     font-size: 1.2rem;
  224. }
  226. /*最新问答*/
  227. main > .questions_answers {
  228.     display: flex;
  229.     flex-direction: column;
  230. }
  232. main > .questions_answers > section {
  233.     display: flex;
  234.     justify-content: space-between;
  235.     margin: 5px;
  236.     background-color: #fff;
  237. }
  238. main > .questions_answers > section:last-of-type {
  239.     align-self: center;
  240.     font-size: 1.2rem;
  241. }
  243. /*尾部*/
  244. footer {
  245.     position: fixed;
  246.     bottom: 0;
  247.     width: 100%;
  248.     height:60px;
  249.     min-width: 320px;
  250.     max-width: 768px;
  251.     /*转为flex*/
  252.     display: flex;
  253.     flex-direction: row;
  254.     justify-content: space-between;
  255.     align-items: center;
  256.     background-color: #fff;
  257. }
  259. footer > div {
  260.     display: flex;
  261.     flex-direction: column;
  262.     /*justify-content: space-around;*/
  263.     margin: auto 15px;
  264.     align-items: center;
  265. }
  267. footer > div:first-of-type {
  268.     font-size: 1.2rem;
  269.     color: red;
  270. }

4、总结：

4.1 html标签的正确使用十分重要，使用正确在CSS写样式的时候效果十分明显。

4.2 选择器相关知识必不可少。

4.3 熟能生巧，我第二次写，明显感觉轻松很多，所以一定要多写多看。

上一条：CSS之flex整体布局及使用下一条：前端入门：链接元素-列表元素-表格元素-表单元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多