search

博客列表 >仿php中文网首页（部分）

仿php中文网首页（部分）

上草一方
上草一方原创
2022年04月01日 23:31:57555浏览

仿php中文网首页

实现效果图如下：

HTML代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>仿php.cn中文网首页</title>
  8.     <link rel="stylesheet" href="static/css/reset.css">
  9.     <link rel="stylesheet" href="static/css/header.css">
  10.     <link rel="stylesheet" href="////at.alicdn.com/t/font_3272169_a1dyfv37nht.css">
  11.     <link rel="stylesheet" href="static/css/main-nav.css">
  12. </head>
  13. <body>
  14.     <!-- 页眉 -->
  15.     <header>
  16.         <!-- 1.顶部 -->
  17.         <div class="top">
  18.             <div class="content">
  19.                 <div class="title">php中文网程序员梦开始的地方！</div>
  20.                 <div class="right">
  21.                     <a href="" class="iconfont icon-tixingtianchong"></a>
  22.                     <a href=""><img src="static/images/唯美3.jpeg" alt=""></a>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <!-- 2.导航 -->
  27.         <div class="navs">
  28.             <div class="content">
  29.                 <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
  30.                 <nav>
  31.                     <a href="" class="active">首页</a>
  32.                     <a href="">视频教程</a>
  33.                     <a href="">学习路径</a>
  34.                     <a href="">php培训</a>
  35.                     <a href="">资源下载</a>
  36.                     <a href="">技术文章</a>
  37.                     <a href="">社区</a>
  38.                     <a href="">APP下载</a>
  39.                 </nav>
  40.                 <div class="search">
  41.                     <input type="search" placeholder="输入关键字搜索">
  42.                     <span class="iconfont icon-fangdajing fdj"></span>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </header>
  48.     <!-- 主体 -->
  49.     <main>
  50.         <div class="navs">
  51.             <!-- 做个2行3列 -->
  52.             <div class="left">
  53.                 <a href="">php开发</a>
  54.                 <a href="">大前端</a>
  55.                 <a href="">后端开发</a>
  56.                 <a href="">数据库/a>
  57.                 <a href="">移动端</a>
  58.                 <a href="">运维开发</a>
  59.                 <a href="">UI设计</a>
  60.                 <a href="">计算机基础</a>
  61.             </div>
  63.             <div class="slider">
  64.                 <a href="">
  65.                     <img src="static/images/slider.jpeg" alt="">
  66.                 </a>
  67.             </div>
  69.             <div class="right">
  70.                 <div class="right1">
  71.                     <img src="static/images/唯美3.jpeg" alt="">
  72.                     <div class="right1-1"><a href="">上草一方</a><br>
  73.                     <span>P豆：20豆</span></div>
  74.                 </div>
  76.                 <div class="right2"><a href="">我&nbsp;的&nbsp;学&nbsp;习</a></div>
  78.                 <div class="right3">
  79.                     <span>问答社区</span>&nbsp;&nbsp;
  80.                     <a href="">答&nbsp;疑</a>
  81.                 </div>
  83.                 <table class="right4">
  84.                     <tr>
  85.                         <td><span>头条</span>&nbsp;&nbsp;
  86.                         <input type="text"></td>
  88.                     </tr>
  90.                     <tr>
  91.                         <td><span>新课</span>&nbsp;&nbsp;
  92.                         <a href="">x月x日公益直播课</a></td>
  93.                     </tr>
  95.                     <tr>
  96.                         <td><span>新班</span>&nbsp;&nbsp;
  97.                         <a href="">19期PHP直播班</a></td>
  98.                     </tr>
  100.                     <tr>
  101.                         <td><span>招募</span>&nbsp;&nbsp;
  102.                         <a href="">课程合作</a></td>
  103.                     </tr>
  105.                     <tr>
  106.                         <td><span>公告</span>&nbsp;&nbsp;
  107.                         <a href="">APP上线啦</a></td>
  108.                     </tr>
  109.                 </table>
  110.             </div>
  112.             <!-- 底部左边的 -->
  113.             <div class="bottom-left">
  114.                 <!-- 学习路径 -->
  115.                 <div class="desc">
  116.                     <div class="title">学习路径</div>
  117.                     <span>全部七个&gt;</span>
  118.                 </div>
  120.                 <ul class="detail">
  121.                     <li onclick="">
  122.                         <img src="static/images/dgjj.png" alt="">
  123.                         <div><a href="">独孤九贱</a><br>
  124.                         <span>9门课程</span></div>
  125.                     </li>
  126.                     <li onclick="">
  127.                         <img src="static/images/ynxj.png" alt="">
  128.                         <div><a href="">玉女心经</a><br>
  129.                         <span>5门课程</span></div>
  130.                     </li>
  131.                     <li onclick="">
  132.                         <img src="static/images/tlbb.png" alt="">
  133.                         <div><a href="">天龙八部</a><br>
  134.                         <span>3门课程</span></div>
  135.                     </li>
  136.                     <li onclick="">
  137.                         <img src="static/images/phpkjkf.png" alt="">
  138.                         <div><a href="">自学指南</a><br>
  139.                         <span>19门课程</span></div>
  140.                     </li>
  141.                     <li onclick="">
  142.                         <img src="static/images/phpksrm.png" alt="">
  143.                         <div><a href="">趣味闯关</a><br>
  144.                         <span>22门课程</span></div>
  145.                     </li>
  146.                 </ul>
  147.             </div>
  149.             <!-- 底部右边的 -->
  150.             <div class="bottom-right">
  151.                 <table>
  152.                     <tr height="40">
  153.                         <td width="100" align="center"><span class="iconfont icon-weixin wx"></span></td>
  154.                         <td width="100" align="center"><span class="iconfont icon-qq qq1"></span></td>
  155.                     </tr>
  156.                     <tr>
  157.                         <td align="center"><a href="">官方公众号</a></td>
  158.                         <td align="center"><a href="">官方QQ群</a></td>
  159.                     </tr>
  160.                 </table>
  161.             </div>
  163.     </div>
  164.     </main>
  165. </body>
  166. </html>

