search

博客列表 >仿PHP中文网首页部分

仿PHP中文网首页部分

Time
Time原创
2022年03月27日 21:31:04608浏览

图片展示

index1
index2

代码

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="//at.alicdn.com/t/font_3280335_t3u4plz9cur.css">
  10.     <!-- <link rel="stylesheet" href="static/iconfont/iconfont.css"> -->
  11.     <link rel="stylesheet" href="static/css/header.css">
  12.     <link rel="stylesheet" href="static/css/main.css">
  13. </head>
  14. <body>
  15.     <!-- 页眉 -->
  16.     <header>
  17.         <!-- 顶部 -->
  18.         <div class="top">
  19.             <div class="content">
  20.                 <div class="title">php程序员梦开始的地方</div>
  21.                 <div class="right">
  22.                     <a href="" class="iconfont icon-lingdang"></a>
  23.                     <a href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <!-- 导航 -->
  28.         <div class="navs">
  29.             <div class="content">
  30.                 <a href="" class="log"><img src="static/images/logo.png" alt=""></a>
  31.                 <nav>
  32.                    <a href="" class="active">首页</a>
  33.                    <a href="">视频教程</a>
  34.                    <a href="">学习路径</a>
  35.                    <a href="">php培训</a>
  36.                    <a href="">资源下载</a>
  37.                    <a href="">技术文章</a>
  38.                    <a href="">社区</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>
  47.     <!-- 主体 -->
  48.     <main>
  49.         <div class="navs">
  50.             <div class="left">
  51.                 <a href="">php开发</a>
  52.                 <a href="">大前端</a>
  53.                 <a href="">后端开发</a>
  54.                 <a href="">数据库</a>
  55.                 <a href="">移动端</a>
  56.                 <a href="">运维开发</a>
  57.                 <a href="">UI设计</a>
  58.                 <a href="">计算机基础</a>
  59.             </div>
  60.             <div class="slider">
  61.                 <a href=""><img src="static/images/slider.jpeg" alt=""></a>
  62.             </div>
  63.             <div class="right">
  64.                 <div class="right-content">
  65.                     <div class="right-content-shang">
  66.                         <div class="right-content-shang1"> <span>
  67.                             <a href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  68.                         </span>
  69.                         <dl>
  70.                             <dt><a href="">Time</a></dt>
  71.                             <dd>p豆 12</dd>
  72.                         </dl>
  74.                         </div>
  75.                         <div class="right-content-shang2">
  76.                             <a href="">我的学习</a>
  77.                         </div>
  78.                     </div>
  80.                    <div class="right-content-xia">
  81.                        <div class="f1">
  82.                         <span>问答社区</span>
  83.                         <a href="" >答疑</a>
  84.                        </div>
  85.                         <div class="f2">
  86.                            <p>
  87.                                 <span>头条</span>
  88.                                 <a href="">程序员有多好</a>
  89.                                 <!-- <marquee direction="up" style="float: right;">UP</marquee> -->
  91.                            </p>
  92.                            <p>
  93.                                 <span>新课</span>
  94.                                 <a href="">3.9号公益直播课</a>
  95.                            </p>
  96.                            <p>
  97.                                 <span>新班</span>
  98.                                 <a href="">19期PHP直播班</a>
  99.                            </p>
  100.                            <p>
  101.                                 <span>招募</span>
  102.                                 <a href="">课程合作计划</a>
  103.                            </p>
  104.                            <p>
  105.                             <span>公告</span>
  106.                             <a href="">APP上线啦</a>
  107.                        </p>
  108.                         </div>
  109.                    </div>
  111.                 </div>
  112.             </div>
  113.             <div class="bottom-left">
  114.                 <!-- 学习路径 -->
  115.                 <div class="desc">
  116.                     <div class="title">学习路径</div>
  117.                     <span>全部7个&gt</span>
  118.                 </div>
  120.                 <ul class="detail">
  121.                     &lt
  122.                     <li onclick="">
  123.                         <img src="static/images/dgjj.png" alt="">
  124.                         <a href="">独孤九剑</a>
  125.                         <span>9门课程</span>
  126.                     </li>
  127.                     <li onclick="">
  128.                         <img src="static/images/ynxj.png" alt="">
  129.                         <a href="">玉女心经</a>
  130.                         <span>5门课程</span>
  131.                     </li>
  132.                     <li onclick="">
  133.                         <img src="static/images/tlbb.png" alt="">
  134.                         <a href="">天龙八部</a>
  135.                         <span>3门课程</span>
  136.                     </li>
  137.                     <li onclick="">
  138.                         <img src="static/images/phpkjkf.png" alt="">
  139.                         <a href="">自学指南</a>
  140.                         <span>19门课程</span>
  141.                     </li>
  142.                     <li onclick="">
  143.                         <img src="static/images/phpksrm.png" alt="">
  144.                         <a href="">趣味闯关</a>
  145.                         <span>22门课程</span>
  146.                     </li>
  147.                 </ul>
  148.             </div>
  149.             <div class="bottom-right">
  150.                 <ul class="content">
  151.                     <li>
  152.                         <a href="">
  153.                         <b class="iconfont icon-logo-wechat"></b>
  154.                         <h2>官方公众号</h2>
  155.                         </a>
  156.                     </li>
  157.                     <li>
  158.                         <a href="">
  159.                         <b class="iconfont icon-QQ-circle-fill"></b>
  160.                         <h2>官方QQ群</h2>
  161.                         </a>
  162.                     </li>
  163.                 </ul>
  164.             </div>
  165.         </div>
  166.         <div class="plate">
  167.             <div class="content">
  168.                 <div class="title">
  169.                     <h2>最新课程</h2>
  170.                     <a href="">更多&gt</a>
  171.                 </div>
  172.                 <ul class="list">
  173.                     <li>
  174.                         <span>
  175.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  176.                         </span>
  177.                         <dl>
  178.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  179.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  180.                         </dl>
  181.                     </li>
  182.                     <li>
  183.                         <span>
  184.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  185.                         </span>
  186.                         <dl>
  187.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  188.                             <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  189.                         </dl>
  190.                     </li>
  191.                     <li>
  192.                         <span>
  193.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  194.                         </span>
  195.                         <dl>
  196.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  197.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  198.                         </dl>
  199.                     </li>
  200.                     <li>
  201.                         <span>
  202.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  203.                         </span>
  204.                         <dl>
  205.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  206.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  207.                         </dl>
  208.                     </li>
  209.                     <li>
  210.                         <span>
  211.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  212.                         </span>
  213.                         <dl>
  214.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  215.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  216.                         </dl>
  217.                     </li>
  218.                     <li>
  219.                         <span>
  220.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  221.                         </span>
  222.                         <dl>
  223.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  224.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  225.                         </dl>
  226.                     </li>
  227.                     <li>
  228.                         <span>
  229.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  230.                         </span>
  231.                         <dl>
  232.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  233.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  234.                         </dl>
  235.                     </li>
  236.                     <li>
  237.                         <span>
  238.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  239.                         </span>
  240.                         <dl>
  241.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  242.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  243.                         </dl>
  244.                     </li>
  245.                     <li>
  246.                         <span>
  247.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  248.                         </span>
  249.                         <dl>
  250.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  251.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  252.                         </dl>
  253.                     </li>
  254.                     <li>
  255.                         <span>
  256.                             <a href=""><img src="static/images/list1.jpg" alt=""></a>
  257.                         </span>
  258.                         <dl>
  259.                             <dt><i>初级</i><a href="">JavaScript基础语法【dom|bom|es6新语</a></dt>
  260.                                 <dd><p>318次学习</p><a href=""><b class="iconfont icon-shoucang"></b>收藏</a></dd>
  261.                         </dl>
  262.                     </li>
  263.                 </ul>
  264.             </div>
  265.         </div>
  266.     </main>
  267. </body>
  268. </html>

