Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用flex仿PHP中文网移动端页面（1227）
Blogger Information
Blog 7
fans 0
comment 0
visits 4340
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
使用flex仿PHP中文网移动端页面（1227）
建国
Original
763 people have browsed it

内容

尽可能使用flex仿照PHP中文网移动端做一个页面，练习flex的使用

代码

html部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  7.     <link rel="stylesheet" href="./static/css/style.css">
  8.     <link rel="stylesheet" href="./static/font/iconfont.css">
  9.     <title>flex练习-仿php中文网移动端首页</title>
  10.     <style>
  12.     </style>
  13. </head>
  14. <body>
  15. <!--头部-->
  16. <header>
  17.     <a href=""><img src="./static/images/user_avatar.jpg" alt=""></a>
  18.     <a href=""><img src="./static/images/logo.png" alt=""></a>
  19.     <span><i class="iconfont icon-menu-fold"></i></span>
  20. </header>
  21. <!--主体部分-->
  22. <main>
  23.     <!--    banner图-->
  24.     <div class="banner">
  25.         <a href=""><img src="./static/images/bannerr.jpg" alt=""></a>
  26.     </div>
  27.     <!--    快速入口-->
  28.     <div class="quick-entry">
  29.         <div>
  30.             <a href=""><img src="./static/images/html.png" alt=""></a>
  31.             <a>HTML/CSS</a>
  32.         </div>
  33.         <div>
  34.             <a href=""><img src="./static/images/JavaScript.png" alt=""></a>
  35.             <a>JavaScript</a>
  36.         </div>
  37.         <div>
  38.             <a href=""><img src="./static/images/code.png" alt=""></a>
  39.             <a>服务端</a>
  40.         </div>
  41.         <div>
  42.             <a href=""><img src="./static/images/sql.png" alt=""></a>
  43.             <a>数据库</a>
  44.         </div>
  45.         <div>
  46.             <a href=""><img src="./static/images/app.png" alt=""></a>
  47.             <a>移动端</a>
  48.         </div>
  49.         <div>
  50.             <a href=""><img src="./static/images/manual.png" alt=""></a>
  51.             <a>手册</a>
  52.         </div>
  53.         <div>
  54.             <a href=""><img src="./static/images/tool2.png" alt=""></a>
  55.             <a>工具</a>
  56.         </div>
  57.         <div>
  58.             <a href=""><img src="./static/images/live.png" alt=""></a>
  59.             <a>直播</a>
  60.         </div>
  61.     </div>
  62.     <div class="lesson">
  63.         <!--    推荐课程-->
  64.         <span class="title">推荐课程</span>
  65.         <!--    广告-->
  66.         <div class="ads">
  67.             <a href=""><img src="./static/images/5d242759adb88970.jpg" alt=""></a>
  68.             <a href=""><img src="./static/images/5d242759adb88970.jpg" alt=""></a>
  69.         </div>
  70.         <div class="lesson-detail">
  71.             <a href=""><img src="./static/images/5d2941e265889366.jpg" alt=""></a>
  72.             <div>
  73.                 <a href="">CI框架30分钟快速入门</a>
  74.                 <div>
  75.                     <span>中级</span>
  76.                     <span>55694次播放</span>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.         <div class="lesson-detail">
  81.             <a href=""><img src="./static/images/5d2941e265889366.jpg" alt=""></a>
  82.             <div>
  83.                 <a href="">CI框架30分钟快速入门</a>
  84.                 <div>
  85.                     <span>中级</span>
  86.                     <span>55694次播放</span>
  87.                 </div>
  88.             </div>
  89.         </div>
  90.     </div>
  91.     <div class="lesson">
  92.         <!--    最新更新-->
  93.         <span class="title">最新更新</span>
  94.         <div class="lesson-detail">
  95.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  96.             <div class="new">
  97.                 <a href="">2019python自学视频</a>
  98.                 <span>本课程适合想从零开始学习Python编程语言的开发人员。由浅入深的带</span>
  99.                 <div>
  100.                     <span>初级</span>
  101.                     <span>55694次播放</span>
  102.                 </div>
  103.             </div>
  104.         </div>
  105.         <div class="lesson-detail">
  106.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  107.             <div class="new">
  108.                 <a href="">2019python自学视频</a>
  109.                 <span>本课程适合想从零开始学习Python编程语言的开发人员。由浅入深的带</span>
  110.                 <div>
  111.                     <span>初级</span>
  112.                     <span>55694次播放</span>
  113.                 </div>
  114.             </div>
  115.         </div>
  116.         <div class="lesson-detail">
  117.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  118.             <div class="new">
  119.                 <a href="">2019python自学视频</a>
  120.                 <span>本课程适合想从零开始学习Python编程语言的开发人员。由浅入深的带</span>
  121.                 <div>
  122.                     <span>初级</span>
  123.                     <span>55694次播放</span>
  124.                 </div>
  125.             </div>
  126.         </div>
  127.         <div class="lesson-detail">
  128.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  129.             <div class="new">
  130.                 <a href="">2019python自学视频</a>
  131.                 <span>本课程适合想从零开始学习Python编程语言的开发人员。由浅入深的带</span>
  132.                 <div>
  133.                     <span>初级</span>
  134.                     <span>55694次播放</span>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </div>
  139.     <div class="lesson">
  140.         <!--        最新文章-->
  141.         <span class="title">最新文章</span>
  142.         <div class="lesson-detail article">
  143.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  144.             <div>
  145.                 <a href="">利用CSRF令牌验证机制漏洞验证受害者账户</a>
  146.                 <span>发布时间：2019-12-28</span>
  147.             </div>
  148.         </div>
  149.         <div class="lesson-detail article">
  150.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  151.             <div>
  152.                 <a href="">利用CSRF令牌验证机制漏洞验证受害者账户</a>
  153.                 <span>发布时间：2019-12-28</span>
  154.             </div>
  155.         </div>
  156.         <div class="lesson-detail article">
  157.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  158.             <div>
  159.                 <a href="">利用CSRF令牌验证机制漏洞验证受害者账户</a>
  160.                 <span>发布时间：2019-12-28</span>
  161.             </div>
  162.         </div>
  163.         <div class="lesson-detail article">
  164.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  165.             <div>
  166.                 <a href="">利用CSRF令牌验证机制漏洞验证受害者账户</a>
  167.                 <span>发布时间：2019-12-28</span>
  168.             </div>
  169.         </div>
  170.         <div class="lesson-detail article">
  171.             <a href=""><img src="./static/images/aaa.jpg" alt=""></a>
  172.             <div>
  173.                 <a href="">利用CSRF令牌验证机制漏洞验证受害者账户</a>
  174.                 <span>发布时间：2019-12-28</span>
  175.             </div>
  176.         </div>
  177.         <a href="" class="more">更多内容</a>
  178.     </div>
  179.     <div class="blog">
  180.         <!--        最新博文-->
  181.         <span class="title">最新博文</span>
  182.         <div class="blogdetail">
  183.             <span><a href="">composer安装laravel,nginx服务器配置解决404问题，创建简单的控制器</a></span>
  184.             <span>2019-12-27</span>
  185.         </div>
  186.         <div class="blogdetail">
  187.             <span><a href="">composer安装laravel,nginx服务器配置解决404问题，创建简单的控制器</a></span>
  188.             <span>2019-12-27</span>
  189.         </div>
  190.         <div class="blogdetail">
  191.             <span><a href="">composer安装laravel,nginx服务器配置解决404问题，创建简单的控制器</a></span>
  192.             <span>2019-12-27</span>
  193.         </div>
  194.         <div class="blogdetail">
  195.             <span><a href="">composer安装laravel,nginx服务器配置解决404问题，创建简单的控制器</a></span>
  196.             <span>2019-12-27</span>
  197.         </div>
  198.         <div class="blogdetail">
  199.             <span><a href="">composer安装laravel,nginx服务器配置解决404问题，创建简单的控制器</a></span>
  200.             <span>2019-12-27</span>
  201.         </div>
  202.         <a href="" class="more">更多内容</a>
  203.     </div>
  204. </main>
  205. <footer>
  206.     <div class="active">
  207.         <span><i class="iconfont icon-home"></i></span>
  208.         <span>首页</span>
  209.     </div>
  210.     <div>
  211.         <span><i class="iconfont icon-play"></i></span>
  212.         <span>视频</span>
  213.     </div>
  214.     <div>
  215.         <span><i class="iconfont icon-codeschool"></i></span>
  216.         <span>社区</span>
  217.     </div>
  218.     <div>
  219.         <span><i class="iconfont icon-user"></i></span>
  220.         <span>我的</span>
  221.     </div>
  222. </footer>
  223. </body>
  224. </html>