头部CSS代码如下：

  1. header .top {
  2.     width: 100vw;
  3.     height: 40px;
  4.     background-color: rgb(52, 52, 52);
  5.     color: #aaa;
  6. }
  8. header .top .content img{
  9.     width: 60%;
  10.     border-radius: 50%;
  11. }
  12. header .top .content{
  13.     width: 1200px;
  14.     display: grid;
  15.     /* 将它分成两列 */
  16.     grid-template-columns: 400px 100px;
  17.     /* 两端对齐 */
  18.     place-content: space-between;
  19.     /* 下面不能用place-content:center，因为没有剩余空间 */
  20.     margin: auto;
  21.     /* 让文本垂直居中 */
  22.     place-items: center start;
  23.     /* 手工设置隐式网格行高 */
  24.     grid-auto-rows: 40px;
  25.     /* 这两行代码实现的效果一样，有什么区别？ */
  26.     /* grid-template-rows: 40px; */
  27. }
  28. header .top .right .iconfont{
  29.     color: #eee;
  30.     font-size: large;
  31. }
  32. header .top .content .right{
  33.     display: grid;
  34.     /* 下面这行代码是两列，每一列自适应 */
  35.     grid-template-columns: repeat(2,1fr);
  36.     place-items: center;
  37. }
  39. /* 导航 */
  41. header .navs{
  42.     width: 100%;
  43.     height: 90px;
  44.     background-color: #fff;
  45. }
  46. header .navs .content{
  47.     width: 1200px;
  48.     /* border: 1px solid #000; */
  49.     display: grid;
  50.     grid-template-columns: 140px 1fr 200px;
  51.     margin: auto;
  52.     grid-auto-rows: 90px;
  53.     /* 列与列之间的间隙 */
  54.     gap: 10px;
  55.     place-items: center start;
  56. }
  57. header .navs .content img{
  58.     width: 100%;
  59.     border-radius: 50%;
  60. }
  61. header .navs .content nav a.active,
  62. header .navs .content nav a:hover{
  63.     color: red;
  64.     font-weight: bold;
  65. }
  66. header .navs .content .search{
  67.     display: flex;
  68. }
  69. header .navs .content nav a{
  70.     /* 让每个a标签之间有一些间隙，左右间隙 */
  71.     padding: 0 15px;
  72. }
  74. /* 下面这一块代码似乎没有效果 */
  75. header .navs .content .search input[type='search']{
  76.     width: 200px;
  77.     height: 36px;
  78.     border: none;
  79.     outline: none;
  80.     background-color: #f7f8fa;
  81.     border-radius: 20%;
  82.     display: flex;
  83. }
  84. /* 给放大镜做一个定位 */
  85. header .navs .content .search .fdj {
  86.     font-size: 22px;
  87.     color: #ccc;
  88.     position: relative;
  89.     left: -40px;
  90.     top: 5px;
  91. }

