search

博客列表 >php中文网仿站

php中文网仿站

magician风
magician风原创
2020年04月14日 16:31:421224浏览

先写总结：
因为时间问题只能听录播，听完觉得商城仿站完全能听懂，周一开始做中文网仿站，觉得有两个小时应该可以搞定，结果…… 四个小时都做很糟糕，还有一些细节上纠结了半天没敢深究。本来昨天可以交的，网页上测试可以，放服务器上一看，完全蒙了，手机端完全乱的，图片到处乱跑。晚上看孩子稍的又研究了一阵，发现了些问题，今天早上看了会md文档，发现之前思路就根本不清楚，看文档觉得自己茅塞顿开，又看了php中文网的源码觉得有1个小时可以重新布局css了。下午2点整到现在越整越糊涂。完全跟自己想的不一样。昨天主要css选择器搞不清，今天发现问题太多了，还是css的问题。先不深究了，赶紧看grid的视频，不然又要拉下课了，先跟上节奏第一，然后慢慢消化吧。先坐实例熟悉，然后一定要做项目，这样才能真的吃透。
先这样吧。
实例链接

网页上效果图网页上效果图

昨晚手机上效果图

现在手机效果图

截了张长图


html代码

  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="css/header_footer.css" />
  7.     <link rel="stylesheet" href="css/body.css" />
  8.     <link rel="stylesheet" href="css/font_icon.css" />
  10.     <title>php中文网</title>
  11.   </head>
  12.   <body>
  13.     <!-- 公共头部 -->
  14.     <header>
  15.       <div class="login">
  16.         <a href=""><img src="images/login.png" alt="" /></a>
  17.       </div>
  18.       <li class="logo">
  19.         <a href=""><img src="images/logo.png" alt="" /></a>
  20.       </li>
  21.       <li class="menu"><i class="iconfont"></i></li>
  22.     </header>
  23.     <!-- 轮播图 -->
  24.     <div class="slider">
  25.       <a href=""><img src="images/slider.png" alt="" /></a>
  26.     </div>
  27.     <!-- 主导航区 -->
  28.     <nav>
  29.       <div>
  30.         <a href=""><img src="images/html.png" alt="" /></a>
  31.         <a href="">HTML/CSS</a>
  32.       </div>
  33.       <div>
  34.         <a href=""><img src="images/JavaScript.png" alt="" /></a>
  35.         <a href="">JavaScript</a>
  36.       </div>
  37.       <div>
  38.         <a href=""><img src="images/server.png" alt="" /></a>
  39.         <a href="">服务端</a>
  40.       </div>
  42.       <div>
  43.         <a href=""><img src="images/sql.png" alt="" /></a>
  44.         <a href="">数据库</a>
  45.       </div>
  46.       <div>
  47.         <a href=""><img src="images/app.png" alt="" /></a>
  48.         <a href="">移动端</a>
  49.       </div>
  50.       <div>
  51.         <a href=""><img src="images/manual.png" alt="" /></a>
  52.         <a href="">手册</a>
  53.       </div>
  54.       <div>
  55.         <a href=""><img src="images/tool2.png" alt="" /></a>
  56.         <a href="">工具</a>
  57.       </div>
  58.       <div>
  59.         <a href=""><img src="images/live.png" alt="" /></a>
  60.         <a href="">直播</a>
  61.       </div>
  62.     </nav>
  63.     <!-- 推荐课程 -->
  65.     <div class="course">
  66.       <h2 class="title">推荐课程</h2>
  67.       <div>
  68.         <a href=""><img src="images/tjkc1.jpg" alt="" /></a>
  69.         <a href=""><img src="images/tjkc2.jpg" alt="" /></a>
  70.       </div>
  71.       <div>
  72.         <a href=""><img src="images/tjkc3.jpg" alt="" /> </a>
  73.         <div>
  74.           <a href=""><span>CI框架30分钟极速入门</span></a>
  75.           <p><span> 中级 </span> 61302次播放</p>
  76.         </div>
  77.       </div>
  78.       <div>
  79.         <a href=""><img src="images/tjkc3.jpg" alt="" /> </a>
  80.         <div>
  81.           <a href=""><span>CI框架30分钟极速入门</span></a>
  82.           <p><span> 中级 </span> 61302次播放</p>
  83.         </div>
  84.       </div>
  85.     </div>
  86.     <!-- 最新更新 -->
  87.     <div class="update">
  88.       <h2 class="title">最新更新</h2>
  90.       <div>
  91.         <a href=""><img src="images/zxgx1.png" alt="" /> </a>
  92.         <div>
  93.           <a href=""><span>PHP快速操控Exce</span></a>
  94.           <p>
  95.             老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯
  96.             php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文
  97.           </p>
  98.           <p><span> 中级 </span> 61302次播放</p>
  99.         </div>
  100.       </div>
  101.       <div>
  102.         <a href=""><img src="images/zxgx2.png" alt="" /> </a>
  103.         <div>
  104.           <a href=""><span>PHP快速操控Exce</span></a>
  105.           <p>
  106.             老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯
  107.             php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文
  108.           </p>
  109.           <p><span> 中级 </span> 61302次播放</p>
  110.         </div>
  111.       </div>
  112.       <div>
  113.         <a href=""><img src="images/zxgx3.jpg" alt="" /> </a>
  114.         <div>
  115.           <a href=""><span>PHP快速操控Exce</span></a>
  116.           <p>
  117.             老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯
  118.             php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文
  119.           </p>
  120.           <p><span> 中级 </span> 61302次播放</p>
  121.         </div>
  122.       </div>
  123.     </div>
  124.     <!-- 最新文章 -->
  126.     <div class="text">
  127.       <h2 class="title">最新文章</h2>
  128.       <div>
  129.         <div>
  130.           <a href=""><span>word破折号怎么打出来</span></a>
  131.           <p>发布时间：2020-04-13</p>
  132.         </div>
  133.         <a href=""><img src="images/zxwz1.jpg" alt="" /> </a>
  134.       </div>
  135.       <div>
  136.         <div>
  137.           <a href=""><span>word破折号怎么打出来</span></a>
  138.           <p>发布时间：2020-04-13</p>
  139.         </div>
  140.         <a href=""><img src="images/zxwz2.jpg" alt="" /> </a>
  141.       </div>
  142.       <div>
  143.         <div>
  144.           <a href=""><span>word破折号怎么打出来</span></a>
  145.           <p>发布时间：2020-04-13</p>
  146.         </div>
  147.         <a href=""><img src="images/zxwz3.jpg" alt="" /> </a>
  148.       </div>
  149.       <div class="more">更多内容</div>
  150.     </div>
  151.     <!-- 最新博文 -->
  153.     <div class="text2">
  154.       <h2 class="title">最新博文</h2>
  155.       <div>
  156.         <a href=""><span>微信的openid和unionid</span></a>
  157.         <p>发布时间：2020-04-13</p>
  158.       </div>
  159.       <div>
  160.         <a href=""><span>微信的openid和unionid</span></a>
  161.         <p>发布时间：2020-04-13</p>
  162.       </div>
  163.       <div>
  164.         <a href=""><span>微信的openid和unionid</span></a>
  165.         <p>发布时间：2020-04-13</p>
  166.       </div>
  167.       <div class="more">更多内容</div>
  168.     </div>
  169.     <!-- 最新问答 -->
  171.     <div class="question">
  172.       <h2 class="title">最新问答</h2>
  173.       <div>
  174.         <a href=""><span>composer安装问题</span></a>
  175.         <p>发布时间：2020-04-13</p>
  176.       </div>
  177.       <div>
  178.         <a href=""><span>composer安装问题</span></a>
  179.         <p>发布时间：2020-04-13</p>
  180.       </div>
  181.       <div>
  182.         <a href=""><span>composer安装问题</span></a>
  183.         <p>发布时间：2020-04-13</p>
  184.       </div>
  185.       <div class="more">更多内容</div>
  186.     </div>
  187.     <footer>
  188.       <a href="">
  189.         <span class="iconfont"></span>
  190.         <span>首页</span>
  191.       </a>
  192.       <a href="">
  193.         <span class="iconfont"></span>
  194.         <span>视频</span>
  195.       </a>
  196.       <a href="">
  197.         <span class="iconfont"></span>
  198.         <span>社区</span>
  199.       </a>
  200.       <a href="">
  201.         <span class="iconfont"></span>
  202.         <span>我的</span>
  203.       </a>
  204.     </footer>
  205.   </body>
  206. </html>

