search

博客列表 >1108作业

1108作业

遗忘了寂寞
遗忘了寂寞原创
2019年11月09日 09:51:55887浏览

phpcnUI用户手册首页弹性布局改造

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>phpcnUI用户手册</title>
  6.         <link rel="stylesheet" href="static/css/style.css">
  7.         <style type="text/css">
  9.             body{
  10.                 display: flex;
  11.                 flex-flow:column nowrap;
  12.                 height: 100vh;
  14.             }
  15.             main{
  16.                 flex: 1;display: flex;
  17.                 flex-flow: row nowrap;
  18.             }
  19.             header{height: 80px;}
  20.             footer{height: 50px;}
  21.             header,footer{
  22.                 box-sizing: border-box;
  24.                 line-height: 60px;
  25.                 width: 100%;
  26.                 box-sizing: border-box;
  27.                 padding: 0px 20px;
  28.                 display: flex;
  29.                 background: #D4D4D4;
  30.             }
  31.             header > h3{flex: 1;}
  32.             main > aside{
  33.                 box-sizing: border-box;
  34.                 padding: 20px 0px;
  35.                 width: 200px;
  36.                 background: #EEEEEE;
  37.                 display: flex;
  38.                 flex-flow:column nowrap;
  39.             }
  40.             main > aside > a{
  41.                 height: 40px;
  42.                 line-height: 40px;
  43.                 padding: 5px 20px;
  44.                 text-align: center;
  47.             }
  48.             main > aside > a:hover{
  51.             }
  52.             main > artical{
  53.                 flex: 1;
  55.             }
  56.             main > aside:first-of-type {
  57.                order: -1;
  58.             }
  59.             footer > span{flex: 1;}
  60.             footer > a{
  61.                 padding: 0 10px;
  62.                 color: #ccc;
  63.             }
  64.             main > artical{
  65.                 display: flex;
  66.                 justify-content: center;
  67.                 align-items: center;
  68.             }
  69.         </style>
  70.     </head>
  71.     <body>
  72.         <!-- 头部 -->
  73.         <header>
  75.                 <h1 class="phpcn-color-deepgray phpcn-ml-40" ><span class="phpcn-color-coral" style="text-shadow: 2px 2px 1px #333; font-weight: bolder">phpcn UI</span> 用户参考手册</h1>
  77.         </header>
  78.         <!-- 主本 -->
  79.         <main>
  80.             <aside>
  81.                 <ul class="phpcn-p-30 phpcn-lh-normal phpcn-ml-20" id="nav" >
  82.                                 <li style="cursor: pointer;"><strong>前端基础</strong>
  83.                                     <ul class="phpcn-ml-20 phpcn-dl-n" >
  84.                                         <li><a href="base/1_框架安装.html" target="content">框架安装</a></li>
  85.                                         <li><a href="base/2_页面结构.html" target="content">页面结构</a></li>
  86.                                         <li><a href="base/3_常用标签.html" target="content">常用标签</a></li>
  87.                                         <li><a href="base/4_CSS选择器.html" target="content">CSS选择器</a></li>
  88.                                         <li><a href="base/5_CSS样式控制.html" target="content">CSS样式控制</a></li>
  89.                                         <li><a href="base/6_CSS盒模型.html" target="content">CSS盒模型</a></li>
  90.                                         <li><a href="base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></li>
  91.                                         <li><a href="base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li>
  92.                 <!--                        <li><a href="">Flex弹性布局</a></li>-->
  93.                 <!--                        <li><a href="">媒体查询</a></li>-->
  94.                                     </ul>
  95.                                 </li>
  97.                                 <li style="cursor: pointer;"><strong>框架组件</strong>
  98.                                     <ul class="phpcn-ml-20 phpcn-dl-n">
  99.                                         <li><a href="component/1_栅格布局.html" target="content">栅格布局</a></li>
  100.                                         <li><a href="component/2_常用样式.html" target="content">常用样式</a></li>
  101.                                         <li><a href="component/3_文本与背景色.html" target="content">文本与背景色</a></li>
  102.                                         <li><a href="component/4_表格.html" target="content">表格</a></li>
  103.                                         <li><a href="component/5_分页条.html" target="content">分页条</a></li>
  104.                                     </ul>
  105.                                 </li>
  106.                             </ul>
  107.             </aside>
  108.             <artical>
  109.                 <iframe src="welcome.html" name="content"  style="width: 100%;height: 99.6%;" frameborder="0"  marginwidth="0" marginheight="0" ></iframe>
  110.             </artical>
  112.         </main>
  113.         <!-- 底部 -->
  114.         <footer>
  115.              <p class="phpcn-mb-10 phpcn-tx-c"><a href="https://www.php.cn/">php中文网</a>©版权所有(2019)</p>
  116.         </footer>
  117.         <script>
  119.             // 控制导航折叠
  120.             var menus = document.querySelectorAll('#nav > li');
  121.             menus.forEach(function (menu){
  122.                menu.firstElementChild.addEventListener('click', function (evt) {
  123.                    evt.target.nextElementSibling.classList.toggle('phpcn-dl-n');
  124.                }, false);
  125.             });
  126.         </script>
  127.     </body>
  128. </html>

这两周所学知识汇总


















上一条：仿php中文网手机版首页 九期第九棵下一条：盒模型与背景控制1031--PHP九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多