search

博客列表 >练习PHP中文网首页

练习PHP中文网首页

newbie
newbie原创
2022年03月27日 22:07:36432浏览

php中文网

并不是完全使用的grid布局 还使用了浮动 定位 flex

代码复用性太差 逻辑不够清晰 代码熟练度不够 在网页编写中经常卡壳 不能熟练运用现有的技术 需要在借助手册的情况下才能完成

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>Document</title>
  8.     <link rel="preload" href="//at.alicdn.com/t/font_3280490_qvzagyi0dm.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3280490_su2mgd3iph.css"/>
  10.     <link rel="stylesheet" href="/220324/作业/css/hrad.css"/>
  11.     <link rel="stylesheet" href="/220324/作业/css/main.css"/>
  12. </head>
  14. <body>
  15.     <!-- 头部样式 -->
  16.     <header>
  17.         <div class="head">
  18.             <div class="top">
  19.                 <div class="top-left">php中文网-程序员梦开始的地方！</div>
  20.                 <div class="top-right">
  21.                     <a href="" class="iconfont icon-tixing" ></a>
  22.                     <a href=""><img src="https://img.php.cn/upload/image/865/925/445/1648305289782816.jpg"></a>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <!-- 导航 -->
  27.         <div class="daohang">
  28.             <div class="phpcenter">
  29.                 <div class="logo">
  30.                     <a href=""><img src="https://www.php.cn/static/images/new/logo.png"></a>
  31.                 </div>
  32.                 <nav>
  33.                     <a href="">
  34.                         <h2>首页</h2>
  35.                     </a>
  36.                     <a href="">
  37.                         <h2>视频教程</h2>
  38.                         <b class="iconfont icon-xiajiantou"></b>
  39.                     </a>
  40.                     <a href="">
  41.                         <h2>学习路径</h2>
  42.                         <b class="iconfont icon-xiajiantou"></b>
  43.                     </a>
  44.                     <a href="">
  45.                         <h2>php培训</h2>
  46.                         <b class="xin">新</b>
  47.                     </a>
  48.                     <a href="">
  49.                         <h2>资源下载</h2>
  50.                         <b class="iconfont icon-xiajiantou"></b>
  51.                     </a>
  52.                     <a href="">
  53.                         <h2>技术文章</h2>
  54.                         <b class="iconfont icon-xiajiantou"></b>
  55.                     </a>
  56.                     <a href="">
  57.                         <h2>社区</h2>
  58.                         <b class="iconfont icon-xiajiantou shequ"></b>
  59.                     </a>
  60.                     <a href="">
  61.                         <b class="iconfont icon-shouji"></b>
  62.                         <h2 class="appxiazai">&nbsp&nbsp&nbsp&nbspAPP下载</h2>
  63.                     </a>
  64.                     <a href="">
  65.                         <b class="iconfont icon-shenglvehao"></b>
  66.                     </a>
  69.                 </nav>
  70.                 <div class="daohang-right">
  71.                     <input type="search" placeholder="请输入搜索内容"/>
  72.                     <span class="iconfont icon-search"></span>
  73.                 </div>
  74.             </div>
  75.         </div>
  76.     </header>
  77.     <!-- 主体区域 -->
  78.     <main>
  79.         <div class="zhukuang">
  80.             <div class="main-left">
  81.                     <a href="">php开发</a>
  82.                     <a href="">大前端</a>
  83.                     <a href="">后端开发</a>
  84.                     <a href="">数据库</a>
  85.                     <a href="">移动端</a>
  86.                     <a href="">运维开发</a>
  87.                     <a href="">UI设计</a>
  88.             </div>
  89.             <div class="main-center">
  90.                 <a>
  91.                     <img src="/220324/img/course.jpg">
  92.                 </a>
  93.             </div>
  94.             <div class="main-right">
  95.                 <div class="main-right-top">
  96.                     <div class="right-top-top">
  97.                         <a href=""><img src="https://img.php.cn/upload/image/865/925/445/1648305289782816.jpg"></a>
  98.                         <dl>
  99.                             <a href="">
  100.                             <dt>newbie</dt>
  101.                             <b class="iconfont icon-tipvip"></b>
  102.                             </a>
  103.                             <dd>P豆 14</dd>
  104.                         </dl>
  106.                     </div>
  107.                     <div class="right-top-bottom"><a href="" style="color: white;">我的学习</a></div>
  108.                 </div>
  109.                 <div class="main-right-bottom">
  110.                         <p class="p1"><span>问答社区</span><a href="">答疑</a></p>
  111.                         <p class="p2"><span>头条</span><a href="">我的天哪</a></p>
  112.                         <p class="p3"><span>新课</span><a href="">3.9号公益直播课</a></p>
  113.                         <p class="p4"><span>新班</span><a href="">19期PHP直播班</a></p>
  114.                         <p class="p5"><span>招募</span><a href="">课程合作计划</a></p>
  115.                         <p class="p6"><span>公告</span><a href="">APP上线啦</a></p>
  116.                 </div>
  117.             </div>
  118.             <div class="main-bottom-left">
  119.                 <div class="bottom-left-left">
  120.                     <dl>
  121.                         <dt>学习路径</dt>
  122.                         <dd>全部7个&gt;</dd>
  123.                     </dl>
  124.                 </div>
  127.                 <a href="">
  128.                     <img src="https://www.php.cn/static/images/examples/dgjj.png" alt="">
  129.                     <dl>
  130.                         <dt>独孤九贱</dt>
  131.                         <dd>9门课程</dd>
  132.                     </dl>
  133.                 </a>
  134.                 <a href="">
  135.                     <img src="https://www.php.cn/static/images/examples/ynxj.png" alt="">
  136.                     <dl>
  137.                         <dt>玉女心经</dt>
  138.                         <dd>5门课程</dd>
  139.                     </dl>
  140.                 </a>
  141.                 <a href="">
  142.                     <img src="https://www.php.cn/static/images/examples/tlbb.png" alt="">
  143.                     <dl>
  144.                         <dt>天龙八部</dt>
  145.                         <dd>3门课程</dd>
  146.                     </dl>
  147.                 </a>
  148.                 <a href="">
  149.                     <img src="https://www.php.cn/static/images/examples/phpkjkf.png" alt="">
  150.                     <dl>
  151.                         <dt>自学指南</dt>
  152.                         <dd>19门课程</dd>
  153.                     </dl>
  154.                 </a>
  155.                 <a href="">
  156.                     <img src="https://www.php.cn/static/images/examples/phpksrm.png" alt="">
  157.                     <dl>
  158.                         <dt>趣味闯关</dt>
  159.                         <dd>22门课程</dd>
  160.                     </dl>
  161.                 </a>
  162.                 <a href="">
  163.                     <div class="you">
  164.                         <b>&gt;</b>
  165.                     </div>
  166.                 </a>
  167.                 <a href="">
  168.                     <div class="zuo">
  169.                         <b>&lt;</b>
  170.                     </div>
  171.                 </a>
  172.             </div>
  173.             <div class="main-bottom-right">
  174.                 <div class="">
  175.                     <a href="">
  176.                         <img src="/220323/sp220327_183056.png">
  177.                     <h2>官方公众号</h2>
  178.                 </a>
  179.                 </div>
  180.                 <div class="">
  181.                     <a href="">
  182.                     <img src="/220323/sp220327_183108.png">
  183.                     <h2>官方qq群</h2>
  184.                 </a>
  185.                 </div>
  186.             </div>
  188.         </div>
  190.     </main>
  192. </body>
  193. </html>
  2. body {
  3.     background-color: #f3f5f7;
  4. }
  5. header .head {
  6.     width: 100vw;
  7.     display: grid;
  8.     place-content: center;
  9.     background-color: #343434;
  10. }
  11. header .head .top {
  12.     width: 1200px;
  13.     height: 40px;
  14.     display: grid;
  15.     grid-template-columns: 300px 100px;
  16.     grid-template-rows: 40px;
  17.     place-content: space-between;
  18.     background-color: #343434;
  21. }
  22. header .head .top .top-left {
  23.     color: #999999; 
  24.     font-weight: bold;
  25.     padding-top:6px ;
  26.     padding-left: 5px;
  29. }
  30. header .head .top .top-right {
  31.     display: grid;
  32.     grid-template-columns:repeat(2,1fr);
  33.     place-items: center;
  35. }
  36. header .head .top .top-right .icon-tixing {
  37.     color: white !important;
  38.     font-size: 20px;
  39. }
  40. header .head .top .top-right img {
  41.     display: flex;
  42.     width: 27.22px;
  43.     height: 27.22px;
  44.     border:1px solid red;
  45.     border-radius: 50%;
  46. }
  47. header .daohang .phpcenter .daohang-right input[type="search"] {
  48.     width: 200px;
  49.     height: 36px;
  50.     border: none;
  51.     background-color: #f7f8fa;
  52.     outline: none;
  53.     border-radius: 20px;
  54. }
  55. header .daohang .phpcenter .daohang-right .icon-search {
  56.     font-size: 20px;
  57.     font-weight: bold;
  58.     color: #999999;
  59.     position: relative;
  60.     left: 150px;
  61.     top: -26px;
  63. }
  64. /* 导航样式 */
  65. header .daohang {
  66.     width: 100vw;
  67.     display: grid;
  68.     place-content: center;
  69.     background-color: #ffffff;
  70.     height: 90px;
  71. }
  72.             a {
  73.     text-decoration: none;
  74.     color: black;
  76. }
  77. header .daohang .phpcenter {
  78.     width: 1200px;
  79.     height: 90px;
  80.     display: grid;
  81.     grid-template-columns: repeat(3,1fr);
  82.     place-content: center;
  83.     place-items: center;
  84. }
  85. header .daohang .phpcenter .logo {
  86.     width: 140px;
  88. }
  89. header .daohang .phpcenter .daohang-right {
  90.     padding-top: 20px;
  91. }
  92. header .daohang .phpcenter nav {
  93.     width:825px ;
  94.     display: grid;
  95.     grid-template-columns:repeat(9,1fr);
  96.     grid-template-rows:40px ;
  97.     place-items: center;
  98. }
  100. header .daohang .phpcenter nav a h2 {
  101.     font-size: 16px;
  102.     font-family: "微软雅黑";
  103.     color: #333;
  105. }
  106. header .daohang .phpcenter nav a {
  107.     position: relative;
  108.     place-content: center;
  109.     line-height: 40px;
  110. }
  111.     header .daohang .phpcenter nav .icon-xiajiantou {
  112.     position: absolute;
  113.     left: 70px;
  114.     top: 3px;    
  115. }
  116. header .daohang .phpcenter nav .icon-shouji {
  117.     position:absolute;
  119. }
  120. header .daohang .phpcenter nav .xin {
  121.     display: block;
  122.     width: 22px;
  123.     height: 15px;
  124.     line-height: 15px;
  125.     text-align: center;
  126.     position:absolute;
  127.     top: -2px;
  128.     right: -15px;
  129.     color:#ffffff;
  130.     font-size: 13px;
  131.     background-color: #fd5050;
  132.     border-radius: 60px;
  133. }
  134. header .daohang .phpcenter nav  .icon-shenglvehao{
  135.     font-size: 26px;
  136.     color:#6c6c6c;
  137. }
  138. header .daohang .phpcenter nav .shequ {
  139.     position: absolute;
  140.     top: 3px;
  141.     left: 35px;
  142. }
  143. header .daohang .phpcenter nav a .appxiazai,.icon-shouji {
  144.     color: red;
  145.     font-size: 16px;
  146. }
  148.         main .zhukuang {
  149.             display: grid;
  150.             grid-template-columns:166px 810px 190px ;
  151.             grid-template-rows: 400px 80px;
  152.             gap: 20px;
  153.             place-content:center ;
  154.             margin: 28px;
  155.         }
  156.         main .zhukuang >* {
  157.             background-color: #ffffff;
  158.             border-radius: 20px;
  159.         }
  160.         /* 左边样式 */
  161.         main .zhukuang .main-left {
  162.             width: 166px;
  163.             height: 400px;
  164.             display:grid;
  165.             grid-template-rows: repeat(7,1fr);
  166.             place-items: center;
  167.         }
  168.         main .zhukuang .main-left a:hover {
  169.             background-color:#fcebed ;
  170.             place-items: center;
  171.             display:grid;
  172.             border-radius: 20px;
  173.             color: red;
  174.             width: 126px;
  175.             height: 40px;
  176.         }
  177.         /* 中间样式 */
  178.         main .zhukuang .main-center img {
  179.             width: 810px;
  180.             height: 400px;
  181.             border-radius: 20px;
  182.         }
  183.         /* 左下部分样式 */
  184.         main .zhukuang .main-bottom-left {
  185.             grid-column: span 2;
  186.             display: grid;
  187.             grid-template-columns: repeat(6,160px);
  188.             place-content: center;
  189.             place-items: center;
  190.             position: relative;
  191.         }
  192.         main .zhukuang .main-bottom-left .bottom-left {
  193.             position: ;
  194.         }
  195.         main .zhukuang .main-bottom-left img {
  196.             width: 36px;
  197.             height: 36px;
  198.             margin-top: 5px;
  199.             margin-left: 25px;
  200.             float: left;
  201.             top: -23px;
  202.             right:15px;
  203.             position: absolute;
  205.         }
  206.         main .zhukuang .main-bottom-left a {
  208.             position: relative;
  209.         }
  210.         main .zhukuang .main-bottom-left a dl {
  211.             font-size: 14px;
  212.             position:absolute;
  213.             width: 85px;
  214.             top: -18px;
  215.             left: -10px;
  216.         }
  217.         main .zhukuang .main-bottom-left a dl dd {
  218.             font-size: 12px;
  219.             color: #999999;
  220.         }
  221.         main .zhukuang .main-bottom-left .you {
  222.             position: absolute;
  223.             top: -35px;
  224.             left: 865px;
  225.             width: 14px;
  226.             height: 29px;
  227.             line-height: 29px;
  228.             color: #999999;
  229.             background-color: #f6f7fb;
  231.         }
  232.         main .zhukuang .main-bottom-left .zuo {
  233.             position: absolute;
  234.             top: -35px;
  235.             left: -90px;
  236.             width: 14px;
  237.             height: 29px;
  238.             line-height: 29px;
  239.             color: #999999;
  240.             background-color: #f6f7fb;
  241.         }
  242.         /* 右边样式 */
  243.         main .zhukuang .main-right {
  244.             display: grid;
  245.             grid-template-rows: 142px 258px ;
  246.         }
  247.         main .zhukuang .main-right .main-right-top {
  248.             display: grid;
  249.             grid-template-rows: 71PX 71PX ;
  250.             place-content: center;
  251.             position: relative;
  252.             border-bottom: 1px solid #f4f4f4;
  254.         }
  255.         main .zhukuang .main-right .main-right-top img {
  256.             display: flex;
  257.             width: 40px;
  258.             height: 40px;
  259.             border-radius: 50%;
  260.             position: absolute;
  261.             top: 15px;
  262.         }
  263.         main .zhukuang .main-right .main-right-top .right-top-top {
  264.             width: 156px;
  265.             height: 60px;
  266.         }
  267.         main .zhukuang .main-right .main-right-top .right-top-top .icon-tipvip {
  268.             font-size: 30px;
  269.             position: absolute;
  270.             right: -35px;
  271.             top: -5px;
  272.             color:#fca62d;
  274.         }
  275.         main .zhukuang .main-right .main-right-top .right-top-top dl {
  276.             position: absolute;
  277.             right: 60px;
  278.             top: 10px;
  280.         }
  281.         main .zhukuang .main-right .main-right-top .right-top-top a {
  282.             display: block;
  283.         }
  284.         .right-top-bottom {
  285.             margin-top: 15px;
  286.             width: 150px;
  287.             height: 34px;
  288.             background-color:#e11717 ;
  289.             color: #ffffff;
  290.             text-align: center;
  291.             line-height: 34px;
  292.             border-radius: 20px;
  293.             font-size: 14px;
  294.         }
  295.          /* 右下角样式 */
  296.         .main-right-bottom {
  297.             padding: 7px;
  298.         }
  299.         .main-right-bottom p {
  300.             line-height: 18px;
  301.             display: block;
  302.             height: 18px;
  303.             width: 150px;
  304.             color: black;
  305.             margin: 20px;
  306.             font-size: 14px;
  307.             font-weight: bold;
  308.         }
  309.         .main-right-bottom p span {
  310.             margin-right: 16px;
  311.         }
  312.         .main-right-bottom p a {
  314.             color: #999999;
  315.         }
  316.         .main-right-bottom .p1 {
  317.             font-size: 16px;
  318.         }
  319.         .main-right-bottom .p1 a {
  320.             background-color: #ff583d;
  321.             color: #ffffff;
  322.             font-size: 12px;
  323.             font-weight:;
  324.         }
  325.         .main-bottom-right {
  326.             display: grid;
  327.             grid-template-columns: 95px 95px ;
  328.             place-content: center;
  329.             place-items: center;
  330.         }
  331.         .main-bottom-right img {
  332.             display: block;
  333.             text-align: center;
  334.             margin: 0 auto;
  335.         }
  336.         .main-bottom-right h2 {
  337.             padding-top: 5px;
  338.             font-size: 14px;
  339.             line-height: 20px;
  340.         }
  343. * {            margin: 0;
  344.     padding: 0;
  345.     /* box-sizing: border-box; */
  346.     /* background-color:antiquewhite; */
  347.     /* background-color: #f3f5f7; */
  348.     /* border: 1px solid red; */
  349.     font-family: "微软雅黑";
  351. }
上一条：仿php中文网首页（部分）下一条：仿PHP中文网首页部分
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多