search

博客列表 >使用flex仿PHP中文网移动端页面（1227）

使用flex仿PHP中文网移动端页面（1227）

建国
建国原创
2019年12月29日 21:14:40760浏览

内容

尽可能使用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，使用正常布局兼容性应该会更好一些

效果图

上一条：composer安装laravel下一条：二手商品列表与评论与回复案例---PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多