search

博客列表 >仿Php中文网作业

仿Php中文网作业

移动用户-5455461
移动用户-5455461原创
2020年04月13日 19:00:08492浏览

仿站作业链接

  1. 结合所学知识写了整整一天，感觉还有很多的问题，最上面的LOGO条和最下面的倒是固定住了，但是都会把内容遮住，还没有搞明白。
  2. 终于有一点眉目了，很开心，感谢老师的精心教授！
  3. flex的容器部分的学习已经感觉有点清晰了，项目的属性设置还有些问题，还要继续巩固。

代码及效果图

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="static/css/font-icon.css">
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         html {
  16.             width: 100vh;
  17.             /* height: 100vh; */
  18.         }
  20.         body {
  21.             width: 98.5vw;
  22.             /* min-width: 450px; */
  23.             box-sizing: border-box;
  24.             margin: 0;
  25.             padding: 5px;
  26.             display: flex;
  27.             flex-flow: column nowrap;
  28.             font-size: 18px;
  29.             /* align-items: center; */
  30.         }
  32.         a {
  33.             color: #000000;
  34.             /* font-size: 12px; */
  35.             text-decoration: none;
  36.         }
  38.         a:hover {
  39.             color: lightseagreen;
  40.         }
  42.         header>img {
  43.             width: 100px;
  44.         }
  46.         header {
  47.             padding: 0 10px;
  48.             background-color: black;
  49.             color: #ffffff;
  51.             position: fixed;
  52.             /* top: 0; */
  53.             width: 96vw;
  55.             display: flex;
  56.             flex-flow: row nowrap;
  57.             justify-content: space-between;
  58.             align-items: center;
  59.         }
  61.         .logofont {
  62.             font-size: 20px;
  63.         }
  65.         .slide>img {
  66.             /* margin: 2px; */
  67.             width: 100%;
  68.         }
  70.         nav {
  71.             /* margin-top: 10px; */
  72.             display: flex;
  73.             flex-flow: row wrap;
  74.             justify-content: center;
  75.             height: 200px;
  76.             /* font-size: 1.0rem; */
  77.         }
  79.         nav>div a {
  80.             font-size: 1rem;
  81.         }
  83.         nav>div {
  84.             width: 25%;
  85.         }
  87.         nav>div>a>img {
  88.             width: 50px;
  89.         }
  91.         nav>div {
  92.             display: flex;
  93.             flex-flow: column nowrap;
  94.             align-items: center;
  95.             justify-content: center;
  96.             font-size: 1.5rem;
  97.             /* align-self: stretch; */
  98.             /* flex: 1 1 auto; */
  99.         }
  101.         nav>div>a {
  102.             /* flex: 1 1 auto; */
  103.         }
  105.         h2 {
  106.             font-size: 1.2rem;
  108.         }
  110.         .hotclass>.hotclasspic {
  111.             /* width: 95vw; */
  112.             display: flex;
  113.             flex-flow: row nowrap;
  114.             justify-content: space-between;
  116.         }
  118.         .hotclass>.hotclasspic>a>img {
  119.             width: 48vw;
  120.             height: 9vh;
  121.             /* padding:0 10px; */
  122.         }
  124.         .hotclass>.hotclasstxt>.hotclasslist>a img {
  125.             width: 45vw;
  126.             height: 8vh;
  127.         }
  129.         .hotclasstxt {
  131.             justify-content: center;
  132.         }
  134.         .hotclasstxt {
  135.             padding: 5px;
  136.             margin-top: 10px;
  137.             display: flex;
  138.             flex-flow: row nowrap;
  139.             justify-content: space-between;
  141.         }
  143.         .hotclasslist {
  144.             /* flex-grow: 1; */
  145.         }
  147.         .hotclasslisttxt {
  148.             /* flex-grow: 2; */
  149.             /* width: 50vw; */
  150.             /* flex: 1; */
  151.         }
  153.         .hotclasslisttxt {
  155.             padding: 10px;
  156.             display: flex;
  157.             flex-flow: column nowrap;
  158.         }
  160.         .hotclassgrade>span {
  161.             font-size: 0.7rem;
  162.         }
  164.         .hotclassgrade>span:first-of-type {
  165.             color: seashell;
  166.             background-color: #666666;
  167.             border-radius: 5px;
  168.         }
  170.         .newclass>img {
  171.             width: 45vw;
  172.             height: 8vh;
  174.         }
  176.         .newclass {
  177.             padding: 5px;
  178.             display: flex;
  179.             flex-flow: row nowrap;
  180.             justify-content: space-between;
  181.         }
  183.         .newclass>.newupdatetext {
  184.             /* padding: 10px; */
  185.             margin-left: 10px;
  186.             display: flex;
  187.             flex-flow: column nowrap;
  188.             justify-content: space-around;
  189.         }
  191.         .newupdatetext>span>i:first-of-type {
  192.             background-color: #000;
  193.             color: #ffffff;
  194.             padding: 3px;
  195.             border-radius: 5px;
  196.         }
  198.         .newupdatetext>span:last-of-type {
  199.             display: flex;
  200.             flex-flow: row nowrap;
  201.             justify-content: space-between;
  202.         }
  204.         h5 {
  205.             text-align: center;
  206.             color: #9e9a9a;
  207.         }
  209.         .newarticle {
  210.             padding: 5px;
  211.             box-shadow: 1px 1px 10px 5px #d8d5d5;
  212.             /* width: 89vw; */
  213.             /* border: 1 solid red; */
  214.         }
  216.         .newarticle>span>i {
  217.             font-size: 0.8rem;
  218.         }
  220.         .newarticle>span>img {
  221.             width: 45vw;
  222.         }
  224.         .newarticle {
  225.             margin-top: 15px;
  226.             display: flex;
  227.             flex-flow: row nowrap;
  228.             justify-content: space-between;
  229.         }
  231.         .newarticle>span:first-of-type {
  232.             display: flex;
  233.             flex-flow: column nowrap;
  234.         }
  236.         .newarticle>span>p:first-of-type {
  237.             font-size: 1.0rem;
  238.         }
  240.         .newarticle>span>p:last-of-type {
  241.             font-size: 0.8rem;
  242.         }
  244.         .newblog {
  245.             margin-top: 10px;
  246.             width: 97vw;
  247.             box-shadow: 1px 1px 10px 5px #d8d5d5;
  248.             padding: 10px;
  249.             display: flex;
  250.             flex-flow: row nowrap;
  251.             justify-content: space-between;
  252.         }
  254.         .newblog>span:first-of-type {
  255.             font-size: 0.8rem;
  256.         }
  258.         .newblog>span:last-of-type {
  259.             font-size: 0.7rem;
  260.         }
  263.         .newqa {
  264.             margin-top: 10px;
  265.             width: 97vw;
  266.             box-shadow: 0px 1px 10px 5px #d8d5d5;
  267.             padding: 10px;
  268.             display: flex;
  269.             flex-flow: row nowrap;
  270.             justify-content: space-between;
  271.         }
  273.         .newqa>span:first-of-type {
  274.             font-size: 0.8rem;
  275.         }
  277.         .newqa>span:last-of-type {
  278.             font-size: 0.7rem;
  279.         }
  281.         footer {
  282.             width: 99vw;
  283.             height: 60px;
  284.             background-color: #9e9e9e;
  285.             display: flex;
  286.             flex-flow: row nowrap;
  287.             justify-content: space-around;
  289.             position: fixed;
  290.             bottom: 0;
  292.         }
  294.         footer>a {
  295.             display: flex;
  296.             flex-flow: column nowrap;
  297.             justify-content: center;
  298.             align-items: center;
  299.         }
  301.         footer>a>span:first-of-type {
  302.             font-size: 1.6rem;
  303.         }
  305.         footer>a>span:last-of-type {
  306.             font-size: 1rem;
  307.         }
  308.     </style>
  309. </head>
  311. <body>
  312.     <!-- 顶部 -->
  313.     <header>
  314.         <div class="iconfont logofont"></div>
  315.         <img src="static/images/logo.png" alt="">
  316.         <div class="iconfont logofont"></div>
  317.     </header>
  319.     <!-- 轮播图 -->
  320.     <div class="slide"><img src="static/images/11.png" alt=""></div>
  322.     <!-- 导航 -->
  323.     <nav>
  324.         <div>
  325.             <a href=""><img src="static/images/html.png" alt=""></a>
  326.             <a href="">HTML/CSS</a>
  327.         </div>
  329.         <div>
  330.             <a href=""><img src="static/images/JavaScript.png" alt=""></a>
  331.             <a href="">JavaScript</a>
  332.         </div>
  334.         <div>
  335.             <a href=""><img src="static/images/code.png" alt=""></a>
  336.             <a href="">服务器</a>
  337.         </div>
  339.         <div>
  340.             <a href=""><img src="static/images/sql.png" alt=""></a>
  341.             <a href="">数据库</a>
  342.         </div>
  344.         <div>
  345.             <a href=""><img src="static/images/app.png" alt=""></a>
  346.             <a href="">移动端</a>
  347.         </div>
  349.         <div>
  350.             <a href=""><img src="static/images/manual.png" alt=""></a>
  351.             <a href="">手册</a>
  352.         </div>
  354.         <div>
  355.             <a href=""><img src="static/images/tool2.png" alt=""></a>
  356.             <a href="">工具</a>
  357.         </div>
  359.         <div>
  360.             <a href=""><img src="static/images/live.png" alt=""></a>
  361.             <a href="">直播</a>
  362.         </div>
  363.     </nav>
  364.     <!-- 推荐课程  -->
  365.     <h2>推荐课程</h2>
  366.     <div class="hotclass">
  367.         <div class="hotclasspic">
  368.             <a href=""><img src="static/images/hotcalss.jpg" alt=""></a>
  369.             <a href=""><img src="static/images/hotcalss.jpg" alt=""></a>
  370.         </div>
  373.         <div class="hotclasstxt">
  375.             <div class="hotclasslist">
  376.                 <a href=""><img src="static/images/ci30.jpg" alt=""></a>
  377.             </div>
  379.             <div class="hotclasslisttxt">
  380.                 <a href="" style="font-size: 1rem;">CI框架30分钟极速入门</a>
  381.                 <div class="hotclassgrade">
  382.                     <span>中级</span> <span>61302次播放</span>
  383.                 </div>
  384.             </div>
  386.         </div>
  388.         <div class="hotclasstxt">
  390.             <div class="hotclasslist">
  391.                 <a href=""><img src="static/images/2018frt.jpg" alt=""></a>
  392.             </div>
  394.             <div class="hotclasslisttxt">
  395.                 <a href="" style="font-size: 1rem;">2018前端入门_HTML5</a>
  396.                 <div class="hotclassgrade">
  397.                     <span>初级</span> <span>30637次播放</span>
  398.                 </div>
  399.             </div>
  401.         </div>
  404.     </div>
  406.     <!-- 最新更新  -->
  407.     <h2>最新更新</h2>
  410.     <div class="newclass">
  411.         <div class="newupdate">
  412.             <a href=""><img src="static/images/n1.png" style="width: 45vw;height: 8vh;" alt=""></a>
  413.         </div>
  414.         <div class="newupdatetext">
  415.             <span><a href="" style="font-size: 1.0rem;">PHP快速操控Excel之PhpS</a></span>
  416.             <span style="font-size: 0.8rem;">老的PHPExcel已经停止更新了！目前最新的</span>
  417.             <span><i style="font-size: 0.6rem;">初级</i><i style="font-size: 0.6rem;">15203次播放</i></span>
  418.         </div>
  419.     </div>
  421.     <div class="newclass">
  422.         <div class="newupdate">
  423.             <a href=""><img src="static/images/n2.png" style="width: 45vw;height: 8vh;" alt=""></a>
  424.         </div>
  425.         <div class="newupdatetext">
  426.             <span><a href="" style="font-size: 1.0rem;">Thinkphp6.0正式版视频教程</a></span>
  427.             <span style="font-size: 0.8rem;">老的PHPExcel已经停止更新了！目前最新的</span>
  428.             <span><i style="font-size: 0.6rem;">初级</i><i style="font-size: 0.6rem;">15203次播放</i></span>
  429.         </div>
  430.     </div>
  432.     <div class="newclass">
  433.         <div class="newupdate">
  434.             <a href=""><img src="static/images/n3.jpg" style="width: 45vw;height: 8vh;" alt=""></a>
  435.         </div>
  436.         <div class="newupdatetext">
  437.             <span><a href="" style="font-size: 1.0rem;">2019python自学视频</a></span>
  438.             <span style="font-size: 0.8rem;">老的PHPExcel已经停止更新了！目前最新的</span>
  439.             <span><i style="font-size: 0.6rem;">初级</i><i style="font-size: 0.6rem;">15203次播放</i></span>
  440.         </div>
  441.     </div>
  443.     <div class="newclass">
  444.         <div class="newupdate">
  445.             <a href=""><img src="static/images/n4.png" style="width: 45vw;height: 8vh;" alt=""></a>
  446.         </div>
  447.         <div class="newupdatetext">
  448.             <span><a href="" style="font-size: 1.0rem;">PHP开发免费公益直播课</a></span>
  449.             <span style="font-size: 0.8rem;">老的PHPExcel已经停止更新了！目前最新的</span>
  450.             <span><i style="font-size: 0.6rem;">初级</i><i style="font-size: 0.6rem;">15203次播放</i></span>
  451.         </div>
  452.     </div>
  454.     <div class="newclass">
  455.         <div class="newupdate">
  456.             <a href=""><img src="static/images/n5.png" style="width: 45vw;height: 8vh;" alt=""></a>
  457.         </div>
  458.         <div class="newupdatetext">
  459.             <span><a href="" style="font-size: 1.0rem;">从零开始到WEB响应式布局</a></span>
  460.             <span style="font-size: 0.8rem;">老的PHPExcel已经停止更新了！目前最新的</span>
  461.             <span><i style="font-size: 0.6rem;">初级</i><i style="font-size: 0.6rem;">15203次播放</i></span>
  462.         </div>
  463.     </div>
  465.     <div class="newclass">
  466.         <div class="newupdate">
  467.             <a href=""><img src="static/images/n6.png" style="width: 45vw;height: 8vh;" alt=""></a>
  468.         </div>
  469.         <div class="newupdatetext">
  470.             <span><a href="" style="font-size: 1.0rem;">PHP文件基础操作</a></span>
  471.             <span style="font-size: 0.8rem;">老的PHPExcel已经停止更新了！目前最新的</span>
  472.             <span><i style="font-size: 0.6rem;">初级</i><i style="font-size: 0.6rem;">15203次播放</i></span>
  473.         </div>
  474.     </div>
  478.     <h2>最新文章</h2>
  480.     <div class="newarticle">
  481.         <span>
  482.             <p><a href="">PS怎么保存调好的预设??</a></p>
  483.             <p>发布时间：2020-1-13</p>
  484.         </span>
  485.         <span><a href=""><img src="static/images/a1.jpg" alt="" style="widows: 45vw;height: 8vh;"></a></span>
  486.     </div>
  488.     <div class="newarticle">
  489.         <span>
  490.             <p><a href="">3dmax2014怎么切换中文版</a></p>
  491.             <p>发布时间：2020-1-13</p>
  492.         </span>
  493.         <span><a href=""><img src="static/images/a2.jpg" alt="" style="widows: 45vw;height: 8vh;"></a></span>
  494.     </div>
  496.     <div class="newarticle">
  497.         <span>
  498.             <p><a href="">身份证复制粘贴到exls后显示E+17怎么办</a></p>
  499.             <p>发布时间：2020-1-13</p>
  500.         </span>
  501.         <span><a href=""><img src="static/images/a3.jpg" alt="" style="widows: 45vw;height: 8vh;"></a></span>
  502.     </div>
  504.     <div class="newarticle">
  505.         <span>
  506.             <p><a href="">windows电脑提示已关闭无线功能怎么</a></p>
  507.             <p>发布时间：2020-1-13</p>
  508.         </span>
  509.         <span><a href=""><img src="static/images/a4.jpg" alt="" style="widows: 45vw;height: 8vh;"></a></span>
  510.     </div>
  512.     <div class="newarticle">
  513.         <span>
  514.             <p><a href="">msc是什么</a></p>
  515.             <p>发布时间：2020-1-13</p>
  516.         </span>
  517.         <span><a href=""><img src="static/images/a5.jpg" alt="" style="widows: 45vw;height: 8vh;"></a></span>
  518.     </div>
  519.     <h5>更多内容</h5>
  521.     <!-- 最新博文 -->
  522.     <h2>最新博文</h2>
  523.     <div class="newblog">
  524.         <span>细说选择器：简单选择器、上下文选择器、</span>
  525.         <span>2020-04-13</span>
  526.     </div>
  527.     <div class="newblog">
  528.         <span>CSS 中各类选择器的属性及应用</span>
  529.         <span>2020-04-13</span>
  530.     </div>
  532.     <div class="newblog">
  533.         <span>CSS3：弹性盒子flex布局</span>
  534.         <span>2020-04-13</span>
  535.     </div>
  537.     <div class="newblog">
  538.         <span>flex容器中的主轴方向与项目换行缩写、主</span>
  539.         <span>2020-04-13</span>
  540.     </div>
  542.     <div class="newblog">
  543.         <span>Jquery+AJAX上传文件，无刷新上传并重</span>
  544.         <span>2020-04-13</span>
  545.     </div>
  546.     <h5>更多内容</h5>
  548.     <!-- 最新问答 -->
  549.     <h2>最新问答</h2>
  551.     <div class="newqa">
  552.         <span>为什么老师，你de button按钮处可以有</span>
  553.         <span>2020-04-13</span>
  554.     </div>
  555.     <div class="newqa">
  556.         <span>url访问admin下的控制器的方法，有问题</span>
  557.         <span>2020-04-13</span>
  558.     </div>
  559.     <div class="newqa">
  560.         <span>php+workerman实现新订单提示语音</span>
  561.         <span>2020-04-13</span>
  562.     </div>
  563.     <div class="newqa">
  564.         <span>不出现tp6.0页面</span>
  565.         <span>2020-04-13</span>
  566.     </div>
  567.     <div class="newqa">
  568.         <span>数据库密码··</span>
  569.         <span>2020-04-13</span>
  570.     </div>
  573.     <h5>更多内容</h5>
  578.     <footer>
  579.         <a href="">
  580.             <span class="iconfont"></span>
  581.             <span>首页</span>
  582.         </a>
  583.         <a href="">
  584.             <span class="iconfont"></span>
  585.             <span>视频</span>
  586.         </a>
  587.         <a href="">
  588.             <span class="iconfont"></span>
  589.             <span>社区</span>
  590.         </a>
  591.         <a href="">
  592.             <span class="iconfont"></span>
  593.             <span>我的</span>
  594.         </a>
  597.     </footer>
  598. </body>
  600. </html>
上一条：css的选择器知识汇总（简单选择器，上下文选择器，伪类选择器）下一条：Flex布局案例：实现php中文网首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多