search

博客列表 >php中文手机网布局-php培训线上九期班

php中文手机网布局-php培训线上九期班

邯郸易住宋至刚
邯郸易住宋至刚原创
2019年11月16日 23:55:33827浏览

PHP中文网手机端首页

HTML代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>php中文网手机版首页</title>
  6.     <link rel="stylesheet" href="static/css/init.css">
  7.     <link rel="stylesheet" href="static/css/style.css">
  8. </head>
  9. <body>
  10. <!--布局原则: 宽度自适应,高度固定-->
  12. <!--顶部固定定位-->
  13. <header>
  14.     <img src="static/images/user-pic.jpeg" alt="">
  15.     <img src="static/images/logo.png" alt="">
  16.     <img src="static/images/user-nav.jpg" alt="">
  17. </header>
  20. <!--banner轮播图,这里用图片暂时代替-->
  21. <div class="banner">
  22.     <img src="static/images/banner.jpg" alt="">
  23. </div>
  25. <!--导航区-->
  26. <nav>
  27.     <ul>
  28.         <li>
  29.             <a href="">
  30.                 <img src="static/images/html.png" alt="">
  31.                 <span>HTML/CSS</span>
  32.             </a>
  33.         </li>
  34.         <li>
  35.             <a href="">
  36.                 <img src="static/images/JavaScript.png" alt="">
  37.                 <span>JavaScript</span>
  38.             </a>
  39.         </li>
  40.         <li>
  41.             <a href="">
  42.                 <img src="static/images/code.png" alt="">
  43.                 <span>服务端</span>
  44.             </a>
  45.         </li>
  46.         <li>
  47.             <a href="">
  48.                 <img src="static/images/sql.png" alt="">
  49.                 <span>数据库</span>
  50.             </a>
  51.         </li>
  52.     </ul>
  54.     <ul>
  55.         <li>
  56.             <a href=""><img src="static/images/app.png" alt="">
  57.                 <span>移动端</span>
  58.             </a>
  59.         </li>
  60.         <li>
  61.             <a href="">
  62.                 <img src="static/images/manual.png" alt="">
  63.                 <span>手册</span>
  64.             </a>
  65.         </li>
  66.         <li>
  67.             <a href=""><img src="static/images/tool2.png" alt="">
  68.                 <span>工具</span>
  69.             </a>
  70.         </li>
  71.         <li>
  72.             <a href="">
  73.                 <img src="static/images/live.png" alt="">
  74.                 <span>直播</span>
  75.             </a>
  76.         </li>
  77.     </ul>
  78. </nav>
  81. <!--    课程区-->
  82. <main>
  83.     <!--    推荐课程-->
  84.     <article class="recommend">
  85.         <h3>推荐课程</h3>
  86.         <section>
  87.             <a href=""><img src="static/images/tjkc1.jpg" alt=""></a>
  88.             <a href=""><img src="static/images/tjkc2.jpg" alt=""></a>
  89.         </section>
  91.         <section>
  92.             <div>
  93.                 <a href=""><img src="static/images/tjkc3.jpg" alt=""></a>
  94.                 <span>
  95.                     <a href="">CI框架30分钟极速入门</a>
  96.                     <span><i>中级</i>49738次播放</span>
  98.                 </span>
  99.             </div>
  101.             <div>
  102.                 <a href=""><img src="static/images/tjkc4.jpg" alt=""></a>
  103.                 <span>
  104.                     <a href="">2018前端入门基础</a>
  105.                     <span><i>初级</i>209952次播放</span>
  106.             </span>
  107.             </div>
  108.         </section>
  109.     </article>
  111.     <!--最新更新-->
  112.     <!--可以直接复制推荐课程的代码, 只需要将内容和素材换一下即可-->
  114.     <article class="update">
  115.         <h3>最新更新</h3>
  117.         <section>
  118.             <div>
  119.                 <a href=""><img src="static/images/5db2b53c67bca626.jpg" alt=""></a>
  120.                 <span>
  121.                     <a href="">2019python自学视频</a>
  122.                     <span><i>中级</i>49738次播放</span>
  124.                 </span>
  125.             </div>
  127.             <div>
  128.                 <a href=""><img src="static/images/5da7e9b7895ed229.png" alt=""></a>
  129.                 <span>
  130.                     <a href="">PHP开发免费公益直播课</a>
  131.                     <span><i>初级</i>209952次播放</span>
  132.             </span>
  133.             </div>
  135.             <div>
  136.                 <a href=""><img src="static/images/5da6a50535529903.jpg" alt=""></a>
  137.                 <span>
  138.                     <a href="">从零开始到WEB响应式布局</a>
  139.                     <span><i>中级</i>49738次播放</span>
  141.                 </span>
  142.             </div>
  144.             <div>
  145.                 <a href=""><img src="static/images/5da51b8ff1224244.png" alt=""></a>
  146.                 <span>
  147.                     <a href="">PHP文件基础操作</a>
  148.                     <span><i>初级</i>209952次播放</span>
  149.             </span>
  150.             </div>
  152.             <div>
  153.                 <a href=""><img src="static/images/5da16c1d7f658408.jpg" alt=""></a>
  154.                 <span>
  155.                     <a href="">memcache基础课程</a>
  156.                     <span><i>中级</i>49738次播放</span>
  158.                 </span>
  159.             </div>
  161.             <div>
  162.                 <a href=""><img src="static/images/5d9ec555ee63b448.png" alt=""></a>
  163.                 <span>
  164.                     <a href="">微信小程序--企业微网站</a>
  165.                     <span><i>初级</i>209952次播放</span>
  166.             </span>
  167.             </div>
  168.         </section>
  169.     </article>
  173.     <!--最新文章-->
  174.     <!--这个模块与上面的最新课程几乎是一样的, 只是左右顺序交换了一个,样式略有不同-->
  175. <article class="wenzhang">
  176.         <h3>最新文章</h3>
  178.         <section>
  179.             <div>
  180.                 <span>
  181.                     <a href="">php常量存储的数据只能是哪些数据类型</a>
  182.                     <span>发布时间：2019-11-16</span>
  184.                 </span>
  185.                 <a href=""><img src="static/images/5dcfbc87dccc4570.jpg" alt=""></a>
  187.             </div>
  189.             <div>
  190.                 <span>
  191.                     <a href="">php怎么将字符串炸开</a>
  192.                     <span>发布时间：2019-11-16</span>
  193.             </span>
  194.                 <a href=""><img src="static/images/5dcfbc22304e6935.jpg" alt=""></a>
  196.             </div>
  198.             <div>
  200.                 <span>
  201.                     <a href="">从零开始到WEB响应式布局</a>
  202.                     <span>发布时间：2019-11-16</span>
  204.                 </span>
  205.                 <a href=""><img src="static/images/5dcfc9e482387681.jpg" alt=""></a>
  207.             </div>
  209.             <div>
  210.                 <span>
  211.                     <a href="">PHP文件基础操作</a>
  212.                     <span>发布时间：2019-11-16</span>
  213.                 </span>
  214.                 <a href=""><img src="static/images/5dcfc8e9d352e924.jpg" alt=""></a>
  216.             </div>
  218.             <div>
  219.                 <span>
  220.                     <a href="">memcache基础课程</a>
  221.                     <span>发布时间：2019-11-16</span>
  223.                 </span>
  224.                 <a href=""><img src="static/images/5d8ad5d450899652.jpg" alt=""></a>
  226.             </div>
  228.         </section>
  229.     </article>
  230.     <!-- 最新博文,最新问答,做为作业,交给大家课后完成 -->
  232.     <article class="blog">
  233.         <h3>最新博文</h3>
  235.         <section>
  236.             <div>
  238.                     <a href="">2019python自学视频</a>
  239.                     <span>2019-11-16</span>
  242.             </div>
  244.             <div>
  246.                     <a href="">PHP开发免费公益直播课</a>
  247.                     <span>2019-11-16</span>
  249.             </div>
  251.             <div>
  253.                     <a href="">从零开始到WEB响应式布局</a>
  254.                     <span>2019-11-16</span>
  257.             </div>
  259.             <div>
  261.                     <a href="">PHP文件基础操作</a>
  262.                     <span>2019-11-16</span>
  264.             </div>
  266.             <div>
  268.                     <a href="">memcache基础课程</a>
  269.                     <span>2019-11-16</span>
  272.             </div>
  274.         </section>
  275.     </article>
  277.     <article class="ask">
  278.         <h3>最新问答</h3>
  280.         <section>
  281.             <div>
  283.                     <a href="">2019python自学视频</a>
  284.                     <span>2019-11-16</span>
  287.             </div>
  289.             <div>
  291.                     <a href="">PHP开发免费公益直播课</a>
  292.                     <span>2019-11-16</span>
  294.             </div>
  296.             <div>
  298.                     <a href="">从零开始到WEB响应式布局</a>
  299.                     <span>2019-11-16</span>
  302.             </div>
  304.             <div>
  306.                     <a href="">PHP文件基础操作</a>
  307.                     <span>2019-11-16</span>
  309.             </div>
  311.             <div>
  313.                     <a href="">memcache基础课程</a>
  314.                     <span>2019-11-16</span>
  317.             </div>
  319.         </section>
  320.     </article>
  323. </main>
  326. <!--下面咱们做一下底部,底部与头部类似,也是固定定位实现-->
  327. <footer>
  328.     <a href=""><img src="static/font-icon/zhuye.png" alt=""><span>主页</span></a>
  329.     <a href="">
  330.         <img src="static/font-icon/video.png" alt="">
  331.         <span>视频</span>
  332.     </a>
  333.     <a href="">
  334.         <img src="static/font-icon/luntan.png" alt="">
  335.         <span>社区</span>
  336.     </a>
  337.     <a href="">
  338.         <img src="static/font-icon/geren.png" alt="">
  339.         <span>我的</span>
  340.     </a>
  341. </footer>
  342. </body>
  343. </html>