css代码

header.css

  1. header .top{
  2.     width: 100vw;
  3.     height: 40px;
  4.     background-color: rgb(52, 52, 52);
  5.     color: #aaa;
  6. }
  7. header .top .content img{
  8.     width: 50%;
  9.     border-radius: 50%;
  10. }
  11. header .top .content {
  12.     display: grid;
  13.     width: 1200px;
  14.     grid-template-columns: 400px 100px;
  15.     place-content: space-between;
  16.     margin: auto;
  17.     grid-auto-rows: 40px;
  18.     place-items: center start;
  19. }
  20. header .top .content .right .iconfont{
  21.     font-size: 18px;
  22.     color: #eee;
  23. }
  24. header .top .content .right{
  25.     display: grid;
  26.     grid-template-columns: repeat(2,1fr);
  27.     place-items: center;
  28. }
  29. /* 导航 */
  30. header .navs{
  31.     width: 100vw;
  32.     height: 90px;
  33.     background-color: #fff;
  35. }
  36. header .navs .content{
  37.     display: grid;
  38.     width: 1200px;
  39.     grid-template-columns: 140px 1fr 200px;
  40.     grid-auto-rows: 90px;
  41.     margin: auto;
  42.     gap: 10px;
  43.     place-items: center start;
  44. }
  45. header .navs .content img{
  46.     width: 90%;
  47. }
  49. header .navs .content a.active,
  50. header .navs .content a:hover{
  51.     color: red;
  52.     font-weight: bold;
  53. }
  54. header .navs .content .search{
  55.     display: flex;
  56. }
  57. header .navs .content nav a{
  58.     padding: 0 18px;
  59. }
  60. header .navs .content .search input[type="search"]{
  61.     width: 200px;
  62.     height: 36px;
  63.     border: none;
  64.     outline: none;
  65.     background-color: #f7f8fa;
  66.     border-radius: 100px;
  67.     padding-left: 10px;
  69. }
  70. header .navs .content .search .fdj{
  71.     font-size: 22px;
  72.     color: #ccc;
  73.     position: relative;
  74.     left: -48px;
  75.     top: 5px;
  76. }

