search

博客列表 >2020.08.08周末班作业

2020.08.08周末班作业

sunyinF
sunyinF原创
2020年08月22日 16:58:08511浏览

  1. flex实现pc端三列布局；
    ```html
    <!DOCTYPE html>

    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
    / 清除样式 /
    {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    /     设置a标签默认 /
    a {
    text-decoration: none;
    color: #666;
    }
    /     将整个body转为flex元素 /
    body {
    display: flex;
    flex-flow: column nowrap;
    }
    /     设置header高度为50个像素将其转为flex元素垂直居中对齐/
    header {
    height: 50px;
    display: flex;
    align-items: center;
    }
    /     设置不允许放大允许放大宽度100像素，字体居中，内边距上下10像素 左右自适应 /
    header a {
    flex: 0 1 100px;
    text-align: center;
    padding: 10px auto;
    }
    /     设置第一个a标签LOGO右外边框50像素 /
    header a:first-of-type {
    margin-right: 50px;
    }
    /     设置最后一个a标签左外边框自动计算剩余空间 /
    header a:last-of-type {
    margin-left: auto;
    }
    /     设置除第一个a标签指针效果 /
    header a:hover:not(:first-of-type) {
    color: #f00;
    }
    /     转为flex元素最小高度500像素水平两端对齐 /
    .container {
    display: flex;
    min-height: 500px;
    justify-content: space-evenly;
    }
    /     设置不允许放大不允许缩小宽度200像素 /
    .container aside {
    flex: 0 0 200px;
    }
    /     设置不允许放大不允许缩小宽度600像素 /
    .container main {
    flex: 0 0 600px;
    }
    /     设置高度65像素边框1像素实线转为flex元素主轴垂直居中文本居中 */
    footer {
    height: 65px;
    border: 1px solid;
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <header>
    <a href="">LOGO</a>
    <a href="">首页</a>
    <a href="">视频教程</a>
    <a href="">入门教程</a>
    <a href="">社区问答</a>
    <a href="">技术文章</a>
    <a href="">资源下载</a>
    <a href="">工具下载</a>
    <a href="">PHP培训</a>
    <a href="">登陆</a>
    </header>

    <div class="container">
    <aside>左</aside>
    <main>主</main>
    <aside>右</aside>
    </div>

    <footer>
    <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
    <p>
    Copyright 2014-2020 https://www.php.cn/ All Rights Reserved |
    皖B2-20150071-9 皖公网安备 34010402701654号
    </p>
    <p>座机号码：0551-64933227 安徽省合肥市政务新区置地广场D座2101</p>
    </footer>
    </body>
    </html> 

  1. 效果截图：
  2. ![](https://img.php.cn/upload/image/755/950/302/1597979270298035.png)
  3. 2. flex实现(m.php.cn)首页
  4. ```html
  5. <!DOCTYPE html>
  6. <html lang="en">
  7.   <head>
  8.     <meta charset="UTF-8" />
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10.     <title>Document</title>
  11.     <link rel="stylesheet" href="0821.css" />
  12.   </head>
  13.   <body>
  14.   <div class="space"></div>
  15.     <header>
  16.       <span class="iconfont"><a href="#">&#xe659;</a></span>
  17.       <div class="logo">
  18.         <a href="#"><img src="images/logo.png" alt="" /></a>
  19.       </div>
  20.       <span class="iconfont"><a href="#">&#xe834;</a></span>
  21.     </header>
  22.     <div class="banner">
  23.       <a href=""></a><img src="images/banner.jpg" alt="" /></a>
  24.     </div>
  25.     <nav>
  26.       <li>
  27.         <a href="#"><img src="images/html.png" alt="" /></a>
  28.         <a href="#">html/css</a>
  29.       </li>
  30.       <li>
  31.         <a href="#"><img src="images/JavaScript.png" alt="" /></a>
  32.         <a href="#">JavaScript</a>
  33.       </li>
  34.       <li>
  35.         <a href="#"><img src="images/code.png" alt="" /></a>
  36.         <a href="#">服务器</a>
  37.       </li>
  38.       <li>
  39.         <a href="#"><img src="images/sql.png" alt="" /></a>
  40.         <a href="#">数据库</a>
  41.       </li>
  42.       <li>
  43.         <a href="#"><img src="images/app.png" alt="" /></a>
  44.         <a href="#">移动端</a>
  45.       </li>
  46.       <li>
  47.         <a href="#"><img src="images/manual.png" alt="" /></a>
  48.         <a href="#">手册</a>
  49.       </li>
  50.       <li>
  51.         <a href="#"><img src="images/tool2.png" alt="" /></a>
  52.         <a href="#">工具</a>
  53.       </li>
  54.       <li>
  55.         <a href="#"><img src="images/live.png" alt="" /></a>
  56.         <a href="#">直播</a>
  57.       </li>
  58.     </nav>
  59.     <main>
  60.         <h3>推荐课程</h3>
  61.         <ul>
  62.             <div class="curriculum">
  63.                 <a href="#"><img src="images/5d2426f409839992.jpg" alt="">
  64.                   </a>
  65.                 <a href="#"><img src="images/5d242759adb88970.jpg" alt=""></a>
  66.             </div>
  67.             <div class="recommend">
  68.                 <a href="#"><img src="images/5d2941e265889366.jpg" alt="">
  69.                   <li>CI框架30分钟极速入门<p><span>中级</span><span>67790次播放</span></p></li></a>
  71.                 <a href=""><img src="images/5aa23f0ded921649.jpg" alt="">
  72.                   <li>2018前端入门_HTML5<p><span>初级</span><span>353557次播放</span></p></li></a>
  73.             </div>
  74.         </ul>
  75.     </main>
  76.     <main>
  77.       <h3>最新更新</h3>
  78.           <div class="update">
  79.               <a href="#"><img src="images/5f155b2f296de744.png" alt="">
  80.                 <li>《我的十年撸码生涯》公益直播课
  81.                   <p>主题：《十年撸码生涯：…</p>
  82.                   <p><span>初级</span><span>1989次播放</span></p>
  83.                 </li>
  84.               </a>
  85.               <a href=""><img src="images/5f0e62e427845643.png" alt="">
  86.                 <li>2天速成VueJS免费公益直播课
  87.                   <p>php中文网免费公益…</p>
  88.                   <p><span>初级</span><span>5039次播放</span></p>
  89.                 </li>
  90.               </a>
  91.               <a href=""><img src="images/5f3de03eaf461163.png" alt="">
  92.                 <li>PHP进阶篇-函数（玉女心经版）
  93.                   <p>函数就是实现特…</p>
  94.                   <p><span>初级</span><span>644次播放</span></p>
  95.                 </li>
  96.               </a>
  97.               <a href=""><img src="images/5eeb3345b206d506.jpg" alt="">
  98.                 <li>PHP代码整洁之道
  99.                   <p>"本课程参考自…</p>
  100.                   <p><span>中级</span><span>5039次播放</span></p>
  101.                 </li>
  102.               </a>
  103.               <a href=""><img src="images/5f36356fc6fb6293.png" alt="">
  104.                 <li>PHP字符串处理（玉女心经版）
  105.                   <p>字符串的处理…</p>
  106.                   <p><span>初级</span><span>970次播放</span></p>
  107.                 </li>
  108.               </a>
  109.               <a href=""><img src="images/5f36339d51421830.png" alt="">
  110.                 <li>PHP基本语法（玉女心经版）
  111.                   <p>PHP是在服务…</p>
  112.                   <p><span>初级</span><span>1069次播放</span></p>
  113.                 </li>
  114.               </a>
  115.           </div>
  116.     </main>
  117.     <main>
  118.   <h3>最新文章</h3>
  119.   <div class="article">
  120.       <a href="#">
  121.         <li>如何使用JavaScript lastIndexOf()方法
  122.           <p>发布时间：2020-08-20</span></p></li>
  123.           <li><img src="images/2020082014393865760.jpg" alt="">
  124.         </li>
  125.       </a>
  126.       <a href="#">
  127.         <li>java idea实现类快捷生成接口方法
  128.           <p>发布时间：2020-08-21</span></p></li>
  129.           <li><img src="images/5f3f95799dcfa120.jpg" alt="">
  130.         </li>
  131.       </a>
  132.       <a href="#">
  133.         <li>js实现滑动进度条
  134.           <p>发布时间：2020-08-21</span></p></li>
  135.           <li><img src="images/2020082117330680098.jpg" alt="">
  136.         </li>
  137.       </a>
  138.       <a href="#">
  139.         <li>docker network命令详解
  140.           <p>发布时间：2020-08-21</span></p></li>
  141.           <li><img src="images/5f3f91881804b920.jpg" alt="">
  142.         </li>
  143.       </a>
  144.       <a href="#">
  145.         <li>一起看看vue实现打地鼠小游戏
  146.           <p>发布时间：2020-08-21</span></p></li>
  147.           <li><img src="images/2020082117235954205.jpg" alt="">
  148.         </li>
  149.       </a>
  150.   </div>
  151. </main>
  152. <div class="space"></div>
  153.    <footer>
  154.     <li>
  155.       <a href="#"><span class="iconfont">&#xe88b;</span></a>
  156.       <a href="#">首页</a>
  157.     </li>
  158.     <li>
  159.       <a href="#"><span class="iconfont">&#xe80f;</span></a>
  160.       <a href="#">视频</a>
  161.     </li>
  162.     <li>
  163.       <a href="#"><span class="iconfont">&#xe607;</span></a>
  164.       <a href="#">社区</a>
  165.     </li>
  166.     <li>
  167.       <a href="#"><span class="iconfont">&#xe659;</span></a>
  168.       <a href="#">我的</a>
  169.     </li>    
  170.    </footer>
  171.   </body>
  172. </html>