CSS代码：

  1. /*************** 头部样式 ***************/
  2. header {
  3.     /*固定定位*/
  4.     position: fixed;
  5.     top: 0;
  8.     /*固定定位元素必须设置宽度与高度*/
  9.     width: 100%;
  10.     height: 42px;
  11.     background: #444444;
  12.     color: white;
  14.     /*设置最小尺寸*/
  15.     min-width: 320px;
  16.     max-width: 768px;
  18.     /*转为Flex容器,设置元素排列*/
  19.     display: flex;
  20.     /*元素主轴分散,两端对齐*/
  21.     justify-content: space-between;
  22.     /*元素交叉轴居中对齐*/
  23.     align-items: center;
  24. }
  27. /*第一张,最后一设置通用样式*/
  28. header > img:first-of-type,
  29. header > img:last-of-type {
  30.     width: 26px;
  31.     height: 26px;
  32.     margin: 5px;
  33. }
  34. /*第一张用户头像应该是正圆*/
  35. header > img:first-of-type {
  36.     border-radius: 50%;  /* 13px */
  38. }
  39. /*设置中间LOGO样式*/
  40. header >  img {
  41.     width: 94px;
  42. }
  46. /*************** 轮播图设置 ***************/
  48. .banner {
  49.     display: flex;
  50.     height: 200px;
  51. }
  53. /*************** 导航区 ***************/
  55. nav {
  56.     background-color: white;
  57.     display: flex;
  58.     /*主轴为垂直方向, 禁止换行*/
  59.     flex-flow: column nowrap;
  60. }
  62. /*图片默认大小*/
  63. nav img {
  64.     width: 45px;
  65.     height: 49px;
  66. }
  68. /*每一行导航都应该是一个弹性容器以方便布局*/
  69. nav > ul {
  70.     display: flex;
  71.     /*每个菜单项水平且不换行*/
  72.     flex-flow: row nowrap;
  73. }
  75. /*每一菜单项均分全部空间*/
  76. nav ul li {
  77.     flex: 1;
  79. }
  81. /*图片与文本应该做为一个组件,统一设置*/
  82. nav ul li a {
  83.     display: flex;
  84.     /*图片, 链接文本垂直排列*/
  85.     flex-flow: column wrap;
  86.     /*交叉轴上居中显示*/
  87.     align-items: center;
  88.     /*外边距可以使菜单项之间不太拥挤*/
  89.     margin: 10px;
  90. }
  92. /*菜单项文本与上面图标有一个间隙*/
  93. nav ul li a span {
  94.     margin-top: 5px;
  95. }
  98. /*************** 主体内容区 ***************/
  102. /******** 推荐课程区 *******/
  103. main {
  104.     display: flex;
  105.     flex-flow: column nowrap;
  106. }
  108. /*设置水平排列的推荐课程*/
  109. main > .recommend > section:first-of-type {
  110.     display: flex;
  111.     flex-flow: row nowrap;
  112. }
  114. /*每个课程图片平分全部空间*/
  115. main > .recommend > section:first-of-type > a {
  116.     margin: 5px;
  117.     flex: 1;
  118. }
  120. /*设置图片高度*/
  121. main > .recommend > section:first-of-type > a > img {
  122.     height: 90px;
  123. }
  126. /*设置垂直排列的推荐课程*/
  127. main > .recommend > section:last-of-type {
  128.     display: flex;
  129.     flex-flow: column nowrap;
  130. }
  132. main > .recommend > section:last-of-type > div {
  133.     background-color: #fff;
  134.     margin: 5px;
  136.     /*也转为弹性容器*/
  137.     display: flex;
  138.     flex-flow: row nowrap;
  139. }
  141. main > .recommend > section:last-of-type > div img {
  142.     width: 350px;
  143.     height: 90px;
  144. }
  146. main > .recommend > section:last-of-type > div > span {
  147.     display: flex;
  148.     /*文本垂直排列*/
  149.     flex-flow: column nowrap;
  150.     margin-top: 5px;
  151.     padding-left: 10px;
  152. }
  154. main > .recommend > section:last-of-type > div > span  i {
  155.     font-style: normal;
  156.     background-color: #333333;
  157.     color: white;
  158.     border-radius: 4px;
  159.     padding: 0 5px;
  160.     font-size: smaller;
  161. }
  163. /*最新更新*/
  164. /*设置水平排列的推荐课程*/
  166. /*设置垂直排列的推荐课程*/
  167. main > .update > section {
  168.     /* border: 5px solid red; */
  169.     display: flex;
  170.     flex-flow: column nowrap;
  171. }
  173. main > .update > section > div {
  174.     background-color: #fff;
  175.     margin: 5px;
  177.     /*也转为弹性容器*/
  178.     display: flex;
  179.     flex-flow: row nowrap;
  180. }
  182. main > .update > section > div img {
  183.     width: 350px;
  184.     height: 90px;
  185. }
  187. main > .update > section > div > span {
  188.     display: flex;
  189.     /*文本垂直排列*/
  190.     flex-flow: column nowrap;
  191.     margin-top: 5px;
  192.     padding-left: 10px;
  193. }
  195. main > .update> section > div > span  i {
  196.     font-style: normal;
  197.     background-color: #333333;
  198.     color: white;
  199.     border-radius: 4px;
  200.     padding: 0 5px;
  201.     font-size: smaller;
  202. }
  203. /* 最新文章 */
  205. /*设置垂直排列的推荐课程*/
  206. main > .wenzhang> section {
  207.     /* border: 5px solid red; */
  208.     display: flex;
  209.     flex-flow: column nowrap;
  210. }
  212. main > .wenzhang > section > div {
  213.     background-color: #fff;
  214.     margin: 5px;
  216.     /*也转为弹性容器*/
  217.     display: flex;
  218.     flex-flow: row nowrap;
  219.     justify-content: space-between;
  220. }
  222. main > .wenzhang > section > div img {
  223.     width: 300px;
  224.     height: 80px;
  225. }
  227. main > .wenzhang > section > div > span {
  228.     display: flex;
  229.     /*文本垂直排列*/
  230.     flex-flow: column nowrap;
  231.     margin-top: 5px;
  232.     padding-left: 10px;
  233. }
  235. main > .wenzhang> section > div > span  i {
  236.     font-style: normal;
  237.     background-color: #333333;
  238.     color: white;
  239.     border-radius: 4px;
  240.     padding: 0 5px;
  241.     font-size: smaller;
  242. }
  244. /* blog */
  246. /*设置垂直排列的推荐课程*/
  247. main > .blog> section {
  248.     /* border: 5px solid red; */
  249.     display: flex;
  250.     flex-flow: column nowrap;
  251. }
  253. main > .blog > section > div {
  254.     height: 60px;
  255.     background-color: #fff;
  256.     margin: 5px;
  257.     padding-left: 10px;
  259.     /*也转为弹性容器*/
  260.     display: flex;
  261.     flex-flow: row nowrap;
  262.     justify-content: space-between;
  263.     align-items: center;
  264. }
  267. main > .blog > section > div > span {
  268.     display: flex;
  269.     /*文本垂直排列*/
  270.     flex-flow: row nowrap;
  271.     justify-content: space-between;
  272.     margin-top: 5px;
  273.     padding-left: 10px;
  274. }
  277. /* 最新问答 */
  279. /*设置垂直排列的推荐课程*/
  280. main > .ask > section {
  281.     /* border: 5px solid red; */
  282.     display: flex;
  283.     flex-flow: column nowrap;
  284. }
  286. main > .ask > section > div {
  287.     height: 60px;
  288.     background-color: #fff;
  289.     margin: 5px;
  290.     padding: 10px;
  292.     /*也转为弹性容器*/
  293.     display: flex;
  294.     flex-flow: row nowrap;
  295.     justify-content: space-between;
  296.     align-items: center;
  297. }
  300. main > .ask > section > div > span {
  301.     display: flex;
  302.     /*文本垂直排列*/
  303.     flex-flow: row nowrap;
  304.     justify-content: space-between;
  306.     margin-top: 5px;
  307.     padding-left: 10px;
  308. }
  310. /*底部*/
  312. /*暂时将高度设置为2000px,让滚动条出来*/
  313. body {
  314.     heigh: 2000px;
  315. }

运行结果如下图：

手抄代码如下：

上一条：if else，switch判断语句，do..while，while，for循环，form传参练习，制作PHP模版 - 20191116下一条：第5章 php基础5- PHP培训九期线上班11.15
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多