主体部分css代码如下：

  1. main {
  2.     font-size: 14px;
  3. }
  4. main .navs{
  5.     display: grid;
  6.     /* 分成三列，各自列宽如下 */
  7.     grid-template-columns: 160px 810px 190px;
  8.     /* 分成两行，各自行宽如下 */
  9.     grid-template-rows: 400px 80px;
  10.     /* 间隙 */
  11.     gap: 20px;
  12.     place-content: center;
  13.     margin: 30px 0;
  14. }
  15. main .navs>* {
  16.     background-color: #fff;
  17.     border-radius: 4%;
  18.     outline: 1px solid red;
  19. }
  21. /* 底部左侧占两列 */
  22. main .navs .bottom-left{
  23.     grid-column: span 2;
  24. }
  25. main .navs .slider img{
  26.     width: 100%;
  27.     border-radius: 4%;
  28. }
  29. /* 左侧导航 */
  30. main .navs .left{
  31.     display: grid;
  32.     place-items: center;
  33.     padding: 20px 0;
  34. }
  35. main .navs .left a{
  36.     border-radius: 20px;
  37.     padding: 10px 20px;
  38. }
  39. main .navs .left a:hover{
  40.     color: red;
  41.     background-color: rgb(250, 223, 227);
  42. }
  44. /* 底部左侧 */
  45. main .navs .bottom-left{
  46.     display: grid;
  47.     grid-template-columns: 100px 1fr;
  48. }
  49. main .navs .bottom-left .desc{
  50.     display: grid;
  51.     place-items: center;
  52. }
  53. main .navs .bottom-left .detail img{
  54.     width: 100%;
  55.     /* 图片跨行操作，跨两行 */
  56.     /* grid-row: sapn 2; */
  57. }
  58. main .navs .bottom-left .detail{
  59.     display: flex;
  60.     place-items: center;
  61.     place-content: space-between;
  62. }
  64. main .navs .bottom-left .detail li{
  65.     display: grid;
  66.     grid-template-columns: 36px 85px;
  67.     gap: 0 10px;
  68.     place-items: center start;
  69. }
  71. main .navs .bottom-left .detail li a {
  72.     font-size: 14px;
  73. }
  75. main .navs .bottom-left .detail li a:hover {
  76.     color: red;
  77. }
  79. main .navs .bottom-left .detail li span,
  80. main .navs .bottom-left .desc span {
  81.     font-size: 12px;
  82.     color: #999;
  83. }
  85. /* 右侧导航 */
  86. main .right{
  87.     display: grid;
  88. }
  89. main .right .right1{
  90.     height: 100px;
  91.     /* border: 1px solid black; */
  92.     display: grid;
  93.     grid-template-columns: 60px 1fr;
  94.     place-content: space-between;
  95.     place-content: center;
  97. }
  98. main .right .right1 img{
  99.     width: 100%;
  100.     border-radius: 50%;
  101. }
  103. main .right .right1 .right1-1{
  104.     margin: auto;
  105. }
  106. main .right .right2 {
  107.     width: 160px;
  108.     height: 40px;
  109.     border-radius: 20px;
  110.     background-color: red;
  111.     display: grid;
  112.     place-content: center;
  113.     margin: auto;
  114. }
  115. main .right .right2 a{
  116.     color: #fff;
  117.     font-weight: bold;
  118. }
  119. main .right .right3 a{
  120.    background-color: red;
  121.    color: #fff;
  122.    font-weight: bold;
  123. }
  126. /* 底部右边的 */
  127. main .navs .bottom-right .wx,
  128. main .navs .bottom-right .qq1{
  129.     font-size: 40px;
  130. }
上一条：盒模型常用属性、媒体查询及em,rem用法下一条：练习PHP中文网首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议