Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用flex框架仿PHP中文网手机端首页
Blogger Information
Blog 64
fans 6
comment 2
visits 83029
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中文网手机端首页
王娇
Original
703 people have browsed it

演示链接

http://xuanransoftware.com/phpStudy/0410/

效果图

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.     <link rel="stylesheet" href="css/style.css" />
  7.     <title>php中文网移动端首页</title>
  8.   </head>
  9.   <body>
  10.     <!-- 页眉部分 -->
  11.     <header>
  12.       <a href="" class="iconfont"></a>
  13.       <a href=""><img src="images/logo.png" alt="" /></a>
  14.       <a href="" class="iconfont"></a>
  15.     </header>
  16.     <!-- 网页主体部分 -->
  17.     <main>
  18.       <a href=""><img src="images/mainBanner.png" alt="" /></a>
  19.       <nav>
  20.         <div>
  21.           <a href=""><img src="images/navHtml.png" alt="" /></a>
  22.           <a href=""><span>HTML/CSS</span></a>
  23.         </div>
  24.         <div>
  25.           <a href=""><img src="images/navJs.png" alt="" /></a>
  26.           <a href=""><span>JavaScript</span></a>
  27.         </div>
  28.         <div>
  29.           <a href=""><img src="images/navServer.png" alt="" /></a>
  30.           <a href=""><span>服务端</span></a>
  31.         </div>
  32.         <div>
  33.           <a href=""><img src="images/navDb.png" alt="" /></a>
  34.           <a href=""><span>数据库</span></a>
  35.         </div>
  36.         <div>
  37.           <a href=""><img src="images/navMobile.png" alt="" /></a>
  38.           <a href=""><span>移动端</span></a>
  39.         </div>
  40.         <div>
  41.           <a href=""><img src="images/navManual.png" alt="" /></a>
  42.           <a href=""><span>手册</span></a>
  43.         </div>
  44.         <div>
  45.           <a href=""><img src="images/navTool.png" alt="" /></a>
  46.           <a href=""><span>工具</span></a>
  47.         </div>
  48.         <div>
  49.           <a href=""><img src="images/navLive.png" alt="" /></a>
  50.           <a href=""><span>直播</span></a>
  51.         </div>
  52.       </nav>
  53.       <section class="recomCourse">
  54.         <h2>推荐课程</h2>
  55.         <div>
  56.           <div>
  57.             <a href=""><img src="images/course1.png" alt="" /></a>
  58.           </div>
  59.           <div>
  60.             <a href=""><img src="images/course2.png" alt="" /></a>
  61.           </div>
  62.         </div>
  63.         <div>
  64.           <div>
  65.             <a href=""><img src="images/course3.png" alt="" /></a>
  66.           </div>
  67.           <div class="desc">
  68.             <a href="">CI框架30分钟极速入门</a>
  69.             <div>
  70.               <span>中级</span>
  71.               <span>61215次播放</span>
  72.             </div>
  73.           </div>
  74.         </div>
  75.         <div>
  76.           <div>
  77.             <a href=""><img src="images/course4.png" alt="" /></a>
  78.           </div>
  79.           <div class="desc">
  80.             <a href="">2018前端入门—HTML</a>
  81.             <div>
  82.               <span>中级</span>
  83.               <span>61215次播放</span>
  84.             </div>
  85.           </div>
  86.         </div>
  87.       </section>
  88.       <section class="recUpdate">
  89.         <h2>最近更新</h2>
  90.         <div>
  91.           <div>
  92.             <a href=""><img src="images/update1.png" alt="" /></a>
  93.           </div>
  94.           <div class="desc">
  95.             <a href="">PHP快速操控Excel</a>
  96.             <div>
  97.               <span>老的PHPExcel已经停止更新了！目前最新的是使用phpOffi</span>
  98.             </div>
  99.             <div>
  100.               <span>初级</span>
  101.               <span>61215次播放</span>
  102.             </div>
  103.           </div>
  104.         </div>
  105.         <div>
  106.           <div>
  107.             <a href=""><img src="images/update2.png" alt="" /></a>
  108.           </div>
  109.           <div class="desc">
  110.             <a href="">Thinkphp6.0正式版视频教程</a>
  111.             <div>
  112.               <span>Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很</span>
  113.             </div>
  114.             <div>
  115.               <span>中级</span>
  116.               <span>61215次播放</span>
  117.             </div>
  118.           </div>
  119.         </div>
  120.         <div>
  121.           <div>
  122.             <a href=""><img src="images/update3.png" alt="" /></a>
  123.           </div>
  124.           <div class="desc">
  125.             <a href="">2019python自觉视频</a>
  126.             <div>
  127.               <span>本课程主要适合从0开始学习python</span>
  128.             </div>
  129.             <div>
  130.               <span>初级</span>
  131.               <span>61215次播放</span>
  132.             </div>
  133.           </div>
  134.         </div>
  135.         <div>
  136.           <div>
  137.             <a href=""><img src="images/update4.png" alt="" /></a>
  138.           </div>
  139.           <div class="desc">
  140.             <a href="">PHP开发免费公益直播课</a>
  141.             <div>
  142.               <span>主讲老师：朱老师</span>
  143.             </div>
  144.             <div>
  145.               <span>初级</span>
  146.               <span>61215次播放</span>
  147.             </div>
  148.           </div>
  149.         </div>
  150.         <div>
  151.           <div>
  152.             <a href=""><img src="images/update5.png" alt="" /></a>
  153.           </div>
  154.           <div class="desc">
  155.             <a href="">从零开始到WEB响应式布局</a>
  156.             <div>
  157.               <span>重点介绍HTML,CSS,web布局</span>
  158.             </div>
  159.             <div>
  160.               <span>中级</span>
  161.               <span>61215次播放</span>
  162.             </div>
  163.           </div>
  164.         </div>
  165.         <div>
  166.           <div>
  167.             <a href=""><img src="images/update6.png" alt="" /></a>
  168.           </div>
  169.           <div class="desc">
  170.             <a href="">PHP文件基本操作</a>
  171.             <div>
  172.               <span>文件的基本操作</span>
  173.             </div>
  174.             <div>
  175.               <span>初级</span>
  176.               <span>61215次播放</span>
  177.             </div>
  178.           </div>
  179.         </div>
  180.       </section>
  181.       <section class="newArticle">
  182.         <h2>最新文章</h2>
  183.         <div class="desc">
  184.           <div>
  185.             <a href=""><span>微信引用功能什么意思</span></a>
  186.             <a href=""><span>发布时间：2020-04-10</span></a>
  187.           </div>
  188.           <div>
  189.             <a href=""><img src="images/article1.png" alt="" /></a>
  190.           </div>
  191.         </div>
  192.         <div class="desc">
  193.           <div>
  194.             <a href=""><span>笔记本电脑响怎么解决</span></a>
  195.             <a href=""><span>发布时间：2020-04-10</span></a>
  196.           </div>
  197.           <div>
  198.             <a href=""><img src="images/article2.png" alt="" /></a>
  199.           </div>
  200.         </div>
  201.         <div class="desc">
  202.           <div>
  203.             <a href=""><span>win7如果调整为最佳性能模式</span></a>
  204.             <a href=""><span>发布时间：2020-04-10</span></a>
  205.           </div>
  206.           <div>
  207.             <a href=""><img src="images/article3.png" alt="" /></a>
  208.           </div>
  209.         </div>
  210.         <div class="desc">
  211.           <div>
  212.             <a href=""><span>关于java强引用和弱引用的介绍</span></a>
  213.             <a href=""><span>发布时间：2020-04-10</span></a>
  214.           </div>
  215.           <div>
  216.             <a href=""><img src="images/article4.png" alt="" /></a>
  217.           </div>
  218.         </div>
  219.         <div class="desc">
  220.           <div>
  221.             <a href=""><span>win10无法打开wlan怎么解决</span></a>
  222.             <a href=""><span>发布时间：2020-04-10</span></a>
  223.           </div>
  224.           <div>
  225.             <a href=""><img src="images/article5.png" alt="" /></a>
  226.           </div>
  227.         </div>
  228.         <div class="desc">
  229.           <div>
  230.             <a href=""><span>更多内容</span></a>
  231.           </div>
  232.         </div>
  233.       </section>
  234.       <section class="newBlog">
  235.         <h2>最新博文</h2>
  236.         <div class="desc">
  237.           <a href="">跟小黑学漏洞利用开发之windows篇</a>
  238.           <a href="">2020-04-10</a>
  239.         </div>
  240.         <div class="desc">
  241.           <a href="">最新的xss bypass代码</a>
  242.           <a href="">2020-04-10</a>
  243.         </div>
  244.         <div class="desc">
  245.           <a href="">composer windows安装详解</a>
  246.           <a href="">2020-04-10</a>
  247.         </div>
  248.         <div class="desc">
  249.           <a href="">AI智能机器人源码</a>
  250.           <a href="">2020-04-10</a>
  251.         </div>
  252.         <div class="desc">
  253.           <a href="">利用css过虑实现网页夜模式</a>
  254.           <a href="">2020-04-10</a>
  255.         </div>
  256.         <div class="desc">
  257.           <a href="">更多内容</a>
  258.         </div>
  259.       </section>
  260.       <section class="newAskQue">
  261.         <h2>最新问答</h2>
  262.         <div class="desc">
  263.           <a href="">我访问不了</a>
  264.           <a href="">2020-04-10</a>
  265.         </div>
  266.         <div class="desc">
  267.           <a href="">请教一个问题，我想用cut函数</a>
  268.           <a href="">2020-04-10</a>
  269.         </div>
  270.         <div class="desc">
  271.           <a href="">验证码输入正确了怎么还提示密码错误</a>
  272.           <a href="">2020-04-10</a>
  273.         </div>
  274.         <div class="desc">
  275.           <a href="">手机没有下载SDK</a>
  276.           <a href="">2020-04-10</a>
  277.         </div>
  278.         <div class="desc">
  279.           <a href="">访问主页后，创建数据库出现错误1064</a>
  280.           <a href="">2020-04-10</a>
  281.         </div>
  282.         <div class="desc">
  283.           <a href="">更多内容</a>
  284.         </div>
  285.       </section>
  286.     </main>
  287.     <!-- 页脚部分 -->
  288.     <footer>
  289.       <a href="" class="iconfont"><span></span><span>首页</span></a>
  290.       <a href="" class="iconfont"><span></span><span>视频</span></a>
  291.       <a href="" class="iconfont"><span></span><span>社区</span></a>
  292.       <a href="" class="iconfont"><span></span><span>我的</span></a>
  293.     </footer>
  294.   </body>
  295. </html>

