简体中文（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实战-九期线上班

媒体查询简介与Flex实战-九期线上班

Content っ
Content っ 原创
2019年11月12日 07:17:27541浏览

1.媒体查询部分

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>媒体查询</title>
  9.     <link rel="stylesheet" href="css/style1.css">
  10. </head>
  11. <body>
  12. <div class="nav-icon"><img src="images/img1.png" alt=""></div>
  13. <div class="leftDiv">
  14.     <ul>
  15.         <li>导航1</li>
  16.         <li>导航2</li>
  17.         <li>导航3</li>
  18.         <li>导航4</li>
  19.         <li>导航5</li>
  20.     </ul>
  21. </div>
  22. <div class="rightDiv">
  23.     <ul>
  24.         <li>最新产品1</li>
  25.         <li>最新产品2</li>
  26.         <li>最新产品3</li>
  27.         <li>最新产品4</li>
  28.         <li>最新产品5</li>
  29.         <li>最新产品6</li>
  30.         <li>最新产品7</li>
  31.         <li>最新产品8</li>
  32.     </ul>
  33. </div>
  35. </body>
  36. </html>
  1. .nav-icon > img{
  2.     width: 40px;
  3.     height: 40px;
  4. }
  5. .leftDiv{
  6.     float: left;
  7. }
  8. .rightDiv{
  9.     float: left;
  10. }
  12. /*手机*/
  13. @media (max-width: 788px) {
  15.     .nav-icon > img{
  16.         display: block;
  17.     }
  18.     body{
  19.         background-color: lightseagreen;
  20.     }
  21. }
  22. /*pad*/
  23. @media (min-width: 789px ) and (max-width: 920px){
  24.     .nav-icon > img{
  25.         display: none;
  26.     }
  27.     .leftDiv{
  28.         display: none;
  29.     }
  30.     body{
  31.         background-color: lightcoral;
  32.     }
  33. }
  34. /*pc*/
  35. @media (min-width: 921px) and (max-width: 1200px) {
  36.     .nav-icon > img{
  37.         display: none;
  38.     }
  39.     .leftDiv{
  40.         display: none;
  41.     }
  42.     body{
  43.         background-color: lightgreen;
  44.     }
  45. }
  47. @media (min-width: 1200px) {
  48.     .nav-icon > img{
  49.         display: none;
  50.     }
  51.     .leftDiv{
  52.         display: none;
  53.     }
  54.     body{
  55.         background-color: lightsteelblue;
  56.     }
  57. }

运行效果Phone&pad

