Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex改写phpcnUI手册 - 九期线上班
Blogger Information
Blog 38
fans 1
comment 0
visits 28756
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手册 - 九期线上班
fkkf467
Original
538 people have browsed it

1. Flex改写phpcnUI手册

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>phpcnUI用户参考手册</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  12.         a {
  13.             text-decoration: none;
  14.             color: black;
  15.         }
  17.         li {
  18.             list-style: none;
  19.         }
  20.         @media (max-width: 768px) {
  21.             main > article {
  22.                 display: none;
  23.             }
  24.             main > aside {
  25.                 flex: 1;
  26.             }
  27.         }
  28.         body {
  29.             min-width: 600px;
  30.             height: 100vh;
  31.             display: flex;
  32.             flex-flow: column nowrap;
  33.         }
  35.         header {
  36.             height: 60px;
  37.             width: 100%;
  38.             background-color: lightskyblue;
  39.             box-sizing: border-box;
  40.             display: flex;
  41.             align-items: center;
  42.         }
  44.         header > h1 {
  45.             color: #555555;
  46.             font-size: 28px;
  47.             font-weight: normal;
  48.             margin-left: 30px;
  49.         }
  51.         header > h1 > span {
  52.             color: #ff7f50;
  53.             text-shadow: rgb(51, 51, 51) 2px 2px 1px;
  54.             margin-right: 5px;
  55.         }
  56.         main {
  57.             flex: 1;
  58.             box-sizing: border-box;
  59.             display: flex;
  60.         }
  61.         main > aside {
  62.             width: 240px;
  63.             box-sizing: border-box;
  64.             background: #EEEEEE;
  65.             padding: 30px;
  66.         }
  67.         main > aside > div > h3 {
  68.             color: #333333;
  69.             font-size: 18px;
  70.         }
  71.         main > aside > div > ul {
  72.             margin-left: 20px;
  73.             font-size: 14px;
  74.             color: #333333;
  75.             font-weight: lighter;
  76.         }
  77.         main > aside > div > ul > li {
  78.             margin: 5px 0;
  79.         }
  80.         main > aside a:hover {
  81.             color: #20B2AA;
  82.             font-weight: bold;
  83.         }
  84.         main > article {
  85.             width: 100%;
  86.             box-sizing: border-box;
  87.         }
  88.         main > article > iframe {
  89.             width: 100%;
  90.             height: 100%;
  91.         }
  92.         footer {
  93.             height: 60px;
  94.             background-color: lightslategrey;
  95.             box-sizing: border-box;
  96.             display: flex;
  97.             align-items: center;
  98.             justify-content: center;
  99.             color: #444444;
  100.             font-size: 14px;
  101.         }
  102.         footer > a {
  103.             color: #333333;
  104.         }
  105.         footer > a:hover {
  106.             color: #20B2AA;
  107.             font-weight: bold;
  108.         }
  109.     </style>
  110. </head>
  111. <body>
  112. <header>
  113.     <h1><span>phpcn UI</span>用户参考手册</h1>
  114. </header>
  115. <main>
  116.     <aside>
  117.         <div>
  118.             <h3>前端基础</h3>
  119.             <ul>
  120.                 <li><a href="base/1_框架安装.html" target="content">框架安装</a></li>
  121.                 <li><a href="base/2_页面结构.html" target="content">页面结构</a></li>
  122.                 <li><a href="base/3_常用标签.html" target="content">常用标签</a></li>
  123.                 <li><a href="base/4_CSS选择器.html" target="content">CSS选择器</a></li>
  124.                 <li><a href="base/5_CSS样式控制.html" target="content">CSS样式控制</a></li>
  125.                 <li><a href="base/6_CSS盒模型.html" target="content">CSS盒模型</a></li>
  126.                 <li><a href="base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></li>
  127.                 <li><a href="base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li>
  128.             </ul>
  129.         </div>
  130.         <div>
  131.             <h3>框架组件</h3>
  132.             <ul>
  133.                 <li><a href="component/1_栅格布局.html" target="content">栅格布局</a></li>
  134.                 <li><a href="component/2_常用样式.html" target="content">常用样式</a></li>
  135.                 <li><a href="component/3_文本与背景色.html" target="content">文本与背景色</a></li>
  136.                 <li><a href="component/4_表格.html" target="content">表格</a></li>
  137.                 <li><a href="component/5_分页条.html" target="content">分页条</a></li>
  138.             </ul>
  139.         </div>
  140.     </aside>
  141.     <article>
  142.         <iframe src="welcome.html" frameborder="0" name="content"></iframe>
  143.     </article>
  144. </main>
  145. <footer>
  146.     <a href="https://www.php.cn/">php中文网</a>&copy;版权所有(2019)
  147. </footer>
  148. </body>
  149. </html>

2. 总结

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