Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿写phpcn UI手册
Blogger Information
Blog 12
fans 0
comment 0
visits 8515
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
仿写phpcn UI手册
brait
Original
825 people have browsed it

用flex仿写phpcnUI手册首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>phpcnui_</title>
  6.     <link rel="stylesheet" href="static/style.css">
  7. </head>
  8. <body>
  11. <header class="header">
  12.     <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>
  13. </header>
  14. <main class="main">
  15.     <article class="center">
  16.         <iframe src="welcome.html" frameborder="0" name="content" width="100%" height="900"></iframe>
  17.     </article>
  18.     <div class="left">
  19.         <ul class="left1" id="nav" style="min-height: 800px;">
  20.             <li style="cursor: pointer;"><strong>前端基础</strong>
  21.                 <ul class="" >
  22.                     <li><a href="base/1_框架安装.html" target="content">框架安装</a></li>
  23.                     <li><a href="base/2_页面结构.html" target="content">页面结构</a></li>
  24.                     <li><a href="base/3_常用标签.html" target="content">常用标签</a></li>
  25.                     <li><a href="base/4_CSS选择器.html" target="content">CSS选择器</a></li>
  26.                     <li><a href="base/5_CSS样式控制.html" target="content">CSS样式控制</a></li>
  27.                     <li><a href="base/6_CSS盒模型.html" target="content">CSS盒模型</a></li>
  28.                     <li><a href="base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></li>
  29.                     <li><a href="base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li>
  31.                 </ul>
  32.             </li>
  34.             <li style="cursor: pointer;"><strong>框架组件</strong>
  35.                 <ul class="">
  36.                     <li><a href="component/1_栅格布局.html" target="content">栅格布局</a></li>
  37.                     <li><a href="component/2_常用样式.html" target="content">常用样式</a></li>
  38.                     <li><a href="component/3_文本与背景色.html" target="content">文本与背景色</a></li>
  39.                     <li><a href="component/4_表格.html" target="content">表格</a></li>
  40.                     <li><a href="component/5_分页条.html" target="content">分页条</a></li>
  41.                 </ul>
  42.             </li>
  43.         </ul>
  46.     </div>
  48. </main>
  49. <footer class="footer"><p class="phpcn-mb-10 phpcn-tx-c"><a href="https://www.php.cn/">php中文网</a>©版权所有(2019)</p</footer>
  52. </body>
  53. </html>

CSS部分：

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     display: flex;
  7.     height: 100vh;
  8.     flex-flow: column nowrap;
  10. }
  13. li {
  14.     list-style: none;
  15. }
  16. a{
  17.     text-decoration: none;
  18.     color: black;
  19. }
  20. .main{
  21.     box-sizing: border-box;
  22.     flex: 1;
  23.     display: flex;
  24. }
  26. .left{
  27.     box-sizing: border-box;
  28.     width: 200px;
  29.     background-color: #eeeeee;
  30.     padding: 30px;
  31. }
  32. .center{
  33.     box-sizing: border-box;
  34.     flex: 1;
  36. }
  37. .header,
  38. .footer{
  39.     box-sizing: border-box;
  40.     display: flex;
  41.     background-color: #d4d4d4;
  42.     height: 50px   ;
  43. }
  44. .left{
  45.     order: -1;
  46. }
  48. h1{
  49.     color: #555555;
  50.     font-size: 28px;
  51.     font-weight: normal;
  52.     margin-left:30px;
  54. }
  55. h1>span{
  56.     color: red;
  57. }
  58. .left1 > li>strong {
  59.    font-size: 18px;
  61. }
  63. .center{
  64.     display: flex;
  65.     justify-content: center;
  66.     align-content: center;
  67. }
  69. .left1 >li >ul> li{
  70.     font-size: 5px;
  71.     padding-top: 10px;
  72.     margin-left: 10px;
  73. }
  74. .left1 >li >ul> li:last-of-type{
  76.     padding-bottom: 30px;
  77. }
  79. .footer{
  81.     align-content: center;
  83.      justify-content: center;
  84. }

运行效果

学习总结

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