Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex改写phpcnui手册的代码
Blogger Information
Blog 53
fans 3
comment 0
visits 55163
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex改写phpcnui手册的代码
邯郸易住宋至刚
Original
493 people have browsed it

Flex改写phpcnui手册的代码

HTML代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Flex内联框架布局网站后台</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7. </head>
  8. <body>
  9. <!--头部-->
  10. <header>
  11.     <nav><h2>Flex内联框架布局网站后台</h2></nav>
  12. </header>
  13. <!--主体-->
  15. <main>
  16.     <!--内联框架-->
  19.     <!--srcdoc代替src, 可以在属性值中直接写html代码, 实现后台首页的功能-->
  20.     <!--name属性非常重要, 它是链接到该框架页面的入口-->
  21.     <iframe srcdoc="<h2>phpcn UI 用户参考手册</h2>" name="content" ></iframe>
  25.     <!--侧边栏-->
  27.     <aside>
  28.         <!--HTML内联框架元素 (<iframe>)-->
  29.         <!--将另一个HTML页面嵌入到当前页面中,而不是窗口中打开另一个网页, 类似画中画-->
  31.         <ul>
  32.             <li>
  33.                 <a href="phpcnui/welcome.html" target="content"><span><h3 style="color:black">欢迎使用</h3></span></a>
  34.             </li>
  35.             <li>
  36.                 <span><h3>前端基础</h3></span>
  37.                 <ul style="color: brown">
  38.                     <li><a href="phpcnui/base/1_框架安装.html" target="content">框架安装</a></li>
  39.                     <li><a href="phpcnui/base/2_页面结构.html" target="content">页面结构</a></li>
  40.                     <li><a href="phpcnui/base/3_常用标签.html" target="content">常用标签</a></li>
  41.                     <li><a href="phpcnui/base/4_CSS选择器.html" target="content">CSS选择器</a></li>
  42.                     <li><a href="phpcnui/base/5_CSS样式控制.html" target="content">CSS样式控制</a></li>
  43.                     <li><a href="phpcnui/base/6_CSS盒模型.html" target="content">CSS盒模型</a></li>
  44.                     <li><a href="phpcnui/base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></li>
  45.                     <li><a href="phpcnui/base/8_CSS常用布局方式.html" target="content">CSS常用布局</a></li>
  46.                 </ul>
  47.             </li>
  49.             <li>
  50.                 <span><h3>框架要素</h3></span>
  51.                 <ul>
  52.                     <li><a href="phpcnui/component/1_栅格布局.html" target="content">格栅布局</a></li>
  53.                     <li><a href="phpcnui/component/2_常用样式.html" target="content">常用样式</a></li>
  54.                     <li><a href="phpcnui/component/3_文本与背景色.html" target="content">文本与背景色</a></li>
  55.                     <li><a href="phpcnui/component/4_表格.html" target="content">表格</a></li>
  56.                     <li><a href="phpcnui/component/5_分页条.html" target="content">分页条</a></li>
  57.                 </ul>
  58.             </li>
  60.             <li>
  61.                 <span><h3>框架扩展</h3></span>
  62.                 <ul>
  63.                     <li><a href="phpcnui/src/article.html" target="content">文章</a></li>
  64.                     <li><a href="phpcnui/src/form.html" target="content">表单</a></li>
  65.                     <li><a href="phpcnui/src/index.html" target="content">首页</a></li>
  66.                     <li><a href="phpcnui/src/list.html" target="content">列表</a></li>
  67.                 </ul>
  68.             </li>
  69.             <li>
  70.                 <a href="phpcnui/static/css/" target="content"><span><h3 style="color:black">静态资源</h3></span></a>
  71.             </li>
  72.         </ul>
  73.     </aside>
  76. </main>
  78. <footer>Hhappysong Copyright Reserved</footer>
  81. </body>
  82. </html>

CSS代码如下：

  1. * {
  2.     margin: 0;
  3.     padding:0;
  4. }
  6. body {
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9. }
  11. a {
  12.     text-decoration: none;
  13.     background-color: black;
  14.     color: white;
  15. }
  18. ul li {
  19.     /*height: 40px; */
  20.     margin-top: 12px;
  21.     margin-left: 20px;
  22.     list-style: none;
  23. }
  25. nav,footer {
  26.     width: 100%;
  27.     height: 60px;
  28.     background-color: lightskyblue;
  29.     border: 1px solid yellow;
  31.     box-sizing: border-box;
  33.     display: flex;
  34.     flex-flow: row nowrap;
  35.     justify-content: center;
  36.     align-items: center;
  37. }
  39. main {
  40.     width: 100%;
  41.     background-color: ghostwhite;
  42.     border: 1px solid greenyellow;
  44.     box-sizing: border-box;
  46.     display: flex;
  47.     flex-flow: row nowrap;
  48. }
  50. main aside {
  51.     width: 200px;
  52.     background-color: lightgreen;
  54.     padding-top: 30px;
  56.     display: flex;
  57.     flex-flow: column nowrap;
  58.     justify-content: flex-start;
  59.     align-items: center;
  60.     order: -1;
  61.     /*flex: 1 1 auto;*/
  62. }
  64. main iframe {
  65.     width: 100%;
  66.     height: auto;
  67.     background-color: wheat;
  69.     overflow: hidden;
  70. }

运行结果如下图：

手抄代码如下：

Correcting teacher：查无此人查无此人

Correction status：qualified

Teacher's comments：完成的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post