CSS部分

  1. /*样式初始化*/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  7. body {
  8.     width: 100vw;
  9.     height: 100vh;
  10.     /*转为flex容器*/
  11.     /*display: flex;*/
  12.     /*垂直方向*/
  13.     /*flex-direction: column;*/
  14.     background-color: #edeff0;
  15.     box-sizing: border-box;
  16.     min-width: 360px;
  17.     font-size: 14px;
  18. }
  20. li {
  21.     list-style: none
  22. }
  24. a {
  25.     text-decoration: none
  26. }
  28. /*样式初始化结束*/
  30. /*字体图标*/
  31. @font-face {
  32.     font-family: "iconfont";
  33.     src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  34.     src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
  35.     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
  36.     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
  37.     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
  38. }
  40. .iconfont {
  41.     font-family: "iconfont logo";
  42.     font-size: 160px;
  43.     font-style: normal;
  44.     -webkit-font-smoothing: antialiased;
  45.     -moz-osx-font-smoothing: grayscale;
  46. }
  48. /*字体图标结束*/
  50. /*头部布局*/
  51. /*头像*/
  52. header {
  53.     height: 50px;
  54.     display: flex;
  55.     justify-content: space-between;
  56.     background-color: #2d353c;
  57.     align-items: center;
  58.     padding: 0 20px;
  59. }
  61. header > :first-child {
  62.     height: 60%;
  63. }
  65. header > :first-child > img {
  66.     border-radius: 50%;
  67.     height: 100%;
  68. }
  70. header > :nth-child(2) {
  71.     height: 100%;
  72. }
  74. header > :nth-child(2) > img {
  75.     height: 100%;
  76. }
  78. header > span {
  79.     color: white;
  80. }
  82. header > span > .iconfont {
  83.     font-size: 30px;
  84. }
  86. /*头部结束*/
  88. /*中部*/
  89. main {
  90.     height: calc(100vh - 100px);
  91.     display: flex;
  92.     overflow: auto;
  93.     flex-direction: column;
  94. }
  96. /*banner部分*/
  97. main > .banner {
  98.     /*height: 60px;*/
  99. }
  101. main > .banner > a > img {
  102.     width: 100%;
  103. }
  105. /*banner部分结束*/
  107. main > .quick-entry {
  108.     display: flex;
  109.     flex-flow: row wrap;
  110.     padding: 15px 0;
  111.     background-color: #fff;
  112.     margin-bottom: 15px;
  113.     flex-shrink: 0;
  114. }
  116. main > .quick-entry > div {
  117.     display: flex;
  118.     width: 25%;
  119.     flex-direction: column;
  120.     align-items: center;
  121.     justify-content: space-between;
  122. }
  124. main > .quick-entry > div:nth-child(-n+4) {
  125.     margin-bottom: 20px;
  126. }
  128. /*快速入口图标部分*/
  129. main > .quick-entry > div > a:first-child {
  130.     width: 50%;
  131. }
  133. main > .quick-entry > div > a:first-child > img {
  134.     width: 100%;
  135. }
  137. /*快速入口文字部分*/
  138. main > .quick-entry > div > a:last-child {
  139.     color: #555555;
  140. }
  142. /*标题*/
  143. main .title {
  144.     font-size: 18px;
  145.     font-weight: bold;
  146.     color: #888888;
  147.     padding: 15px;
  148. }
  150. /*推荐课程部分*/
  151. main > .lesson {
  152.     display: flex;
  153.     flex-direction: column;
  154.     flex-shrink: 0;
  155. }
  157. /*广告区*/
  158. main > .lesson > .ads {
  159.     display: flex;
  160.     justify-content: space-between;
  161.     padding: 0 15px 15px 15px;
  162.     height: 80px;
  163. }
  165. main > .lesson > .ads > a {
  166.     flex-basis: 49%;
  167. }
  169. main > .lesson > .ads > a > img {
  170.     width: 100%;
  171.     height: 100%;
  172. }
  174. /*课程列表区*/
  175. main > .lesson > .lesson-detail {
  176.     display: flex;
  177.     background-color: #fff;
  178.     margin: 0 15px 15px 15px;
  179.     padding: 10px;
  180.     height: 80px;
  181.     color: #888888;
  182.     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  183. }
  185. /*左侧图片*/
  186. main > .lesson > .lesson-detail > a {
  187.     width: 40%;
  188. }
  190. main > .lesson > .lesson-detail > a > img {
  191.     width: 100%;
  192.     height: 100%;
  193. }
  195. /*右侧文字*/
  196. main > .lesson > .lesson-detail > div {
  197.     padding-left: 15px;
  198.     display: flex;
  199.     flex-direction: column;
  200.     width: 60%;
  201. }
  203. main > .lesson > .lesson-detail > div > a {
  204.     color: #888888;
  205.     overflow: hidden;
  206.     white-space: nowrap;
  207.     text-overflow: ellipsis;
  208. }
  210. main > .lesson > .lesson-detail > div > div > :first-child {
  211.     background-color: #595757;
  212.     color: white;
  213.     padding: 0 5px;
  214.     border-radius: 10px / 50%;
  215. }
  217. /*最新课程部分*/
  218. main > .lesson > .lesson-detail > .new {
  219.     justify-content: space-between;
  220. }
  222. main > .lesson > .lesson-detail > div.new > span {
  223.     width: 95%;
  224.     overflow: hidden;
  225.     white-space: nowrap;
  226.     text-overflow: ellipsis;
  227.     font-size: 12px;
  228. }
  230. main > .lesson > .lesson-detail > .new > div {
  231.     display: flex;
  232.     justify-content: space-between;
  233. }
  235. /*最新文章部分*/
  236. main > .lesson > .article {
  237.     height: 60px;
  238. }
  240. main > .lesson > .article > a {
  241.     order: 2;
  242. }
  244. main > .lesson > .article > div {
  245.     order: 1;
  246.     padding-left: 0;
  247. }
  249. main > .lesson > .article > div > a {
  250.     font-weight: bold;
  251.     margin-bottom: 5px;
  252. }
  254. main > .lesson > .article > div > span {
  255.     font-size: 12px;
  256. }
  258. /*更多内容*/
  259. main a.more {
  260.     text-align: center;
  261.     padding: 10px 0;
  262.     margin: 0 15px 15px 15px;
  263.     background-color: #fff;
  264.     color: #888888;
  265.     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  266. }
  268. /*最新博文*/
  269. main > .blog {
  270.     display: flex;
  271.     flex-direction: column;
  273.     flex-shrink: 0;
  274. }
  276. main > .blog > .blogdetail {
  277.     display: flex;
  278.     margin: 0 15px 15px 15px;
  279.     padding: 15px;
  280.     background-color: #fff;
  281.     color: #888888;
  282.     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  283. }
  285. main > .blog > .blogdetail > :first-child {
  286.     flex: 1;
  287.     font-weight: bold;
  288.     overflow: hidden;
  289.     white-space: nowrap;
  290.     text-overflow: ellipsis;
  291. }
  293. main > .blog > .blogdetail > :first-child > a {
  294.     color: #888888;
  295. }
  297. main > .blog > .blogdetail > :last-child {
  298.     width: 25%;
  299.     text-align: right;
  300. }
  302. /*中部结束*/
  304. /*尾部*/
  305. footer {
  306.     height: 50px;
  307.     background-color: #cccccc;
  308.     display: flex;
  309.     align-items: center;
  310. }
  312. footer > div {
  313.     flex-basis: 25%;
  314.     display: flex;
  315.     flex-direction: column;
  316.     align-items: center;
  317.     color: #888888;
  318. }
  320. footer > div.active {
  321.     color: lightcoral;
  322. }
  324. footer > div > span > .iconfont {
  325.     font-size: 16px;
  326. }

问题

在firefox\chrome下正常，但在360极速浏览器下显示不正常，布局错乱，经查是flex自动收缩导致，把main内所有竖向排列的容器上加上flex-shrink:0后解决。因本页面是为了练习flex所做，所以使用了大量的flex，在实际使用中，个人认为main内的元素还是使用正常布局比较好，包括整个body，使用正常布局兼容性应该会更好一些

效果图

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
0 comments
Author's latest blog post