简体中文（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框架仿PHP中文网手机端首页

使用flex框架仿PHP中文网手机端首页

王娇
王娇原创
2020年04月18日 15:53:33700浏览

演示链接

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. }
上一条：框模型相关知识下一条：thinkphp5.6源码阅读1
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多