Community Learn Tools Library Leisure
search
English
Home > List of blog posts > php第九期线上培训第10天课下作业---flex改写phpcnui手册
Blogger Information
Blog 11
fans 2
comment 0
visits 8107
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
php第九期线上培训第10天课下作业---flex改写phpcnui手册
奋斗吧，JOY！
Original
723 people have browsed it

一、Flex改写phpcnui手册的代码：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="1120style.css">
  6.     <title>php ui 用户参考手册</title>
  7. </head>
  8. <body>
  9. <header>
  10.     <span>phpcn UI </span>用户参考手册
  11. </header>
  12. <main>
  13.     <aside>
  14.         <h2>前端基础</h2>
  15.         <div class="mulu1">
  16.             <ul>
  17.                 <li><a href="static/base/1_框架安装.html" target="content">框架安装</a></li>
  18.                 <li><a href="static/base/2_页面结构.html" target="content">页面结构</a></li>
  19.                 <li><a href="static/base/3_常用标签.html" target="content">常用标签</a></li>
  20.                 <li><a href="static/base/4_CSS选择器.html" target="content">CSS选择器</a></li>
  21.                 <li><a href="static/base/6_CSS盒模型.html" target="content">CSS样式控制</a></li>
  22.                 <li><a href="static/base/6_CSS盒模型.html" target="content">CSS盒模型</a></li>
  23.                 <li><a href="static/base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></li>
  24.                 <li><a href="static/base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li>
  25.             </ul>
  26.         </div>
  27.         <h2>框架基础</h2>
  28.         <div class="mulu2">
  29.             <ul>
  30.                 <li><a href="static/component/1_栅格布局.html" target="content">栅格布局</a></li>
  31.                 <li><a href="static/component/2_常用样式.html" target="content">常用样式</a></li>
  32.                 <li><a href="static/component/3_文本与背景色.html" target="content">文本与背景色</a></li>
  33.                 <li><a href="static/component/4_表格.html" target="content">表格</a></li>
  34.                 <li><a href="static/component/5_分页条.html" target="content">分页条</a></li>
  35.             </ul>
  36.         </div>
  37.     </aside>
  38.     <article>
  39.         <iframe src="static/welcome.html" frameborder="0" name="content"></iframe>
  40.     </article>
  41. </main>
  42. </body>
  43. </html>

css部分：

  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  6. li a{
  7.     text-decoration:none;
  8.     color:#777777;
  9. }
  10. main .mulu1, a:hover,
  11. main .mulu2 a:hover{
  12.     color:red;
  13. }
  14. main aside h2{
  15.     margin-left:20px;
  16.     color:#272822;
  17. }
  18. ul li{
  19.     list-style: none;
  20.     padding:5px;
  21. }
  22. body{
  23.     display:flex;
  24.     flex-flow:column nowrap;
  25. }
  26. header{
  27.     background-color:#d4d4d4;
  28.     height:60px;
  29.     font-family:'Simhei';
  30.     font-size:30px;
  31.     font-weight:bold;
  32.     line-height: 60px;
  33.     color:#777777;
  34. }
  35. header>span{
  36.     color:#ff7736;
  37.     margin-left:40px;
  38.     text-shadow: 1px 1px 3px black;
  39. }
  40. main{
  41.     display:flex;
  42.     flex-flow:row nowrap;
  43.     box-sizing: border-box;
  44. }
  45. aside{
  46.     padding-top:50px;
  47.     height:auto;
  48.     background-color: #eeeeee;
  49.     flex:0.2;
  50. }
  51. main aside .mulu1,.mulu2{
  52.     display:flex;
  53.     margin-left:50px;
  54. }
  55. main article{
  56.     display:flex;
  57.     flex:0.8;
  58.     width:800px;
  59.     min-height:750px;
  60.     height:auto;
  61. }
  62. main article iframe{
  63.     overflow:hidden;
  64.     flex:1;
  65.     box-sizing:border-box;
  66.     height:1000px;
  67.     padding:50px 0 0 100px;
  68. }

效果图如下：

二、手写作业：

三、总结下学习两周后的感想：

说实话，一开始我是拒绝线上直播课的，总感觉这类网络教育机构大多数都是利益驱使，教学质量估计还不如自己自学的好，尤其是关注了好几个这类网络教育机构的微信后，整天打电话要我报他们的班，又是发线下教学环境又是强调自己教学资质好质量高，烦都烦死了。后来无意发现了php中文网，看到里边好多完全免费的教学视频，脑子里第一个问号就是这个教育网站靠什么赚钱？后来就在php中文网看着免费视频学了些html和css的基础，越发感觉这个教育网站非常良心，当注意到第九期线上直播班开始招生，看着他们收费只要几千块，一开始有点犹豫，毕竟学费相比其他机构确实低了很多，有点害怕教学质量不行，讲师对学习不够负责任。
犹豫了几天终于还是报了名，但学了两周后感觉完全不同了，之前全靠自己看视频自学，发现很迷茫，完全找不到学习方法，直播课学了两周发现这两周内讲的知识点非常密集，而且讲师很负责，不管是课堂上讲课还是课下布置作业，为了学员能够尽快学扎实所有的知识点，也是想尽了办法。
之前自学完全是盲人摸象，很庆幸自己报了这个班，希望自己能从这个班毕业后，找到心仪的工作岗位。也希望php中文网越做越好，成为行业内无人能敌的大佬！

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