简体中文（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培训第九期线上班

涤尘
涤尘原创
2019年11月08日 17:31:44531浏览
  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>
  112.     <!--最新更新-->
  113.     <article class="recommend-1">
  114.     <h3>最新更新</h3>
  115.     <section>
  116.             <div>
  117.                 <a href=""><img src="static/images/zx1.jpg" alt=""></a>
  118.                 <span>
  119.                     <a href="">2019python自学视频</a>
  120.                     <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进...</p>
  121.                     <span><i>初级</i>1657次播放</span>
  123.                 </span>
  124.             </div>
  126.             <div>
  127.                 <a href=""><img src="static/images/zx2.png" alt=""></a>
  128.                 <span>
  129.                     <a href="">PHP开发免费公益直播课</a>
  130.                     <p>主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00...</p>
  131.                     <span><i>初级</i>1818次播放</span>
  132.             </span>
  133.             </div>
  134.             <div>
  135.                 <a href=""><img src="static/images/zx3.jpg" alt=""></a>
  136.                 <span>
  137.                     <a href="">从零开始到WEB响应式布局</a>
  138.                     <p>主重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解...</p>
  139.                     <span><i>初级</i>3119次播放</span>
  140.             </span>
  141.             </div>
  142.             <div>
  143.                 <a href=""><img src="static/images/zx4.png" alt=""></a>
  144.                 <span>
  145.                     <a href="">PHP文件基础操作</a>
  146.                     <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带...</p>
  147.                     <span><i>初级</i>1644次播放</span>
  148.             </span>
  149.             </div>
  150.             <div>
  151.                 <a href=""><img src="static/images/zx5.jpg" alt=""></a>
  152.                 <span>
  153.                     <a href="">memcache基础课程</a>
  154.                     <p>本课程带你从零认识memcache，让你在一小时左右轻松掌握memcache...</p>
  155.                     <span><i>初级</i>782次播放</span>
  156.             </span>
  157.             </div>
  158.             <div>
  159.                 <a href=""><img src="static/images/zx6.png" alt=""></a>
  160.                 <span>
  161.                     <a href="">微信小程序--企业微网站</a>
  162.                     <p>1，介绍小程序、开发者工具 2，介绍小程序文档 3，微官网项目 4，首页...</p>
  163.                     <span><i>初级</i>3508次播放</span>
  164.             </span>
  165.             </div>
  166.         </section>
  167.     </article>
  170.     <!--最新文章-->
  172.     <article class="recommend-2">
  173.     <h3>最新文章</h3>
  174.         <section>
  176.                 <a href="">
  177.                 <img src="static/images/wz1.jpg" alt="">
  178.                 <span>
  179.                    <span>重启阿里云ECS服务器实例</span> 
  180.                     <p>发布时间：2019-11-07</p>
  181.                 </span>
  182.                 </a>
  183.                 <a href="">
  184.                 <img src="static/images/wz2.jpg" alt="">
  185.                 <span>
  186.                    <span>重启阿里云ECS服务器实例</span> 
  187.                     <p>发布时间：2019-11-07</p>
  188.                 </span>
  189.                 </a>
  190.                 <a href="">
  191.                 <img src="static/images/wz3.jpg" alt="">
  192.                 <span>
  193.                    <span>重启阿里云ECS服务器实例</span> 
  194.                     <p>发布时间：2019-11-07</p>
  195.                 </span>
  196.                 </a>
  197.                 <a href="">
  198.                 <img src="static/images/wz4.jpg" alt="">
  199.                 <span>
  200.                    <span>重启阿里云ECS服务器实例</span> 
  201.                     <p>发布时间：2019-11-07</p>
  202.                 </span>
  203.                 </a>
  204.                 <a href="""><div><span>更多内容</span></div></a>
  206.         </section>
  207.     </article>
  209.     <!-- 最新博文 -->
  210.     <article class="recommend-3">
  211.     <h3>最新博文</h3>
  212.     <section>
  213.             <a href="">
  214.             <div>
  215.                  <h5>PHP学习第一天:软件安装篇</h5>
  216.                  <span>2019-11-08</span>
  217.                  </div>
  218.             </a>
  219.             <a href="">
  220.             <div>
  221.                  <h5>Linux系统CentOS报错：could not resolve host:mirrorlist.centos.org问题</h5>
  222.                  <span>2019-11-08</span>
  223.                  </div>
  224.             </a>
  225.             <a href="">
  226.             <div>
  227.                  <h5>thinkphp5.0.24前置操作的大小写问题</h5>
  228.                  <span>2019-11-08</span>
  229.                  </div>
  230.             </a>
  231.             <a href="">
  232.             <div>
  233.                  <h5>laravel-创建“控制器”和“模型”，使用模型方法获取数据库内容并输出--2019</h5>
  234.                  <span>2019-11-08</span>
  235.                  </div>
  236.             </a>
  237.             <a href="">
  238.             <div>
  239.                  <h5>MVC模式的工作原理--2019年10月31日</h5>
  240.                  <span>2019-11-08</span>
  241.                  </div>
  242.             </a>
  243.             <a href="">
  244.                 <div>
  245.                 <div>
  246.                 <span>更多内容</span>
  247.                 </div>
  248.                 </div>
  249.             </a>
  251.         </section>
  252.     </article>
  253. <!-- 最新问答 -->
  255. <article class="recommend-3">
  256.     <h3>最新问答</h3>
  257.     <section>
  258.             <a href="">
  259.             <div>
  260.                  <h5>为什么我的 Mac电脑用 safari看PHP中文网 视频都看不了</h5>
  261.                  <span>2019-11-08</span>
  262.                  </div>
  263.             </a>
  264.             <a href="">
  265.             <div>
  266.                  <h5>我写的哪里有错？请大神帮忙查看一下。</h5>
  267.                  <span>2019-11-08</span>
  268.                  </div>
  269.             </a>
  270.             <a href="">
  271.             <div>
  272.                  <h5>html翻译环境</h5>
  273.                  <span>2019-11-08</span>
  274.                  </div>
  275.             </a>
  276.             <a href="">
  277.             <div>
  278.                  <h5>sublimetext不可以开发这个吗</h5>
  279.                  <span>2019-11-08</span>
  280.                  </div>
  281.             </a>
  282.             <a href="">
  283.             <div>
  284.                  <h5>css伪类选择器怎么插入图片</h5>
  285.                  <span>2019-11-08</span>
  286.                  </div>
  287.             </a>
  288.             <a href="">
  289.                 <div>
  290.                 <div>
  291.                 <span>更多内容</span>
  292.                 </div>
  293.                 </div>
  294.             </a>
  296.         </section>
  297.     </article>
  299. </main>
  302. <!--底部-->
  303. <footer>
  304.     <a href=""><img src="static/font-icon/zhuye.png" alt="">
  305.         <span>主页</span></a>
  306.     <a href="">
  307.         <img src="static/font-icon/video.png" alt="">
  308.         <span>视频</span>
  309.     </a>
  310.     <a href="">
  311.         <img src="static/font-icon/luntan.png" alt="">
  312.         <span>社区</span>
  313.     </a>
  314.     <a href="">
  315.         <img src="static/font-icon/geren.png" alt="">
  316.         <span>我的</span>
  317.     </a>
  318. </footer>
  319. </body>
  320. </html>
  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. /*最新更新*/
  167. main > .recommend-1 > section {
  168.     display: flex;
  169.     flex-flow: column nowrap;
  170. }
  172. main > .recommend-1 > section > div {
  173.     background-color: #fff;
  174.     margin: 5px;
  176.     /*也转为弹性容器*/
  177.     display: flex;
  178.     flex-flow: row nowrap;
  179. }
  181. main > .recommend-1 > section > div img {
  182.     width: 350px;
  183.     height: 90px;
  184. }
  186. main > .recommend-1 > section > div > span {
  187.     display: flex;
  188.     /*文本垂直排列*/
  189.     flex-flow: column nowrap;
  190.     margin-top: 5px;
  191.     padding-left: 10px;
  192.     padding-right: 15px;
  194. }
  195. main > .recommend-1 > section > div > span > p {
  196.     font-size: 1px;
  197. }
  198. main > .recommend-1 > section > div > span > span {
  199.     display: flex;
  200.     justify-content: space-between;
  201.     font-size: smaller;
  203. }
  204. main > .recommend-1 > section > div > span  i {
  205.     font-style: normal;
  206.     background-color: #333333;
  207.     color: white;
  208.     border-radius: 8px;
  209.     padding: 0 5px;
  211. }
  213. /*最新文章*/
  214. main > .recommend-2 > section {
  215.     display: flex;
  216.     flex-flow: column nowrap;
  217. }
  220. main > .recommend-2 > section  > a{
  221.     background-color: #fff;
  222.     margin: 5px;
  223.     display: flex;
  224.     flex-flow: row-reverse nowrap;
  225. }
  226. main > .recommend-2 > section > a >img {
  227.     width: 220px;
  228.     height: 70px;
  229.     margin-top: 5px;
  230.     margin-bottom: 5px;
  231.     margin-right: 5px;
  232. }
  234. main > .recommend-2 > section > a > span {
  235.     display: flex;
  236.     /*文本垂直排列*/
  237.     flex-flow: column nowrap;
  238.     position: relative;
  239.     left: -48%;
  240.     margin-top: 10px;
  243. }
  244. main > .recommend-2 > section > a > span > p {
  245.     font-size: 1px;
  246. }
  247. main > .recommend-2 > section > a > span > span {
  249.     font-size: smaller;
  251. }
  252. main > .recommend-2 > section > a:last-of-type > div {
  253.     display: flex;
  255.     align-items: center;
  256.     justify-content: center;
  257.     flex: 1;
  258.     height: 50px;
  260. }
  261. /*最新博文*/
  263. main >.recommend-3 > section > a > div {
  264.     display: flex;
  265.     flex-flow: row nowrap;
  266.     justify-content: space-between;
  267.     background-color: white;
  268.     height: 50px;
  269.     margin-top: 10px;
  271. }
  272. main >.recommend-3 > section > a > div > span {
  273.     padding: 10px 5px;
  274.     font-size: 1px;
  275. }
  276. main >.recommend-3 > section > a > div > h5 {
  277.     margin-left: 10px;
  278.     margin-top: 8px;
  279. }
  280. main >.recommend-3 > section > a > div > div {
  281.     display: flex;
  283.     align-items: center;
  284.     justify-content: center;
  285.     flex: 1;
  286. }
  287. /*底部*/
  289. footer {
  290.     /*固定定位*/
  291.     position: fixed;
  292.     bottom: 0;
  294.     border-top: 1px solid #BBBBBB;
  295.     /*固定定位元素必须设置宽度与高度*/
  296.     width: 100%;
  297.     height: 42px;
  298.     background: #EEEEEE;
  299.     color: white;
  302.     /*转为Flex容器,设置元素排列*/
  303.     display: flex;
  305.     /*元素主轴分散,两端平均对齐*/
  306.     justify-content: space-around;
  307.     /*元素交叉轴居中对齐*/
  308.     align-items: center;
  309. }
  310. footer > a > img {
  311.     height: 16px;
  312.     width: 16px;
  313. }
  314. footer > a {
  315.     display: flex;
  316.     flex-flow: column wrap;
  317.     align-items: center;
  318. }




总结：

通过对flex布局实战的练习，发现了很多问题，第一点：脑子中有思路，就是做的时候不知道怎么写，这应该是基础知识不太牢固，第二点：关于布局时候，最好先画给草图，了解先后顺序，这样在做容器嵌套不至于乱，第三点：关于容器的直接子元素问题，一定要是其直接子元素，否则无效，被坑过多次！关于老师讲的很多知识点在实际开发中，有些用不到，但要知道，说不准什么时间就要用到了！总之还是要多写 多练 多踩坑，不要走冤路！通过对flex布局实战的练习，发现了很多问题，第一点：脑子中有思路，就是做的时候不知道怎么写，这应该是基础知识不太牢固，第二点：关于布局时候，最好先画给草图，了解先后顺序，这样在做容器嵌套不至于乱，第三点：关于容器的直接子元素问题，一定要是其直接子元素，否则无效，被坑过多次！关于老师讲的很多知识点在实际开发中，有些用不到，但要知道，说不准什么时间就要用到了！总之还是要多写 多练 多踩坑，不要走冤路！



上一条：Flex实战--PHP9期线上班下一条：Android监听U盘插拔广播,并获取路径和卷标名称
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多