css代码

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. html {
  6.   width: 100vw;
  7.   height: 100vh;
  8.   font-size: 14px;
  9. }
  10. a {
  11.   text-decoration: none;
  12.   color: grey;
  13. }
  14. body {
  15.   min-width: 300px;
  16.   background-color: #efefef;
  17.   display: flex;
  18.   flex-flow: column nowrap;
  19. }
  20. header {
  21.   display: flex;
  22.   height: 5vh;
  23.   background-color: black;
  24.   align-items: center;
  25.   justify-content: space-between;
  26.   padding: 0px 15px;
  27.   box-sizing: border-box;
  28.   position: fixed;
  29.   width: 100vw;
  30. }
  31. header > .login > a img {
  32.   height: 3.5vh;
  33. }
  34. header > .logo > a img {
  35.   height: 5.5vh;
  36. }
  38. header > .menu {
  39.   font-size: 3vh;
  40.   color: white;
  41. }
  42. body > .slider {
  43.   margin-top: 5vh;
  44.   height: 20vh;
  45.   background-color: black;
  46. }
  47. .slider > a img {
  48.   width: 100%;
  49.   height: 100%;
  50. }
  51. /* 主导航区 */
  52. nav {
  53.   height: 28vh;
  54.   display: flex;
  55.   flex-flow: row wrap;
  56.   align-content: center;
  57.   background-color: #fff;
  58. }
  59. nav > div {
  60.   width: 25vw;
  61.   display: flex;
  62.   flex-flow: column nowrap;
  63.   text-align: center;
  64. }
  65. nav > div img {
  66.   margin-top: 10px;
  67.   width: 50%;
  68. }
  69. .title {
  70.   font-size: 1.2rem;
  71.   color: gray;
  72.   /* font-weight: normal; */
  73.   margin: 10px 0;
  74. }
  75. /* 主推课程 */
  76. .course {
  77.   width: 95vw;
  78.   height: 56vh;
  79.   display: flex;
  80.   flex-flow: column nowrap;
  81.   margin: 0 2vw;
  82. }
  83. /* 第一行双图片样式 */
  84. .course > div:first-of-type {
  85.   height: 17vh;
  86.   display: flex;
  87.   justify-content: space-between;
  88.   align-items: center;
  89. }
  90. /* 第一行图片样式 */
  91. .course > div:first-of-type > a > img {
  92.   width: 46vw;
  93.   height: 100%;
  94. }
  95. /* 第二三行容器样式 */
  96. .course > div:not(:first-of-type) {
  97.   height: 17vh;
  98.   display: flex;
  99.   justify-content: space-between;
  100.   background-color: white;
  101.   align-items: center;
  102.   padding: 5px;
  103.   box-sizing: border-box;
  104.   margin-top: 5px;
  105. }
  106. /* 第二三行子容器样式 */
  107. .course > div > div {
  108.   width: 60vw;
  109.   height: 10vh;
  110.   display: flex;
  111.   flex-flow: column nowrap;
  112.   align-items: flex-start;
  113.   justify-content: space-around;
  114.   padding: 0 5px;
  115. }
  116. /* 第二三行图片样式 */
  117. .course > div:not(:first-of-type) > a img {
  118.   width: 40vw;
  119.   height: 100%;
  120. }
  121. /* 文字中级的圆角黑色背景 */
  122. .course > div > div > p > span:first-of-type {
  123.   width: 13vw;
  124.   color: white;
  125.   background-color: #1d1d1d;
  126.   border-radius: 10px;
  127. }
  128. .update {
  129.   width: 95vw;
  130.   height: 55vh;
  131.   display: flex;
  132.   flex-flow: column nowrap;
  133.   margin: 0 2vw;
  134. }
  135. .update > div {
  136.   height: 15vh;
  137.   display: flex;
  138.   justify-content: space-between;
  139.   background-color: white;
  140.   align-items: center;
  141.   padding: 10px;
  142.   box-sizing: border-box;
  143.   margin-top: 5px;
  144. }
  145. .update > div > div {
  146.   width: 50vw;
  147.   height: 10vh;
  148.   display: flex;
  149.   flex-flow: column nowrap;
  150.   align-items: flex-start;
  151.   justify-content: space-around;
  152.   padding: 5px;
  153. }
  154. .update > div > a {
  155.   width: 50vw;
  156.   height: 10vh;
  157.   display: flex;
  158.   flex-flow: column nowrap;
  159.   align-items: flex-start;
  160.   justify-content: space-around;
  161.   padding: 5px;
  162. }
  163. .update > div > a img {
  164.   width: 100%;
  165.   height: 100%;
  166. }
  167. .update > div > div p {
  168.   display: inline-block;
  169.   white-space: nowrap;
  170.   width: 100%;
  171.   overflow: hidden;
  172.   text-overflow: ellipsis;
  173. }
  174. .update > div > div > p > span:first-of-type {
  175.   width: 13vw;
  176.   color: white;
  177.   background-color: #1d1d1d;
  178.   border-radius: 10px;
  179. }
  180. .text {
  181.   width: 95vw;
  182.   height: 45vh;
  183.   display: flex;
  184.   flex-flow: column nowrap;
  185.   margin: 0 2vw;
  186. }
  187. .text > div {
  188.   height: 10vh;
  189.   display: flex;
  190.   justify-content: space-between;
  191.   background-color: white;
  192.   align-items: center;
  193.   padding: 5px;
  194.   box-sizing: border-box;
  195.   margin-top: 5px;
  196. }
  197. .text > div > div {
  198.   width: 50vw;
  199.   height: 10vh;
  200.   display: flex;
  201.   flex-flow: column nowrap;
  202.   align-items: flex-start;
  203.   justify-content: space-around;
  204.   padding: 5px;
  205. }
  206. .text > div > a img {
  207.   width: 40vw;
  208.   height: 100%;
  209. }
  211. .text > .more {
  212.   height: 5vh;
  213.   width: 95vw;
  214.   justify-content: center;
  215.   text-align: center;
  216. }
  217. .text2 {
  218.   width: 95vw;
  219.   height: 33vh;
  220.   display: flex;
  221.   flex-flow: column nowrap;
  222.   margin: 0 2vw;
  223. }
  224. .text2 > div {
  225.   height: 6vh;
  226.   display: flex;
  227.   justify-content: space-around;
  228.   background-color: white;
  229.   align-items: center;
  230.   padding: 5px;
  231.   box-sizing: border-box;
  232.   margin-top: 5px;
  233. }
  234. .text2 > .more {
  235.   height: 4vh;
  236.   width: 95vw;
  237.   justify-content: center;
  238.   text-align: center;
  239. }
  240. .question {
  241.   width: 95vw;
  242.   height: 40vh;
  243.   display: flex;
  244.   flex-flow: column nowrap;
  245.   margin: 0 2vw;
  246. }
  247. .question > div {
  248.   height: 6vh;
  249.   display: flex;
  250.   justify-content: space-around;
  251.   background-color: white;
  252.   align-items: center;
  253.   padding: 5px;
  254.   box-sizing: border-box;
  255.   margin-top: 5px;
  256. }
  257. .question > .more {
  258.   height: 4vh;
  259.   width: 95vw;
  260.   justify-content: center;
  261.   text-align: center;
  262. }
  264. footer {
  265.   display: flex;
  266.   height: 8vh;
  267.   color: #666;
  268.   background-color: #efefef;
  269.   border-top: 1px solid #ccc;
  270.   align-items: center;
  271.   justify-content: space-between;
  272.   padding: 0 8vw;
  273.   box-sizing: border-box;
  274.   position: fixed;
  275.   width: 100vw;
  276.   bottom: 0;
  277. }
  278. footer > a {
  279.   display: flex;
  280.   flex-flow: column nowrap;
  281.   align-items: center;
  282. }
  283. footer > a:first-of-type {
  284.   color: red;
  285. }
  286. footer > a > span:first-of-type {
  287.   font-size: 1.6rem;
  288. }
上一条：PhpStrom 安装PHPUnit-9单元测试下一条：grid 布局基础知识常用属性学习与感想
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
magician风2020-04-16 14:50:451楼
这布局很乱没有什么参考意义，但是总结到几点知识，之前学了，但是用的时候没注意到，比如长度单位 px，%，vw，px固定大小，考虑到各种移动端设备大小不同，目前一般不推荐使用。我的感觉外框用vw，不过一定要设置MAX，不然大显示器就乱了，用%的时候一定要定义父容器的大小，这个是不继承的，定义祖容器没用，这次这里翻了个跟头，浪费了很多时间。图片到处乱跑。再就是css选择器，之前理解的不准确，css很多代码重复部署。脑子里框架结构思路还是不清晰，以后部署一定要先部署版块，后添加内容。写这个的时候还没学grid，后面时间允许的话，用grid重写一个。

相关文章

查看更多