2.将中间导航菜单区的代码手抄至少一遍, 并给每一行代码加上注释
HTML5部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>PHP中文网手机端</title>
  6.     <link rel="stylesheet" href="css/init.css">
  7.     <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10.     <!--头部标题区-->
  11.     <header>
  12.         <img src="images/user-pic.jpeg" alt="">
  13.         <img src="images/logo.png" alt="">
  14.         <img src="images/user-nav.jpg" alt="">
  15.     </header>
  16.     <!--轮播图-->
  17.     <div class="banner">
  18.         <img src="images/banner.jpg" alt="">
  19.     </div>
  20.     <!--导航区-->
  21.     <!--1.先将整个导航弄成一个盒子 -->
  22.     <!--2.有上下两排(两个弹性盒子)，每一排有4个li-->
  23.     <!--3.li里有个可点击整块的a标签-->
  24.     <!--4.a标签里有img和文本-->
  25.     <nav>
  26.         <!--第一排-->
  27.         <ul>
  28.             <li>
  29.                 <a href="">
  30.                     <img src="images/html.png" alt="">
  31.                     <span>HTML/CSS</span>
  32.                 </a>
  33.             </li>
  34.             <li>
  35.                 <a href="">
  36.                     <img src="images/JavaScript.png" alt="">
  37.                     <span>JavaScript</span>
  38.                 </a>
  39.             </li>
  40.             <li>
  41.                 <a href="">
  42.                     <img src="images/code.png" alt="">
  43.                     <span>服务器</span>
  44.                 </a>
  45.             </li>
  46.             <li>
  47.                 <a href="">
  48.                     <img src="images/sql.png" alt="">
  49.                     <span>数据库</span>
  50.                 </a>
  51.             </li>
  52.         </ul>
  53.         <!--第二排-->
  54.         <ul>
  55.             <li>
  56.                 <a href="">
  57.                     <img src="images/app.png" alt="">
  58.                     <span>移动端</span>
  59.                 </a>
  60.             </li>
  61.             <li>
  62.                 <a href="">
  63.                     <img src="images/manual.png" alt="">
  64.                     <span>手册</span>
  65.                 </a>
  66.             </li>
  67.             <li>
  68.                 <a href="">
  69.                     <img src="images/tool2.png" alt="">
  70.                     <span>工具</span>
  71.                 </a>
  72.             </li>
  73.             <li>
  74.                 <a href="">
  75.                     <img src="images/live.png" alt="">
  76.                     <span>直播</span>
  77.                 </a>
  78.             </li>
  79.         </ul>
  80.     </nav>
  81.     <!--主体内容区域-->
  82.     <main>
  83.         <!--推荐课程-->
  84.         <article class="recommend">
  85.             <h3>推荐课程</h3>
  86.             <section>
  87.                 <a href=""><img src="images/tjkc1.jpg" alt=""></a>
  88.                 <a href=""><img src="images/tjkc2.jpg" alt=""></a>
  89.             </section>
  90.             <section>
  91.                 <div>
  92.                     <a href=""><img src="images/tjkc3.jpg" alt=""></a>
  93.                     <span>
  94.                         <a href="">CI框架30分钟极速入门</a>
  95.                         <span><i>中级</i>52972次播放</span>
  96.                     </span>
  97.                 </div>
  98.                 <div>
  99.                     <a href=""><img src="images/tjkc4.jpg" alt=""></a>
  100.                     <span>
  101.                         <a href="">2018前端入门基础</a>
  102.                         <span><i>中级</i>234690次播放</span>
  103.                     </span>
  104.                 </div>
  105.             </section>
  106.         </article>
  107.         <!--最新更新-->
  108.         <article class="newUpdate">
  109.             <h3>最新更新</h3>
  110.             <section>
  111.                 <div>
  112.                     <a href=""><img src="images/new1.jpg" alt=""></a>
  113.                     <div>
  114.                         <a href="">2019python自学视频</a>
  115.                         <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入python世界，自学python的一份好课程，兄弟连课程</p>
  116.                         <span><i>初级</i>2412次播放</span>
  117.                     </div>
  118.                 </div>
  119.                 <div>
  120.                     <a href=""><img src="images/new2.png" alt=""></a>
  121.                     <div>
  122.                         <a href="">PHP开发免费公益直播课</a>
  123.                         <p>hp中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 主题：如何高效的学习一门新技术？ 具体内容：1. 2020了, 还有哪些值得学习的新技术? 2.如何高效的学习前端开发? 3.如果高效的学习PHP开发?4.phpStudy V8 新功能介绍与演示 5.小皮面板功能介绍</p>
  124.                         <span><i>初级</i>1799次播放</span>
  125.                     </div>
  126.                 </div>
  127.                 <div>
  128.                     <a href=""><img src="images/new3.png" alt=""></a>
  129.                     <div>
  130.                         <a href="">从零开始到WEB响应式布局</a>
  131.                         <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
  132.                         <span><i>初级</i>3399次播放</span>
  133.                     </div>
  134.                 </div>
  135.             </section>
  136.         </article>
  137.         <!--最新文章-->
  138.         <article class="newArticles">
  139.             <h3>最新文章</h3>
  140.             <section>
  141.                 <div>
  142.                     <div>
  143.                         <a href="">PHP如何去除数组中的空值？（图文+视频）</a>
  144.                         <span>发布时间：2019-10-09</span>
  145.                     </div>
  146.                     <a href=""><img src="images/articles1.png" alt=""></a>
  147.                 </div>
  148.                 <div>
  149.                     <div>
  150.                         <a href="">PHP冒泡排序算法是怎么实现的？（图文+视频）</a>
  151.                         <span>发布时间：2019-10-08</span>
  152.                     </div>
  153.                     <a href=""><img src="images/articles2.png" alt=""></a>
  154.                 </div>
  155.                 <div>
  156.                     <div>
  157.                         <a href="">ThinkPHP5.1框架怎么通过Composer下载安装？（图文+视频）</a>
  158.                         <span>发布时间：2019-10-07</span>
  159.                     </div>
  160.                     <a href=""><img src="images/articles3.png" alt=""></a>
  161.                 </div>
  162.                 <div>
  163.                     <span>查看更多</span>
  164.                 </div>
  165.             </section>
  166.         </article>
  167.         <!--最新博文-->
  168.         <article class="newBlog">
  169.             <h3>最新博文</h3>
  170.             <section>
  171.                 <div>
  172.                     <div>
  173.                         <a href="">移动端 、手机端、去掉横向滚动条 亲测生效！！！</a>
  174.                         <span>2019-11-10</span>
  175.                     </div>
  176.                 </div>
  177.                 <div>
  178.                     <div>
  179.                         <a href="">PHP学习第8天:制作一个PHP中文网手机版</a>
  180.                         <span>2019-11-08</span>
  181.                     </div>
  182.                 </div>
  183.                 <div>
  184.                     <div>
  185.                         <a href="">感谢朱老师细心教导，让我们快速入门，感谢PHP中文网!!!</a>
  186.                         <span>2019-11-06</span>
  187.                     </div>
  188.                 </div>
  189.                 <div>
  190.                     <span>查看更多</span>
  191.                 </div>
  192.             </section>
  193.         </article>
  194.         <!--最新最新问答-->
  195.         <article class="newAnswer">
  196.             <h3>最新问答</h3>
  197.             <section>
  198.                 <div>
  199.                     <div>
  200.                         <a href="">经常忘记写属性名字怎么办？</a>
  201.                         <span>2019-10-20</span>
  202.                     </div>
  203.                 </div>
  204.                 <div>
  205.                     <div>
  206.                         <a href="">加了底部怎么让中间区域拉到区域变大？</a>
  207.                         <span>2019-10-18</span>
  208.                     </div>
  209.                 </div>
  210.                 <div>
  211.                     <div>
  212.                         <a href="">感谢朱老师细心教导，让我们快速入门，感谢PHP中文网!!!</a>
  213.                         <span>2019-10-16</span>
  214.                     </div>
  215.                 </div>
  216.                 <div>
  217.                     <span>查看更多</span>
  218.                 </div>
  219.             </section>
  220.         </article>
  221.     </main>
  222.     <!--页尾-->
  223.     <footer>
  224.         <a href="">
  225.             <img src="font-icon/zhuye.png" alt="">
  226.             <span>主页</span>
  227.         </a>
  228.         <a href="">
  229.             <img src="font-icon/video.png" alt="">
  230.             <span>视频</span>
  231.         </a>
  232.         <a href="">
  233.             <img src="font-icon/luntan.png" alt="">
  234.             <span>社区</span>
  235.         </a>
  236.         <a href="">
  237.             <img src="font-icon/geren.png" alt="">
  238.             <span>我的</span>
  239.         </a>
  240.     </footer>
  241. </body>
  242. </html>