main.css

  1. main{
  2.     font-size: 14px;
  3. }
  4. main .navs{
  5.     display: grid;
  6.     grid-template-columns: 160px 810px 190px;
  7.     grid-template-rows: 400px 80px;
  8.     gap: 20px;
  9.     place-content: center;
  10.     margin: 30px 0;
  12. }
  13. main .navs>*{
  14.     background-color: #fff;
  15.     border-radius: 20px;
  16. }
  17. /* 底部左侧两列 */
  18. main .navs .bottom-left{
  19.     grid-column: span 2;
  20. }
  21. main .navs .slider img{
  22.     width: 100%;
  23.     border-radius: 20px;
  24. }
  25. main .navs .left{
  26.     display: grid;
  27.     place-items: center;
  28.     padding: 20px 0;
  29. }
  30. main .navs .left a:hover{
  31.     color: red;
  32.     background-color: rgb(250, 223, 227);
  33. }
  34. main .navs .left a{
  35.     padding: 10px 20px;
  36.     border-radius: 20px;
  37. }
  38. main .navs .bottom-left{
  39.     display: grid;
  40.     grid-template-columns: 100px 1fr;
  41. }
  42. main .navs .bottom-left .desc{
  43.     display: grid;
  44.     place-items: center;
  45.     padding: 16px;
  46. }
  47. main .navs .bottom-left .detail img{
  48.     grid-row: span 2;
  49.     width: 100%;
  50. }
  51. main .navs .bottom-left .detail {
  52.     display: flex;
  53.     place-items: center;
  54.     place-content: space-between;
  55. }
  56. main .navs .bottom-left .detail li{
  57.     display: grid;
  58.     grid-template-columns: 36px 85px;
  59.     gap: 0 10px;
  60.     place-items: center start;
  61. }
  62. main .navs .bottom-left .detail li a {
  63.     font-size: 14px;
  64. }
  65. main .navs .bottom-left .detail li span,
  66. main .navs .bottom-left .desc span{
  67.     font-size: 12px;
  68.     color: #999;
  69. }
  70. main .navs .bottom-left .detail li a:hover {
  71.     color: red;
  72. }
  73. main .navs .right .right-content{
  74.     display: grid;
  75.     grid-template-rows: 142px 240px;
  77. }
  78. main .navs .right .right-content .right-content-shang{
  79.     display: grid;
  80.     border-bottom: 1px solid #eeeeee;
  81.     padding: 0 0 20px 0;
  82. }
  83. main .navs .right .right-content .right-content-shang .right-content-shang1{
  84.     margin: auto;
  86. }
  87. main .navs .right .right-content .right-content-shang .right-content-shang1 img{
  88.     float: left;
  89.     width: 40px;
  90.     height: 40px;
  91.     border-radius: 100px;
  92.     margin-top: 20px;
  93. }
  94. main .navs .right .right-content .right-content-shang .right-content-shang1 dl{
  95.     float: right;
  96.     width: 105px;
  97.     margin-top: 15px;
  98.     padding: 0 10px;
  100. }
  101. main .navs .right .right-content .right-content-shang .right-content-shang1 dd{
  102.     color: #b6b6b6;
  103. }
  104. main .navs .right .right-content .right-content-shang .right-content-shang1 a{
  105.     font-weight: bold;
  106. }
  107. main .navs .right .right-content .right-content-shang .right-content-shang2{
  108.     width: 150px;
  109.     height: 34px;
  110.     background: #f11717;
  111.     border-radius: 100px;
  112.     line-height: 34px;
  113.     text-align: center;
  115.     text-decoration: none;
  116.     overflow: hidden;
  117.     margin-top: 20px;
  118.     margin-left: 20px;
  120. }
  121. main .navs .right .right-content .right-content-shang .right-content-shang2 a {
  122.     color: #ffffff;
  123. }
  124. main .navs .right .right-content .right-content-xia{
  125.     display: grid;
  126.     grid-template-rows: 50px 1fr;
  127.     margin-left: 20px;
  128. } 
  129. main .navs .right .right-content .right-content-xia .f1 a{
  130.     width: 31px;
  131.     height: 16px;
  132.     background: #ff583d;
  133.     border-radius: 2px;
  134.     font-size: 12px;
  135.     color: #ffffff;
  136.     line-height: 16px;
  139. }
  141. main .navs .right .right-content .right-content-xia .f2 a:hover{
  142.     color: red;
  143. }
  144. main .navs .right .right-content .right-content-xia .f1{
  145.     place-self: center start;
  146. }
  147. main .navs .right .right-content .right-content-xia .f1 span{
  148.     margin-right: 10px;
  149. }
  150. main .navs .right .right-content .right-content-xia .f1 a{
  151.     padding: 1px 3px;
  152. }
  153. main .navs .right .right-content .right-content-xia .f2{
  154.     display: grid;
  155.     place-items: center start;
  156. }
  158. main .navs .right .right-content .right-content-xia .f2 a{
  159.     color: #b6b6b6; 
  160. }
  161. main .navs .bottom-right .content{
  162.     display: grid;
  163.     grid-template-columns: repeat(2,1fr);
  164.     place-items: center;
  165.     place-content: space-between;
  166. }
  167. main .navs .bottom-right .content li a h2{
  168.     font-size: 12px;
  169.     font-weight: bold;
  170.     height: 16px;
  171.     line-height: 16px;
  172.     overflow: hidden;
  173.     margin-top: 5px;
  174. }
  175. main .navs .bottom-right .content li a b{
  176.    font-size: 30px;
  177.    margin-left: 13px;
  178. }
  179. main .navs .bottom-right .content li {
  180.     float: left;
  181.     width: 70px;
  182.     margin-top: 13px;
  183.     margin-left: 20px;
  184. }
  185. main .navs .right .right-content .right-content-xia .f2 p span{
  186.     padding: 0 10px 0 0;
  187. }
  188. main .plate{
  189.     width: 1200px;
  190.     margin: 30px 0;
  191.     margin: auto;
  192. }
  193. main .plate .content{
  194.     display: grid;
  195.     grid-template-rows: 32px 530px;
  198. }
  199. main .plate .content .title{
  200.     display: grid;
  201.     grid-template-columns: 88px 78px;
  202.     grid-template-rows: 32px;
  203.     place-content: space-between;
  205.     place-items: center start;
  206. }
  207. main .plate .content .title a{
  208.     padding: 10px 10px;
  209.     width: 78px;
  210.     height: 32px;
  211.     background: #f0f1f4;
  212.     color: #999999;
  213.     border-radius: 20px;
  214.     text-align: center; 
  215. }
  216. main .plate .content .list{
  217.     display: grid;
  218.     grid-template-columns: repeat(5,1fr);
  219.     grid-template-rows: repeat(2,1fr);
  220.     place-content: space-between;
  221.     gap: 10px;
  222.     margin-top: 30px;
  223. }
  224. main .plate .content .list li img{
  225.     width: 100%;
  226.     border-radius: 6px 6px 0px 0px;
  227. }
  228. main .plate .content .list li{
  229.     display: grid;
  231. }
  232. main .plate .content .list li dl dt{
  234.     margin-left: 10px;
  235. }
  236. main .plate .content .list li dl dt i{
  237.     float: left;
  238.     width: 28px;
  239.     height: 16px;
  240.     background: #93999f;
  241.     line-height: 16px;
  242.     overflow: hidden;
  243.     text-align: center;
  244.     font-style: normal;
  245.     font-size: 11px;
  246.     color: #ffffff;
  247.     margin-right: 10px;
  248.     margin-top: 3px;
  249. }
  250. main .plate .content .list li dl dd{
  251.     display: flex;
  252.     margin-top: 15px;
  253.     place-content: space-between;
  254.     color: #b7b7b7;
  255. }
  256. main .plate .content .list li dl dd a {
  257.     color: #b7b7b7;
  258. }
上一条：练习PHP中文网首页下一条：css-grid布局实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议