search

博客列表 >CCS3：PHP中文网移动版

CCS3：PHP中文网移动版

楷
楷原创
2020年04月12日 21:51:51754浏览

总结：
这次编程序花了整天两天时间，虽然效果一般，但收获挺多，发现自己存在许多问题，好好总结。
1.HTML5和CSS3基础很重要，没有以上坚实基础，影响弹性盒子应用的发挥。
2.老师课堂教的知识要一边看回访一边记住要点，重新整理笔记。
3.希望老师提供下次课花点时间讲些本次作业的要点。最后提供本次样板或者其他优秀的作业，让我多读多看。

演示效果：

PHP中文网移动版

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="static/css/font-icon.css">
  7.     <title>PHP中文网（手机高仿版）</title>
  8.     <style>
  9.         /* 初始化 */
  10.         *{
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         html{
  15.             width: 100vw;
  16.             height: 100vh;
  17.             font-size: 14px;
  18.         }
  19.         body{
  20.             min-width: 360px;
  21.             /* width: 360px; */
  22.             background-color:#fff;
  23.             display: flex;
  24.             flex-flow: column nowrap;
  25.         }
  26.         a{
  27.             /* 所有的链接文字取消下划线，字体为灰色 */
  28.             text-decoration: none;
  29.             color: #666;
  30.         }
  31.         .more{
  32.             /* 所有的“更多内容”居中 */
  33.             text-align: center;
  34.             width: 700px;
  35.         }
  36.         /* 页眉 */
  37.         span{
  38.             color: #efefef;
  39.         }
  40.         body>header{
  41.             background-color: #333;
  42.             color: white;
  43.             display: flex;
  44.             align-items: center;
  45.             justify-content: space-between;
  46.             width: 700px;
  47.             height: 40px;
  48.             padding: 0 15px;
  49.             position: fixed;
  50.         }
  51.         /* 横幅广告 */
  52.        .slide{
  53.            height: 330px;
  54.        }
  55.         .slide>img{
  56.             width:730px;
  57.         }
  58.         /* 导航区 */
  59.         nav{
  60.             height: 200px;
  61.             width: 700px;
  62.              /* 变成多行容器 */
  63.             display: flex;
  64.             flex-flow: row wrap;
  65.         }
  66.         nav>div{
  67.             /* 占宽度四分之一 */
  68.             width: 175px;
  69.             display: flex;
  70.             flex-flow: column nowrap;
  71.             text-align: center;
  72.             align-items: center;
  74.         }
  75.         nav>div img{
  76.             width: 60%;
  77.         }
  78.         /* 推荐课程 */
  79.         h2{
  80.             background-color:lightgray;
  81.             height: 40px;
  82.             width: 730px;
  83.             padding-top: 10px;
  84.         }
  85.         .good-course{
  86.             width: 700px;
  87.             display: flex;
  88.             flex-flow: row nowrap; 
  89.             justify-content: flex-start;
  90.             margin-right: 10px;
  91.         }
  92.         .good-course img{
  93.             width: 350px;
  94.             margin-right: 20px;
  95.         }
  96.         .good-course1{
  97.             width: 1356px;
  98.             display: flex;
  99.             justify-content: flex-start;
  100.         }
  101.         .good-course1 img{
  102.             width: 350px;
  103.         }
  104.         .good-course1>a{
  105.             width: 400px;
  106.         }
  108.         /* 最新更新 */
  109.         .update{
  110.             width: 700px;
  111.             display: flex;
  112.             flex-flow: column nowrap;
  113.         }
  114.         .new{
  115.             display: flex;
  116.         }
  117.         /* 图片统一尺寸 */
  118.         .new img{
  119.             width: 450px;
  120.         }
  122.         /* 最新文章 */
  123.         .article{
  124.             display: flex;
  125.             flex-flow: column nowrap;
  126.             width: 700px;
  127.         }
  128.         .paper{
  129.             display: flex;
  130.             justify-content: flex-end;
  131.         }
  132.         .article img{
  133.             width: 450px;
  135.         }
  137.          /* 最新博文 */
  138.         .bw{
  139.             display: flex;
  140.             justify-content: space-between;
  141.             width: 700px;
  142.         }
  143.         .bw>a{
  144.             margin: 10px;
  145.             padding: 5px;
  146.             border: 1px;
  147.             box-shadow: lightgrey;
  148.         }
  150.         /* 最新问答 */
  151.         .newanswer{
  152.             display: flex;
  153.             flex-flow: column;
  154.             height: 350px;
  155.         }
  156.         .answer{
  157.             display: flex;
  158.             justify-content: space-between;
  159.             width: 700px;
  160.             height: 50px;
  161.         }
  163.         /* 页脚 */
  164.         footer{
  165.             display: flex;
  166.             flex-flow: row nowrap;
  167.             width: 700px;
  168.             height: 50px;
  169.             justify-content: space-around;
  170.             /* 固定底部横条 */
  171.             position: fixed;
  172.             bottom: 0;
  173.             color: #666;
  174.             background-color: #efefef;
  175.             border-top: 1px solid #ccc;
  176.         }
  177.         footer>div{
  178.             display: flex;
  179.             flex-flow: column wrap;
  180.         }
  181.         footer>div>span{
  182.             width: 100px;
  183.             /* height: 100px; */
  184.             color: red;
  185.         }
  186.     </style>
  187. </head>
  188. <body>
  189.     <!-- 页眉 -->
  190.     <header>
  191.         <a href="">微博 </a>
  192.         <a href="">PHP中文网</a>
  193.         <span class="iconfont"></span>
  194.     </header>
  195.     <!-- 横幅广告 -->
  196.     <div class="slide">
  197.         <img src="static/images/11.png" alt="">
  198.     </div>
  200.     <!-- 导航 -->
  201.     <nav>
  202.         <div>
  203.             <a href=""><img src="static/images/html.png" alt=""></a>
  204.             <a href="">HTML/CSS</a>
  205.         </div>
  206.         <div>
  207.             <a href=""><img src="static/images/JavaScript.png" alt=""></a>
  208.             <a href="">JavaScript</a>
  209.         </div>
  210.         <div>
  211.             <a href=""><img src="static/images/code.png" alt=""></a>
  212.             <a href="">服务端</a>
  213.         </div>
  214.         <div>
  215.             <a href=""><img src="static/images/sql.png" alt=""></a>
  216.             <a href="">数据库</a>
  217.         </div>
  218.         <div>
  219.             <a href=""><img src="static/images/app.png" alt=""></a>
  220.             <a href="">移动端</a>
  221.         </div>
  222.         <div>
  223.             <a href=""><img src="static/images/manual.png" alt=""></a>
  224.             <a href="">手册</a>
  225.         </div>
  226.         <div>
  227.             <a href=""><img src="static/images/tool2.png" alt=""></a>
  228.             <a href="">工具</a>
  229.         </div>
  230.         <div>
  231.             <a href=""><img src="static/images/live.png" alt=""></a>
  232.             <a href="">直播</a>
  233.         </div>
  234.     </nav>
  236.     <!-- 推荐课程 -->
  237.     <br>
  238.     <h2>推荐课程</h2>
  239.     <div class="good-course">
  240.         <a href="" class="image1"><img src="static/images/3-1.jpg" alt=""></a>
  241.         <a href="" class="image1"><img src="static/images/3-2.jpg" alt=""></a>
  242.     </div>
  243.     <div class="good-course1">
  244.         <a href=""><img src="static/images/cou1.jpg" alt=""></a>
  245.         <div>
  246.             <a href=""><h3>CI框架30分钟极速入门</h3></a>
  247.             <p>中级 61279次播放</p>
  248.     </div>  
  249.     </div>
  250.          <div class="good-course1">
  251.         <a href=""><img src="static/images/cou2.jpg" alt=""></a>
  252.         <div>
  253.             <a href=""><h3>2018前端入门_HTML5</h3></a>
  254.             <p>初级 310441次播放</p>
  255.         </div>
  257.     </div>
  259.     <!-- 最新更新 -->
  260.     <h2>最新更新</h2>
  261.     <div class="update">
  262.         <div class="new">
  263.             <a href=""><img src="static/images/n1.png" alt=""></a>
  264.             <a href=""><h3>PHP快速操控Excel之PhpSpreadsheet</h3></a>
  265.             <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet</p>    
  266.         </div>
  267.         <div class="new">
  268.             <a href=""><img src="static/images/n2.png" alt=""></a>
  269.             <a href=""><h3>Thinkphp6.0正式版视频教程 </h3></a>
  270.             <p>Thinkphp6.0从2019年10月24日正式发布，相对测试版，有很多变动，目前TP6已经</p> 
  271.         </div>
  272.         <div class="new">
  273.             <a href=""><img src="static/images/n3.png" alt=""></a>
  274.             <a href=""><h3>2019python自学视频</h3></a>
  275.             <p>本课程适合想从零开始学习 Python 编程语言的开发人员。由浅入深的带你进入</p>
  276.         </div>
  277.         <div class="new">
  278.             <a href=""><img src="static/images/n4.png" alt=""></a>
  279.             <a href=""><h3>PHP开发免费公益直播课</h3></a>
  280.             <p>主讲：php中文网-朱老师( Peter Zhu) 时间：2019.10.17 晚 20:00-22:00 主题</p>
  281.         </div>
  282.         <div class="new">
  283.             <a href=""><img src="static/images/n5.png" alt=""></a>
  284.             <a href=""><h3>从零开始到WEB响应式布局</h3></a>
  285.             <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利</p>
  286.         </div>
  287.         <div class="new">
  288.             <a href=""><img src="static/images/n6.png" alt=""></a>
  289.             <a href=""><h3>PHP文件基础操作</h3></a>
  290.             <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家</p>
  291.         </div>
  292.     </div>
  294.     <!-- 最新文章 -->
  295.     <h2>最新文章</h2>
  296.     <div class="article">
  297.         <div class="paper">
  298.             <a href=""><p>电脑开机出现windows错误恢复怎么办</p> 
  299.                <p>发布时间：2020-04-12</p> </a>
  300.             <a href=""><img src="static/images/p1.jpg" alt=""></a>
  301.         </div>
  302.         <div class="paper">
  303.             <a href=""><p>win7系统与游戏不兼容怎么办</p> 
  304.                <p>发布时间：2020-04-12</p> </a>
  305.             <a href=""><img src="static/images/p2.jpg" alt=""></a>
  306.         </div>
  307.         <div class="paper">
  308.             <a href=""><p>公众号长图怎么无缝排版</p> 
  309.                <p>发布时间：2020-04-12</p> </a>
  310.             <a href=""><img src="static/images/p3.jpg" alt=""></a>
  311.         </div>
  312.         <div class="paper">
  313.             <a href=""><p>ps钢笔压力前面有感叹号怎么解决</p> 
  314.                <p>发布时间：2020-04-12</p> </a>
  315.             <a href=""><img src="static/images/p4.jpg" alt=""></a>
  316.         </div>
  317.         <div class="paper">
  318.             <a href=""><p>能打开rar文件的应用是什么</p> 
  319.                <p>发布时间：2020-04-12</p> </a>
  320.             <a href=""><img src="static/images/p5.jpg" alt=""></a>
  321.         </div>
  322.     </div> 
  323.     <a href="" class="more">更多内容</a>
  325.     <!-- 最新博文 -->
  326.     <h2>最新博文</h2>
  327.     <div class="bw">
  328.         <a href="">CSS3：弹性盒子flex布局</a>
  329.         <a href="">2020-04-12</a>
  330.     </div>
  331.     <div class="bw">
  332.         <a href="">Jquery+AJAX上传文件，无刷新上传并重命名文件</a>
  333.         <a href="">2020-04-11</a>
  334.     </div>
  335.     <div class="bw">
  336.         <a href="">thinkphp5.6源码阅读1</a>
  337.         <a href="">2020-04-11</a>
  338.     </div>
  339.     <div class="bw">
  340.         <a href="">Composer windows安装详细介绍</a>
  341.         <a href="">2020-04-10</a>
  342.     </div>
  343.     <div class="bw">
  344.         <a href="">AI智能电销机器人源码 源码解读（1）—基础</a>
  345.         <a href="">2020-04-10</a>
  346.     </div>
  347. <a href="" class="more">更多内容</a>
  349.     <!-- 最新问答 -->
  350.     <h2>最新问答</h2>
  351.     <div class="newanswer">
  352.         <div class="answer">
  353.             <a href="">不出现tp6.0页面</a>
  354.             <a href="">2020-04-12</a>
  355.         </div>
  356.         <div class="answer">
  357.             <a href="">数据库密码··</a>
  358.             <a href="">2020-04-12</a>
  359.         </div>
  360.         <div class="answer">
  361.             <a href="">制定的学习计划在哪能找到 咋找不到呢?</a>
  362.             <a href="">2020-04-11</a>
  363.         </div>
  364.         <div class="answer">
  365.             <a href="">数据库链接后怎么知道用哪个表啊</a>
  366.             <a href="">2020-04-11</a>
  367.         </div>
  368.         <div class="answer">
  369.             <a href="">这个同步的东西</a>
  370.             <a href="">2020-04-11</a>
  371.         </div>
  372.         <div class="answer">
  373.             <a href="" class="more">更多内容</a>
  374.         </div>
  376.     </div>  
  379.     <!-- 页脚 -->
  380.     <footer>
  381.         <div>
  382.             <span></span> 
  383.             <a href="">首页</a>
  384.         </div>
  385.         <div>
  386.             <span></span> 
  387.             <a href="">视频</a>
  388.         </div>
  389.         <div>
  390.             <span></span> 
  391.             <a href="">社区</a>
  392.         </div>
  393.         <div>
  394.             <span></span> 
  395.             <a href="">我的</a>
  396.         </div>
  397.     </footer>
  398. </body>
  399. </html>
上一条：细说选择器：简单选择器、上下文选择器、伪类选择器、其它选择器下一条：css的认知和应用，媒体查询的体验
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多