CSS：

  1. /*阿里云图标格式文件*/
  2. @font-face {
  3.   font-family: "iconfont";
  4.   src: url("/iconfont/iconfont.eot");
  5.   src: url("/iconfont/iconfont.eot?#iefix") format("embedded-opentype"),
  6.     url("/iconfont/iconfont.woff2") format("woff2"),
  7.     url("/iconfont/iconfont.woff") format("woff"),
  8.     url("/iconfont/iconfont.ttf") format("truetype"),
  9.     url("/iconfont/iconfont.svg#iconfont") format("svg");
  10. }
  11. /*图标默认样式*/
  12. .iconfont {
  13.   font-family: "iconfont" !important;
  14.   font-size: 16px;
  15.   font-style: normal;
  16.   -webkit-font-smoothing: antialiased;
  17.   -moz-osx-font-smoothing: grayscale;
  18.   color: #fff;
  19. }
  20. /* 清除样式 */
  21. * {
  22.   margin: 0;
  23.   padding: 0;
  24.   box-sizing: border-box;
  25. }
  26. /* 设置a标签默认样式 */
  27. a {
  28.   text-decoration: none;
  29.   color: #666;
  30. }
  31. /* 把整个视图分为宽高各一百份 */
  32. html {
  33.   width: 100vw;
  34.   height: 100vh;
  35. }
  36. /* 将整个页面转为flex格式并直线轴显示不换行，最小宽度360个像素，背景色灰色 */
  37. body {
  38.   display: flex;
  39.   flex-flow: column nowrap;
  40.   min-width: 360px;
  41.   background: #edeff0;
  42. }
  43. /* 页头取100份宽度，高度50像素，背景色黑色，转为flex，内边框上下0像素左右15像素，对齐方式平均对齐，交叉轴对齐方式居中，将页头设为浮动视图在顶部0 */
  44. header {
  45.   width: 100vw;
  46.   height: 50px;
  47.   background: #000;
  48.   display: flex;
  49.   padding: 0 15px;
  50.   justify-content: space-between;
  51.   align-items: center;
  52.   position: fixed;
  53.   top: 0;
  54. }
  55. /* 转为弹性盒，2倍rem大小，主轴和交叉轴居中，外边距距左2% */
  56. header .iconfont {
  57.   display: flex;
  58.   font-size: 2rem;
  59.   align-items: center;
  60.   justify-content: center;
  61.   margin-left: 2%;
  62. }
  63. /* 图标颜色 */
  64. header .iconfont a {
  65.   color: #fff;
  66. }
  67. /* 图片70% */
  68. header .logo img {
  69.   width: 70%;
  70. }
  71. /* 高度自适应 */
  72. .banner {
  73.   height: auto;
  74. }
  75. /* 图片100% */
  76. .banner img {
  77.   width: 100%;
  78. }
  79. /* 导航高度200像素，转为弹性盒，主轴水平显示可换行，交叉轴平均对齐，背景色白色 */
  80. nav {
  81.   height: 200px;
  82.   display: flex;
  83.   flex-flow: row wrap;
  84.   align-content: space-around;
  85.   background: #fff;
  86. }
  87. /* 转为弹性盒，宽度25份，主轴垂直不换行，交叉轴居中 */
  88. nav li {
  89.   display: flex;
  90.   width: 25vw;
  91.   flex-flow: column nowrap;
  92.   align-items: center;
  93. }
  94. /* 图片50% */
  95. nav li img {
  96.   width: 50%;
  97. }
  98. /* 第一个A标签文本居中 */
  99. nav li a:first-of-type {
  100.   text-align: center;
  101. }
  102. /* 主体宽度100份，高度自适应，转为弹性盒，主轴垂直不换行，外边距距上2倍rem */
  103. main {
  104.   width: 100vw;
  105.   height: auto;
  106.   display: flex;
  107.   flex-flow: column nowrap;
  108.   margin-top: 2rem;
  109. }
  110. /* 宽度100%，高度20像素，文本1.2倍rem，内边距全10像素，颜色浅黑 */
  111. main h3 {
  112.   width: 100%;
  113.   height: 20px;
  114.   font-size: 1.2rem;
  115.   padding: 10px;
  116.   color: #888;
  117. }
  118. /* 转为弹性盒，主轴垂直不换行 */
  119. main ul {
  120.   display: flex;
  121.   flex-flow: column nowrap;
  122. }
  123. /* 宽度100份，转为弹性盒，主轴水平显示不换行，外边距距上15像素 */
  124. main ul .curriculum {
  125.   width: 100vw;
  126.   display: flex;
  127.   flex-flow: row nowrap;
  128.   margin-top: 15px;
  129. }
  130. /* 宽度49份，高度110像素，内边距全10像素 */
  131. main ul .curriculum a {
  132.   width: 49vw;
  133.   height: 110px;
  134.   padding: 10px;
  135. }
  136. /* 宽度100%，高度90像素，允许放大允许缩小视图49份 */
  137. main ul .curriculum a img {
  138.   width: 100%;
  139.   height: 90px;
  140.   flex: 1 1 49vw;
  141. }
  142. /* 宽度100份，转为弹性盒，主轴垂直显示不换行 */
  143. main ul .recommend {
  144.   width: 100vw;
  145.   display: flex;
  146.   flex-flow: column nowrap;
  147. }
  148. /* 宽度94份，高度110像素，转为弹性盒，背景色白色，内边距全15像素，外边距上20像素左10像素 */
  149. main ul .recommend a {
  150.   width: 94vw;
  151.   height: 110px;
  152.   display: flex;
  153.   flex-flow: row nowrap;
  154.   background: #fff;
  155.   padding: 15px;
  156.   margin-top: 20px;
  157.   margin-left: 10px;
  158. }
  159. /* 图片40% */
  160. main ul .recommend a img {
  161.   width: 40%;
  162. }
  163. /* 宽度55%，外边距左2%，1.1rem倍文本，颜色#999，转为弹性盒，主轴垂直显示不换行 */
  164. main ul .recommend a li {
  165.   width: 55%;
  166.   margin-left: 2%;
  167.   font-size: 1.1rem;
  168.   color: #999;
  169.   display: flex;
  170.   flex-flow: column nowrap;
  171. }
  172. /* 外边距上10%，0.8rem倍文本 */
  173. main ul .recommend a li p {
  174.   margin-top: 10%;
  175.   font-size: 0.8rem;
  176. }
  177. /* 0.6rem倍文本，内边距全3像素，转为行内块 */
  178. main ul .recommend a li p span {
  179.   font-size: 0.9rem;
  180.   padding: 3px;
  181.   display: grid;
  182. }
  183. /* 第一个span：0.8rem倍文本，颜色#fff，背景#666，宽度45像素，文本居中，边框圆角10像素，左浮动 */
  184. main ul .recommend a li p span:first-of-type {
  185.   font-size: 0.8rem;
  186.   color: #fff;
  187.   background: #666;
  188.   width: 45px;
  189.   text-align: center;
  190.   border-radius: 10px;
  191.   float: left;
  192. }
  193. /* 宽度100份，转为弹性盒，主轴垂直显示不换行，外边距上10像素 */
  194. main .update {
  195.   width: 100vw;
  196.   display: flex;
  197.   flex-flow: column nowrap;
  198.   margin-top: 10px;
  199. }
  200. /* 宽度94份，高度110像素，转为弹性盒，主轴水平显示不换行，背景色#fff，内边距全15像素，外边距上20像素左10像素 */
  201. main .update a {
  202.   width: 94vw;
  203.   height: 110px;
  204.   display: flex;
  205.   flex-flow: row nowrap;
  206.   background: #fff;
  207.   padding: 15px;
  208.   margin-top: 20px;
  209.   margin-left: 10px;
  210. }
  211. /* 图片40% */
  212. main .update a img {
  213.   width: 40%;
  214. }
  215. /* 宽度55%，外边距左2%，1rem倍文本，颜色#999，转为弹性盒，主轴垂直显示不换行 */
  216. main .update a li {
  217.   width: 55%;
  218.   margin-left: 2%;
  219.   font-size: 1rem;
  220.   color: #999;
  221.   display: flex;
  222.   flex-flow: column nowrap;
  223. }
  224. /* 外边距上2%，0.7rem倍文本 */
  225. main .update a li p {
  226.   margin-top: 2%;
  227.   font-size: 0.7rem;
  228. }
  229. /* 0.9rem倍文本，内边距全3像素，转为行内块 */
  230. main .update a li p span {
  231.   font-size: 0.9rem;
  232.   padding: 3px;
  233.   display: grid;
  234. }
  235. /* 第一个span：0.8rem倍文本，颜色#fff，背景色#666，宽度45像素，文本居中，边框圆角10像素，左浮动 */
  236. main .update a li p span:first-of-type {
  237.   font-size: 0.8rem;
  238.   color: #fff;
  239.   background: #666;
  240.   width: 45px;
  241.   text-align: center;
  242.   border-radius: 10px;
  243.   float: left;
  244. }
  245. /* 最后一个span：宽度45%，外边距左自适应 计算全部左边距 */
  246. main .update a li p span:last-of-type {
  247.   width: 45%;
  248.   margin-left: auto;
  249. }
  250. /* 宽度100份，转为弹性盒，主轴垂直显示不换行，外边距上10像素 */
  251. main .article {
  252.   width: 100vw;
  253.   display: flex;
  254.   flex-flow: column nowrap;
  255.   margin-top: 10px;
  256. }
  257. /* 宽度94份，高度110像素，转为弹性盒，主轴水平显示不换行，背景色#fff，内边距全15像素，外边距上20像素左10像素 */
  258. main .article a {
  259.   width: 94vw;
  260.   height: 110px;
  261.   display: flex;
  262.   flex-flow: row nowrap;
  263.   background: #fff;
  264.   padding: 15px;
  265.   margin-top: 20px;
  266.   margin-left: 10px;
  267. }
  268. /* 图片宽100%高100% */
  269. main .article a li img {
  270.   width: 100%;
  271.   height: 100%;
  272. }
  273. /* 宽度50%，外边距左2%，1倍rem文本，颜色#999，转为弹性盒，主轴垂直显示不换行 */
  274. main .article a li {
  275.   width: 50%;
  276.   margin-left: 2%;
  277.   font-size: 1rem;
  278.   color: #999;
  279.   display: flex;
  280.   flex-flow: column nowrap;
  281. }
  282. /* 外边距上2%，0.7rem倍文本 */
  283. main .article a li p {
  284.   margin-top: 2%;
  285.   font-size: 0.7rem;
  286. }
  287. /* 0.9倍文本，内边距全3像素，转为行内块 */
  288. main .article a li p span {
  289.   font-size: 0.9rem;
  290.   padding: 3px;
  291.   display: grid;
  292. }
  293. /* 第一个span：0.8倍文本，颜色#fff，背景色#666，宽度45像素，文本居中，边框圆角10像素，左浮动 */
  294. main .article a li p span:first-of-type {
  295.   font-size: 0.8rem;
  296.   color: #fff;
  297.   background: #666;
  298.   width: 45px;
  299.   text-align: center;
  300.   border-radius: 10px;
  301.   float: left;
  302. }
  303. /* 最后一个span：宽度25%，外边距左自适应 */
  304. main .article a li p span:last-of-type {
  305.   width: 25%;
  306.   margin-left: auto;
  307. }
  308. /* 为footer占位：外边距上50像素 */
  309. .space {
  310.   margin-top: 50px;
  311. }
  312. /* 页尾：宽度100份，转为弹性盒，主轴水平显示不换行，转为浮动以视图底部0的位置，上边框1像素实线颜色#CCC，背景色#edeff0 */
  313. footer {
  314.   width: 100vw;
  315.   display: flex;
  316.   flex-flow: row nowrap;
  317.   position: fixed;
  318.   bottom: 0;
  319.   border-top: 1px solid #ccc;
  320.   background: #edeff0;
  321. }
  322. /* 宽度25份，高度50像素，取消li开头自带的.，转为弹性盒，主轴垂直显示不换行，交叉轴居中，主轴居中 */
  323. footer li {
  324.   width: 25vw;
  325.   height: 50px;
  326.   list-style: none;
  327.   display: flex;
  328.   flex-flow: column nowrap;
  329.   align-items: center;
  330.   justify-content: center;
  331. }
  332. /* 颜色#999 */
  333. footer li a {
  334.   color: #999;
  335. }
  336. /* 图标1.4rem倍文本，颜色#ccc */
  337. footer li .iconfont {
  338.   font-size: 1.4rem;
  339.   color: #ccc;
  340. }

效果图：



上一条：类与对象基础知识-7月21日作业下一条：选项卡，图片懒加载，轮播图自动播放功能-js-41课8.17
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多