微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > php中文网仿站
博主信息
博文 4
粉丝 0
评论 1
访问量 4783
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
php中文网仿站
magician风
原创
1822人浏览过

先写总结：
因为时间问题只能听录播，听完觉得商城仿站完全能听懂，周一开始做中文网仿站，觉得有两个小时应该可以搞定，结果…… 四个小时都做很糟糕，还有一些细节上纠结了半天没敢深究。本来昨天可以交的，网页上测试可以，放服务器上一看，完全蒙了，手机端完全乱的，图片到处乱跑。晚上看孩子稍的又研究了一阵，发现了些问题，今天早上看了会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. }
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：边工作边学习, 真的不容易, 理解你... 其实, 你也可以用grid实现, 毕竟grid也学了对不?
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
1条评论
magician风 2020-04-16 14:50:45
这布局很乱没有什么参考意义，但是总结到几点知识，之前学了，但是用的时候没注意到，比如长度单位 px，%，vw，px固定大小，考虑到各种移动端设备大小不同，目前一般不推荐使用。我的感觉外框用vw，不过一定要设置MAX，不然大显示器就乱了，用%的时候一定要定义父容器的大小，这个是不继承的，定义祖容器没用，这次这里翻了个跟头，浪费了很多时间。图片到处乱跑。再就是css选择器，之前理解的不准确，css很多代码重复部署。脑子里框架结构思路还是不清晰，以后部署一定要先部署版块，后添加内容。写这个的时候还没学grid，后面时间允许的话，用grid重写一个。
1楼
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录