css示例代码

  1. @import url(fontIcon.css);
  2. /* 公共样式 */
  3. * {
  4.   padding: 0px;
  5.   margin: 0px;
  6. }
  7. html {
  8.   font-size: 14px;
  9.   background-color: #efefef;
  10. }
  11. body {
  12.   display: flex;
  13.   flex-flow: column nowrap;
  14.   justify-content: space-between;
  15.   width: 100vw;
  16.   height: 100vh;
  17.   min-width: 320px;
  18. }
  20. /* 页眉样式 */
  21. header {
  22.   display: flex;
  23.   background-color: #2d353c;
  24.   align-items: center;
  25.   justify-content: space-between;
  26.   /* position: relative; */
  27.   padding: 0px 15px;
  28.   height: 35px;
  29.   /* top: 0px; */
  30. }
  31. header a {
  32.   margin: 0px 10px;
  33.   text-decoration: none;
  34.   color: white;
  35. }
  36. header a:hover {
  37.   color: greenyellow;
  38. }
  40. /* 主体结构样式 */
  41. main {
  42.   flex: 1;
  43.   overflow-y: scroll;
  44.   display: flex;
  45.   flex-flow: column nowrap;
  46. }
  47. main > a > img {
  48.   width: 100vw;
  49. }
  50. /* 主体结构中的导航栏样式 */
  51. main > nav {
  52.   display: flex;
  53.   flex-flow: row wrap;
  54.   align-items: center;
  55.   justify-content: space-around;
  56.   background-color: white;
  57.   margin-bottom: 10px;
  58. }
  59. main > nav > div {
  60.   flex: 0 1 25vw;
  61.   display: flex;
  62.   flex-flow: column nowrap;
  63.   align-items: center;
  64.   padding: 10px 0px;
  65.   box-sizing: border-box;
  66. }
  67. main > nav > div > img {
  68.   flex: 0 1 auto;
  69. }
  70. main > nav > div > a {
  71.   flex: 0 1 auto;
  72.   text-decoration: none;
  73.   font-weight: bold;
  74.   color: #938888;
  75. }
  76. main > nav > div > a:hover {
  77.   color: coral;
  78. }
  79. /* 页面内容区样式 */
  80. main > section {
  81.   display: flex;
  82.   flex-flow: column nowrap;
  83.   align-items: center;
  84. }
  85. main > section > h2 {
  86.   color: #888888;
  87.   margin-left: 10px;
  88.   margin-bottom: 10px;
  89.   font-size: 4.6vw;
  90.   align-self: flex-start;
  91. }
  93. /* 推荐课程样式 */
  94. /* 推荐课程只有图片的样式 */
  95. .recomCourse > div:first-of-type {
  96.   /* padding: 10px 10px;
  97.   box-sizing: border-box; */
  98.   width: 95vw;
  99.   display: flex;
  100.   flex-flow: row nowrap;
  101.   align-items: center;
  102.   justify-content: space-around;
  103. }
  104. .recomCourse > div:first-of-type > div {
  105.   width: 100%;
  106.   height: 100%;
  107. }
  108. .recomCourse > div:first-of-type > div > a > img {
  109.   max-width: 100%;
  110.   max-height: 100%;
  111. }
  113. /* 推荐课程图片+文字描述样式 */
  114. .recomCourse > div:not(:first-of-type) {
  115.   padding: 10px 10px;
  116.   box-sizing: border-box;
  117.   width: 95vw;
  118.   background-color: white;
  119.   display: flex;
  120.   flex-flow: row nowrap;
  121.   align-items: center;
  122.   justify-content: flex-start;
  123.   margin-bottom: 10px;
  124. }
  125. .recomCourse > div:not(:first-of-type) > div > a > img {
  126.   max-width: 100%;
  127.   max-height: 100%;
  128. }
  129. /* 推荐课程图片左边的描述文字样式 */
  130. .recomCourse > div:not(:first-of-type) > .desc {
  131.   flex: 0 1 auto;
  132.   height: 100px;
  133.   display: flex;
  134.   flex-flow: column nowrap;
  135.   justify-content: space-around;
  136.   margin: 0px 10px;
  137. }
  138. .recomCourse > div:not(:first-of-type) > .desc > a {
  139.   text-decoration: none;
  140.   color: #888888;
  141.   font-size: 3.6vw;
  142. }
  143. .recomCourse > div:not(:first-of-type) > .desc > a:hover {
  144.   color: coral;
  145. }
  146. .recomCourse > div:not(:first-of-type) > .desc > div {
  147.   font-size: 2.7vw;
  148.   color: #888888;
  149.   display: flex;
  150.   justify-content: space-around;
  151. }
  152. .recomCourse > div:not(:first-of-type) > .desc > div > span:first-of-type {
  153.   color: white;
  154.   background-color: #737373;
  155.   border-radius: 5px;
  156. }
  157. /* 最近更新样式 */
  158. .recUpdate > div {
  159.   padding: 10px 10px;
  160.   box-sizing: border-box;
  161.   width: 95vw;
  162.   background-color: white;
  163.   display: flex;
  164.   flex-flow: row nowrap;
  165.   align-items: center;
  166.   justify-content: space-around;
  167.   margin-bottom: 10px;
  168. }
  169. .recUpdate > div > div {
  170.   width: 100%;
  171.   height: 100%;
  172. }
  173. .recUpdate > div > div > a > img {
  174.   max-width: 100%;
  175.   max-height: 100%;
  176. }
  177. /* 最近更新图片左边的描述文字样式 */
  178. .recUpdate > div > .desc {
  179.   height: 100px;
  180.   display: flex;
  181.   flex-flow: column nowrap;
  182.   justify-content: space-around;
  183.   margin: 0px 10px;
  184. }
  185. .recUpdate > div > .desc {
  186.   width: 100%;
  187.   height: 100%;
  188. }
  189. .recUpdate > div > .desc > a {
  190.   text-decoration: none;
  191.   color: #888888;
  192.   font-size: 3.6vw;
  193. }
  194. .recUpdate > div > .desc > a:hover {
  195.   color: coral;
  196. }
  197. .recUpdate > div > .desc > div {
  198.   font-size: 2.7vw;
  199.   color: #888888;
  200.   display: flex;
  201.   justify-content: space-between;
  202. }
  203. .recUpdate > div > .desc > div:last-of-type > span:first-of-type {
  204.   color: white;
  205.   background-color: #737373;
  206.   border-radius: 5px;
  207. }
  209. /* 最新文章样式 */
  210. .newArticle > div {
  211.   padding: 10px 10px;
  212.   box-sizing: border-box;
  213.   width: 95vw;
  214.   background-color: white;
  215.   display: flex;
  216.   flex-flow: row nowrap;
  217.   align-items: center;
  218.   justify-content: space-between;
  219.   margin-bottom: 10px;
  220. }
  221. .newArticle > div > div {
  222.   display: flex;
  223.   flex-flow: column nowrap;
  224.   justify-content: space-between;
  225.   margin-left: 10px;
  226. }
  227. .newArticle > div > div > a {
  228.   flex: 0 1 auto;
  229.   margin-top: 10px;
  230.   text-decoration: none;
  231.   color: #888888;
  232.   font-size: 3.6vw;
  233.   font-weight: bolder;
  234. }
  235. .newArticle > div > div {
  236.   width: 100%;
  237.   height: 100%;
  238. }
  239. .newArticle > div > div > a > img {
  240.   max-width: 100%;
  241.   max-height: 100%;
  242. }
  243. .newArticle > div > div > a:hover {
  244.   color: coral;
  245. }
  246. .newArticle > div > div > a:last-of-type {
  247.   font-size: 2.7vw;
  248.   font-weight: normal;
  249. }
  250. /* 最新文章中最后一个“更多内容”的样式 */
  251. .newArticle > div:last-of-type {
  252.   display: flex;
  253.   justify-content: center;
  254.   align-items: center;
  255.   height: 30px;
  256. }
  257. .newArticle > div:last-of-type > div > a {
  258.   text-decoration: none;
  259.   margin-top: 0px;
  260.   color: #888888;
  261.   font-size: 3.6vw;
  262.   font-weight: bolder;
  263. }
  264. .newArticle > div:last-of-type > div > a:hover {
  265.   color: coral;
  266. }
  267. /* 最新博文样式 */
  268. .newBlog > div {
  269.   padding: 10px 10px;
  270.   box-sizing: border-box;
  271.   width: 95vw;
  272.   background-color: white;
  273.   display: flex;
  274.   flex-flow: row nowrap;
  275.   align-items: center;
  276.   justify-content: space-between;
  277.   margin-bottom: 10px;
  278. }
  279. .newBlog > div:last-of-type {
  280.   justify-content: center;
  281. }
  282. .newBlog > div > a {
  283.   text-decoration: none;
  284.   margin-top: 0px;
  285.   color: #888888;
  286.   font-size: 3.6vw;
  287.   font-weight: bolder;
  288. }
  289. .newBlog > div > a:last-of-type {
  290.   font-weight: normal;
  291. }
  292. .newBlog > div:last-of-type > a {
  293.   font-weight: bolder;
  294. }
  295. .newBlog > div > a:hover {
  296.   color: coral;
  297. }
  298. /* 最新问答样式 */
  299. .newAskQue > div {
  300.   padding: 10px 10px;
  301.   box-sizing: border-box;
  302.   width: 95vw;
  303.   background-color: white;
  304.   display: flex;
  305.   flex-flow: row nowrap;
  306.   align-items: center;
  307.   justify-content: space-between;
  308.   margin-bottom: 10px;
  309. }
  310. .newAskQue > div:last-of-type {
  311.   justify-content: center;
  312. }
  313. .newAskQue > div > a {
  314.   text-decoration: none;
  315.   margin-top: 0px;
  316.   color: #888888;
  317.   font-size: 3.6vw;
  318.   font-weight: bolder;
  319. }
  320. .newAskQue > div > a:last-of-type {
  321.   font-weight: normal;
  322. }
  323. .newAskQue > div:last-of-type > a {
  324.   font-weight: bolder;
  325. }
  326. .newAskQue > div > a:hover {
  327.   color: coral;
  328. }
  329. /* 页脚样式 */
  330. footer {
  331.   display: flex;
  332.   align-items: center;
  333.   justify-content: space-around;
  334.   background-color: #eeeeee;
  335.   height: 35px;
  336.   /* position: relative; */
  337.   /* bottom: 0px; */
  338. }
  339. footer > a {
  340.   text-decoration: none;
  341.   color: #737373;
  342. }
  343. footer > a > span {
  344.   font-size: 3.6vw;
  345. }
  346. footer > a:hover {
  347.   color: coral;
  348. }
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