css部分

  1. /**************设置通用部分*************/
  2. /*设置section和h3上边距*/
  3. main > article > section{
  4.     margin-top: -15px;
  5. }
  6. /*设置h3左边距*/
  7. main > article > h3{
  8.     margin-left: 5px;
  9. }
  11. /**************设置头部头像和菜单*************/
  12. header{
  13.     /*固定定位*/
  14.     position: fixed;
  15.     top: 0;
  16.     width: 100%;
  17.     height: 42px;
  18.     background-color: #444;
  19.     color: white;
  20.     /*设置尺寸才会显示*/
  21.     min-width: 320px;
  22.     max-width: 768px;
  23.     /*转为容器*/
  24.     display: flex;
  25.     /*主轴两端对齐*/
  26.     justify-content: space-between;
  27.     align-items: center;
  28. }
  29. header >img:first-of-type,
  30. header >img:last-of-type{
  31.     width: 26px;
  32.     height: 26px;
  33.     margin: 5px;
  34. }
  35. header >img:first-of-type{
  36.     border-radius: 50%;
  37. }
  38. header > img{
  39.     width: 94px;
  40. }
  42. /**************设置轮播图************/
  43. .banner{
  44.     display: flex;
  45.     height: 200px;
  46. }
  48. /**************导航区**************/
  49.  nav{
  50.      background-color: #fff;
  51.      /*让整个nav变成弹性容器*/
  52.      display: flex;
  53.      /*排列方向 垂直排列不换行*/
  54.      flex-flow: column nowrap;
  55.  }
  56. /*设置img宽高*/
  57.  nav img{
  58.      width: 45px;
  59.      height: 49px;
  60.  }
  61. /*将第一排第二排转为弹性容器*/
  62.  nav > ul{
  63.      display: flex;
  64.      /*水平排列 不换行*/
  65.      flex-flow: row nowrap;
  66.  }
  67.  nav ul li {
  68.      /*让li充满整个区域*/
  69.      flex: 1;
  70.  }
  71. /*设置最里面的a标签*/
  72.  nav ul li a{
  73.      /*转为弹性容器*/
  74.      display: flex;
  75.      /*垂直排列并且换行,文字在图片下面*/
  76.      flex-flow: column wrap;
  77.      /*设置a容器居中*/
  78.      align-items: center;
  79.      /*添加一下边距，不拥挤*/
  80.      margin: 10px;
  81.  }
  82. /*设置文本*/
  83. nav ul li a span{
  84.     /*和图片5像素的边距更美观*/
  85.     margin-top: 5px;
  86. }
  88. /*************主题内容区域***************/
  89. /*1.设置整个推荐课程的容器*/
  90. .recommend{
  91.     /*转为弹性容器*/
  92.     display: flex;
  93.     /*有两排 一排图片链接,二排图片文字，所以垂直排列换行*/
  94.     flex-flow: column wrap;
  95. }
  96. /*设置第一排图片链接*/
  97. .recommend > section:first-of-type{
  98.     /*转为弹性容器*/
  99.     display: flex;
  100.     /*两个图片水平排列，不换行*/
  101.     flex-flow: row nowrap;
  102. }
  103. /*设置第一排中的图片高度*/
  104. .recommend > section:first-of-type > a > img{
  105.     height: 90px;
  106. }
  107. /*设置第一排中的a标签平分吃掉整个空间*/
  108. .recommend > section:first-of-type > a{
  109.     flex: 1;
  110.     margin: 5px;
  111. }
  112. /*设置第二排图片文字链接*/
  113. .recommend > section:last-of-type{
  114.     /*转为弹性容器*/
  115.     display: flex;
  116.     /*垂直排列*/
  117.     flex-flow: column nowrap;
  118. }
  119. /*设置图文链接弹性容器*/
  120. .recommend > section:last-of-type > div{
  121.     /*转为弹性容器*/
  122.     display: flex;
  123.     /*图片在左边,文字介绍在右边,水平排列不换行*/
  124.     flex-flow: row nowrap;
  125.     /*添加背景色*/
  126.     background-color: #fff;
  127.     /*添加边距*/
  128.     margin: 5px;
  129. }
  130. /*设置右边文字标题、难度、播放量*/
  131. .recommend > section:last-of-type > div > span{
  132.     /*转为弹性容器*/
  133.     display: flex;
  134.     /*标题在上,难度播放量在下,垂直排列*/
  135.     flex-flow: column nowrap;
  136.     /*设置顶部边距*/
  137.     margin-top: 5px;
  138.     padding-left: 10px;
  139. }
  140. /*设置第二排图片宽高*/
  141. .recommend > section:last-of-type > div img{
  142.     width: 350px;
  143.     height: 90px;
  144. }
  145. /*设置难度,使用元素选择器，避免写重复代码*/
  146. i {
  147.    /*不斜体*/
  148.     font-style: normal;
  149.     /*背景色*/
  150.     background-color: #333;
  151.     /*字体颜色*/
  152.     color: white;
  153.     /*圆角*/
  154.     border-radius: 4px;
  155.     /*边距*/
  156.     padding: 0 5px;
  157.     /*字体小一号*/
  158.     font-size: smaller;
  159. }
  161. /***********设置最新更新**************/
  162. /*2.设置最新更新区域*/
  163. .newUpdate{
  164.     /*转为弹性盒子*/
  165.     display: flex;
  166.     /*垂直排列*/
  167.     flex-flow: column nowrap;
  168. }
  169. /*设置img宽高*/
  170. .newUpdate > section > div > a > img {
  171.     width: 350px;
  172.     height: 90px;
  173. }
  174. /*设置最新内容的div*/
  175. .newUpdate > section > div{
  176.     /*转换弹性盒子*/
  177.     display: flex;
  178.     /*水平排列不换行*/
  179.     flex-flow: row nowrap;
  180.     /*背景色*/
  181.     background-color: #fff;
  182.     /*外边距*/
  183.     margin: 5px;
  184. }
  185. /*设置文字区域*/
  186. .newUpdate > section > div > div{
  187.     display: flex;
  188.     flex-flow: column nowrap;
  189.     margin-left: 10px;
  190. }
  191. /*设置标题*/
  192. .newUpdate > section > div a:first-of-type{
  193.   margin-top: 5px;
  194. }
  195. /*设置介绍*/
  196. .newUpdate > section > div > div > p{
  197.     /*设置强制一行显示，多余文本显示....*/
  198.     font-size: smaller;
  199.     display: inline-block;
  200.     white-space: nowrap;
  201.     width: 380px;
  202.     overflow: hidden;
  203.     text-overflow:ellipsis;
  204. }
  205. /*设置难度、播放量*/
  206. .newUpdate > section > div > div > span {
  207.     display: flex;
  208.     flex-flow: row nowrap;
  209.     justify-content: space-between;
  210.     font-size: smaller;
  211. }
  213. /*******************设置最新文章*****************/
  214. /*3.设置最新文章容器*/
  215. .newArticles{
  216.     /*转为弹性容器*/
  217.     display: flex;
  218.     /*垂直排列换行*/
  219.     flex-flow: column nowrap;
  220. }
  221. /*设置img宽高*/
  222. .newArticles > section > div > a > img {
  223.     width: 250px;
  224.     height: 80px;
  225.     /*设置间距更加美观*/
  226.     margin: 8px;
  227. }
  228. /*设置图文盒子*/
  229. .newArticles > section > div{
  230.     /*转为弹性容器*/
  231.     display: flex;
  232.     /*文字在左边,图片在右边，水平排列不换行*/
  233.     flex-flow: row nowrap;
  234.     /*背景色*/
  235.     background-color: #fff;
  236.     /*外边距*/
  237.     margin: 5px;
  238.     /*文字贴着起点，图片贴着终点,主轴对齐space-between正是说你*/
  239.     justify-content: space-between;
  240.     /*次轴对齐居中*/
  241.     align-items: center;
  242. }
  243. /*设置查看更多*/
  244. .newArticles > section > div:last-of-type,
  245. .newBlog > section > div:last-of-type,
  246. .newAnswer > section > div:last-of-type{
  247.     /*转为弹性容器*/
  248.     display: flex;
  249.     /*文字在左边,图片在右边，水平排列不换行*/
  250.     flex-flow: row nowrap;
  251.     /*背景色*/
  252.     background-color: #fff;
  253.     /*外边距*/
  254.     margin: 5px;
  255.     /*文字贴着起点，图片贴着终点,主轴对齐space-between正是说你*/
  256.     justify-content: center;
  257.     /*次轴对齐居中*/
  258.     align-items: center;
  259.     /*设置高度*/
  260.     height: 24px;
  261. }
  262. /*设置文字区域*/
  263. .newArticles > section > div > div{
  264.     /*转为弹性容器*/
  265.     display: flex;
  266.     /*标题在上发布时间在下，垂直排列不换行*/
  267.     flex-flow: column nowrap;
  268. }
  269. /*设置标题*/
  270. .newArticles > section > div > div > a{
  271.     /*设置字体大小*/
  272.     font-size: 14px;
  273.     /*加粗*/
  274.     font-weight: bold;
  275.     /*设置外边距*/
  276.     margin-bottom: 5px;
  277.     margin-left: 10px;
  278. }
  279. /*设置发布时间*/
  280. .newArticles > section > div > div > span{
  281.     /*设置比默认小一号*/
  282.     font-size: smaller;
  283.     /*设置外边距*/
  284.     margin-left: 10px;
  285.     margin-top: 10px;
  286. }
  288. /*************设置最新博文**********/
  289. /*4.设置最新博文容器*/
  290. .newBlog{
  291.     /*转为弹性容器*/
  292.     display: flex;
  293.     flex-flow: column nowrap;
  294. }
  295. /*设置所有容器*/
  296. .newBlog > section > div{
  297.     /*转为弹性容器*/
  298.     display: flex;
  299.     /*标题在左边，时间右边 水平不换行*/
  300.     flex-flow: column nowrap;
  301.     /*背景色*/
  302.     background-color: #fff;
  303.     /*设置边距更美观*/
  304.     margin: 5px;
  305.     height: 40px;
  306. }
  307. /*设置内容容器*/
  308. .newBlog > section > div > div{
  309.     /*转为弹性容器*/
  310.     display: flex;
  311.     /*标题在左边，时间右边 水平不换行*/
  312.     flex-flow: row nowrap;
  313.     /*贴两边*/
  314.     justify-content: space-between;
  315.     /*次轴对齐居中*/
  316.     align-items: center;
  317. }
  318. /*设置标题*/
  319. .newBlog > section > div > div > a{
  320.     /*设置外边距*/
  321.     margin-left: 10px;
  322.     margin-top: 10px;
  323. }
  324. /*设置发布时间*/
  325. .newBlog > section > div > div > span{
  326.     /*设置比默认小一号*/
  327.     font-size: smaller;
  328.     /*设置外边距*/
  329.     margin-right: 10px;
  330.     margin-top: 10px;
  331. }
  333. /*************设置最新问答**********/
  334. /*5.设置最新博文问答*/
  335. .newAnswer{
  336.     /*转为弹性容器*/
  337.     display: flex;
  338.     flex-flow: column nowrap;
  339.     margin-bottom: 54px;
  340. }
  341. /*设置所有容器*/
  342. .newAnswer > section > div{
  343.     /*转为弹性容器*/
  344.     display: flex;
  345.     /*标题在左边，时间右边 水平不换行*/
  346.     flex-flow: column nowrap;
  347.     /*背景色*/
  348.     background-color: #fff;
  349.     /*设置边距更美观*/
  350.     margin: 5px;
  351.     height: 40px;
  352. }
  353. /*设置内容容器*/
  354. .newAnswer > section > div > div{
  355.     /*转为弹性容器*/
  356.     display: flex;
  357.     /*标题在左边，时间右边 水平不换行*/
  358.     flex-flow: row nowrap;
  359.     /*贴两边*/
  360.     justify-content: space-between;
  361.     /*次轴对齐居中*/
  362.     align-items: center;
  363. }
  364. /*设置标题*/
  365. .newAnswer > section > div > div > a{
  366.     /*设置外边距*/
  367.     margin-left: 10px;
  368.     margin-top: 10px;
  369. }
  370. /*设置发布时间*/
  371. .newAnswer > section > div > div > span{
  372.     /*设置比默认小一号*/
  373.     font-size: smaller;
  374.     /*设置外边距*/
  375.     margin-right: 10px;
  376.     margin-top: 10px;
  377. }
  379. /*************设置页尾****************/
  380. footer{
  381.     /*转为弹容器*/
  382.     display: flex;
  383.     /*水平排列不换行*/
  384.     flex-flow: row nowrap;
  385.     position: fixed;
  386.     bottom: 0;
  387.     width: 100%;
  388.     height: 54px;
  389.     min-width: 320px;
  390.     max-width: 768px;
  391.     background-color: #fff;
  392.     justify-content: space-evenly;
  393.     align-items: center;
  394.     border-top: 1px solid #b3b3b3;
  395. }
  396. footer > a{
  397.     display: flex;
  398.     flex-flow: column nowrap;
  399.     align-items: center;
  400. }
  401. footer > a > img{
  402.     width: 18px;
  403.     height: 18px;
  404. }

运行效果

手抄代码

总结：
1.学习了媒体查询，根据@media语法判断设备类型，根据对应的设备来适配不同情况。
2.学习了PHP中文网手机端的制作，制作的时候先调整好思路，将页面按照块盒子来分容器，在制作导航中老师讲解了如何去思考设计，让我受益匪浅，现在我对界面的布局基本可以搞定。

上一条：媒体查询简介与Flex实战-2019年11月8日下一条：利用新浪API批量生成t.cn 短链接的接口有哪些？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多