简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端2周基础学习总结--php培训第九期线上班
Blogger Information
Blog 19
fans 1
comment 0
visits 13307
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
前端2周基础学习总结--php培训第九期线上班
涤尘
Original
584 people have browsed it

1. Flex改写phpcnui手册

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>PHPuicn框架</title>
  5.     <link rel="stylesheet" type="text/css" href="css/style.css">
  6. </head>
  7. <body>
  8. <header>
  9.     <div class="header">
  10.     <span>phpcn UI </span>
  11.     <h5>用户参考手册</h5>
  12.     </div>
  13. </header>
  14. <main>
  15. <div class="left">
  16.     <ul>
  17.         <h4>前端基础</h4>
  18.              <li><a href="base/1_框架安装.html" target="content">框架安装</a></li>
  19.             <li><a href="base/2_页面结构.html" target="content">页面结构</a></li>
  20.             <li><a href="base/3_常用标签.html" target="content">常用标签</a></li>
  21.             <li><a href="base/4_CSS选择器.html" target="content">CSS选择器</a></li>
  22.             <li><a href="base/5_CSS样式控制.html" target="content">CSS样式控制</a></li>
  23.             <li><a href="base/6_CSS盒模型.html" target="content">CSS盒模型</a></li>
  24.             <li><a href="base/7_CSS浮动与定位.html" target="content">CSS浮动与定位</a></li>
  25.             <li><a href="base/8_CSS常用布局方式.html" target="content">CSS常用布局方式</a></li>
  26.     </ul>
  27.         <h4>框架组件</h4>
  28.     <ul>
  29.             <li><a href="component/1_栅格布局.html" target="content">栅格布局</a></li>
  30.             <li><a href="component/2_常用样式.html" target="content">常用样式</a></li>
  31.             <li><a href="component/3_文本与背景色.html" target="content">文本与背景色</a></li>
  32.             <li><a href="component/4_表格.html" target="content">表格</a></li>
  33.             <li><a href="component/5_分页条.html" target="content">分页条</a></li>
  34.     </ul>
  36.     <span>php中文网©版权所有(2019)</span>
  37.     </div>
  38. <iframe src="welcome.html" frameborder="0" name="content" width="100%" height="900px"></iframe>
  40. </main>
  42. </body>
  43. </html>
  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4.     list-style: none;
  5.     text-decoration: none;
  6. }
  7. body {
  8.     display: flex;
  9.     flex-flow: column nowrap;
  11. }
  13. header {
  14.     display: flex;
  15.     height: 60px;
  16.     background-color: #919191;
  18. }
  19. header > .header {
  20.     display: flex;
  21.     flex-flow: row nowrap;
  22.     margin-left: 30px;
  23.     margin-top: 10px;
  24. }
  25. header > .header > span {
  26.     color: #FFA722;
  27.     font-size: 30px;
  28.     font-weight: bold;
  29. }
  30. header > .header > h5 {
  31.     color: #3C3C3C;
  32.     font-size: 30px;
  33.     margin-left: 5px;
  34. }
  36. main {
  37.     display: flex;
  38.     flex:1;
  39. }
  40. main > .left {
  41.     display: flex;
  42.     flex-flow: column wrap;
  43.     width: 240px;
  44.     padding-top:30px;
  45.     padding-left: 30px;
  46.     background-color: #EEEEEE;
  47. }
  49. main > .left > ul > li {
  50.     margin-left: 22px;
  51.     margin-top: 5px;
  52. }
  53. main > .left > h4:last-of-type {
  54.     padding-top: 5px;
  55. }
  56. main > .left > ul > li > a {
  57.     color: black;
  58.     font-size: 0.8rem;
  59. }
  60. main > .left > ul > li >a:hover {
  61.     background:linear-gradient(#0099FF, white);
  62. }
  63. main > .left > span {
  64.     font-size: smaller;
  65.     margin-top: auto;
  66.     padding-right: 10px;
  67. }
  68. main > iframe {
  69.     margin-left: 70px;
  70.     margin-top:45px;
  71. }

内容页代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>首页</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9. <h2>phpcn UI 框架特点:</h2>
  10. <h4>遵循HTML5/CSS3/ES5/6编程规范, 具有如下特点:</h5>
  11. <ul>
  12. <li><strong>免费开源:</strong> 您不需要付任何费用, 就可以用在你的项目或商业应用中</li>
  13. <li><strong>简洁高效:</strong> 秉承大道至简原则, 一切为开发者服务, 在不失功能前提下进行最大程序的简化</li>
  14. <li><strong>易学好用:</strong> 开箱即用, 学习门槛极低, 优雅易记的命名规范, 方便您的二次开发与扩展</li>
  15. </ul>
  17. </body>
  18. </html>
  1. * {
  2.     padding: 0;
  3.     margin:0;
  4. }
  5. body{
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9.     margin-top: 60px;
  10.     margin-left: 40px;
  12. }
  13. body > h2 {
  14.     color: blue;
  15. }
  16. body > h4 {
  17.     margin-top: 30px;
  18.     color: #808080;
  19. }
  20. body > ul {
  21.     margin-top: 20px;
  22.     list-style: none;
  23.     font-size: 16px;
  24. }
  25. body > ul > li {
  26.     margin-top: 10px;
  27. }

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！