search

博客列表 >Flex改写phpcnUI手册 - 九期线上班

Flex改写phpcnUI手册 - 九期线上班

fkkf467
fkkf467原创
2019年11月10日 15:07:58537浏览

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. 总结

上一条：1108 laravel框架下 中间件的创建 20191108 2000-2200下一条：php ui手册案例和学习总结--PHP中文网第九期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多