search

博客列表 >仿 php.cn 中文网首页

仿 php.cn 中文网首页

。。。
。。。原创
2022年03月27日 17:20:56383浏览

仿 php.cn 中文网首页

  • 效果演示
    效果演示1

  • 语法

html

  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.     <link rel="stylesheet" href="static/css/reset.css" />
  8.     <link rel="stylesheet" href="static/images/iconfont.css" />
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <link rel="stylesheet" href="static/css/main-nav.css" />
  11.     <title>仿php.cn中文网首页</title>
  12.   </head>
  13.   <body>
  14.     <header>
  15.       <div class="top">
  16.         <div class="content">
  17.           <div class="title">php中文网,程序员梦开始的地方!</div>
  18.           <div class="right">
  19.             <a href="" class="iconfont icon-icon_notice"><span>2</span></a>
  21.             <a href=""><img src="static/images/heard-img.jpeg" alt="" /></a>
  22.           </div>
  23.         </div>
  24.       </div>
  25.       <div class="navs">
  26.         <div class="content">
  27.           <a href="" class="logo"
  28.             ><img src="static/images/logo.png" alt=""
  29.           /></a>
  30.           <nav>
  31.             <a href="" class="active">首页</a>
  32.             <a href="">视频教程<b class="iconfont icon-xiala xiala"></b></a>
  33.             <a href="">学习路径<b class="iconfont icon-xiala xiala"></b></a>
  34.             <a href="">php培训<span>新</span></a>
  35.             <a href="">资源下载<b class="iconfont icon-xiala xiala"></b></a>
  36.             <a href="">技术文章<b class="iconfont icon-xiala xiala"></b></a>
  37.             <a href="">社区 <b class="iconfont icon-xiala xiala"></b></a>
  39.             <a href=""
  40.               ><b class="iconfont icon-shumashouji shouji"></b>APP下载</a
  41.             >
  42.             <a href=""><b>...</b></a>
  43.           </nav>
  44.           <div class="search">
  45.             <input type="search" placeholder="输入关键字搜索" />
  46.             <span class="iconfont icon-sousuo"></span>
  47.           </div>
  48.         </div>
  49.       </div>
  50.     </header>
  51.     <main>
  52.       <div class="navs">
  53.         <!-- 2行3列 -->
  55.         <div class="left">
  56.           <a href="">php开发</a>
  57.           <a href="">大前端</a>
  58.           <a href="">后端开发</a>
  59.           <a href="">数据库</a>
  60.           <a href="">移动端</a>
  61.           <a href="">运维开发</a>
  62.           <a href="">UI设计</a>
  63.           <a href="">计算机基础</a>
  64.         </div>
  66.         <div class="slider">
  67.           <a href="">
  68.             <img src="static/images/slider.jpeg" alt="" />
  69.           </a>
  70.         </div>
  72.         <div class="right">
  73.           <div class="right-top">
  74.             <div class="right-top-content">
  75.               <img src="static/images/heard-img.jpeg" alt="" />
  76.               <dl>
  77.                 <dt>
  78.                   <a href="">。。。</a>
  79.                 </dt>
  80.                 <dd>P豆 12</dd>
  81.               </dl>
  82.             </div>
  83.             <div class="right-top-button">
  84.               <button>我的学习</button>
  85.             </div>
  86.           </div>
  87.           <div class="right-bottom">
  88.             <div class="right-bottom-content">
  89.               <div class="right-bottom-content-top">
  90.                 <span>问答社区</span>
  91.                 <a href="">答疑</a>
  92.               </div>
  93.               <div class="right-bottom-content-list">
  94.                 <div>
  95.                   <span>头条</span>
  96.                   <a href="">首个采用中文编写的操作系统出现了！</a>
  97.                 </div>
  98.                 <div><span>新课</span> <a href="">3.9号公益直播课</a></div>
  99.                 <div><span>新班</span> <a href="">19期PHP直播班</a></div>
  100.                 <div><span>招募</span> <a href="">课程合作计划</a></div>
  101.                 <div><span>公告</span> <a href="">APP上线啦</a></div>
  102.               </div>
  103.             </div>
  104.           </div>
  105.         </div>
  107.         <div class="bottom-left">
  108.           <!-- 学习路径  -->
  109.           <div class="desc">
  110.             <div class="title">学习路径</div>
  111.             <span>全部7个&gt;</span>
  112.           </div>
  113.           <ul class="detail">
  114.             <li onclick="">
  115.               <img src="static/images//dgjj.png" alt="" />
  116.               <a href="">独孤九贱</a>
  117.               <span>9门课程</span>
  118.             </li>
  119.             <li onclick="">
  120.               <img src="static/images//ynxj.png" alt="" />
  121.               <a href="">独孤九贱</a>
  122.               <span>9门课程</span>
  123.             </li>
  124.             <li onclick="">
  125.               <img src="static/images//phpkjkf.png" alt="" />
  126.               <a href="">独孤九贱</a>
  127.               <span>9门课程</span>
  128.             </li>
  129.             <li onclick="">
  130.               <img src="static/images//phpksrm.png" alt="" />
  131.               <a href="">趣味闯关</a>
  132.               <span>9门课程</span>
  133.             </li>
  134.             <li onclick="">
  135.               <img src="static/images//dgjj.png" alt="" />
  136.               <a href="">独孤九贱</a>
  137.               <span>9门课程</span>
  138.             </li>
  139.           </ul>
  140.         </div>
  141.         <div class="bottom-right">
  142.           <div class="bottom-right-weixin">
  143.             <span class="iconfont icon-weixin"></span>
  144.             <a href=""> 官方公众号</a>
  145.           </div>
  146.           <div class="bottom-right-qq">
  147.             <span class="iconfont icon-qq"></span>
  148.             <a href=""> 官方QQ群</a>
  149.           </div>
  150.         </div>
  151.       </div>
  152.     </main>
  153.   </body>
  154. </html>

reset.css

  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  7. a {
  8.     text-decoration: none;
  9.     color: #555;
  10. }
  12. body {
  13.     background-color: rgb(243, 245, 247);
  14. }
  16. li {
  17.     list-style: none;
  18. }

header.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: 50%;
  10.   border-radius: 50%;
  11. }
  13. header .top .content {
  14.   width: 1200px;
  15.   display: grid;
  16.   grid-template-columns: 400px 100px;
  17.   grid-auto-rows: 40px;
  18.   place-content: space-between;
  19.   place-items: center start;
  20.   margin: auto;
  21. }
  23. header .top .content .right .iconfont {
  24.   color: #eee;
  25.   font-size: larger;
  26.   position: relative;
  27. }
  28. .right > a > span {
  29.   height: 15px;
  30.   padding: 0px 4px;
  31.   background: #f11717;
  32.   border-radius: 100px;
  33.   color: #ffffff;
  34.   font-size: 12px;
  35.   line-height: 15px;
  36.   position: absolute;
  37.   left: 12px;
  38.   top: -9px;
  39. }
  40. header .top .content .right {
  41.   display: grid;
  42.   grid-template-columns: repeat(2, 1fr);
  43.   place-items: center;
  44. }
  46. /* 导航 */
  48. header .navs {
  49.   width: 100vw;
  50.   height: 90px;
  51.   background-color: #fff;
  52. }
  54. header .navs .content {
  55.   width: 1200px;
  56.   /* border: 1px solid #000; */
  57.   display: grid;
  58.   grid-template-columns: 140px 1fr 200px;
  59.   grid-auto-rows: 90px;
  60.   gap: 10px;
  61.   margin: auto;
  62.   place-items: center start;
  63. }
  65. header .navs .content img {
  66.   width: 100%;
  67. }
  69. header .navs .content nav a.active,
  70. header .navs .content nav a:hover {
  71.   color: red;
  72.   font-weight: bold;
  73. }
  75. header .navs .content .search {
  76.   display: flex;
  77. }
  79. header .navs .content nav a {
  80.   padding: 0 10px;
  81.   height: 2em;
  82. }
  84. header .navs .content .search input[type="search"] {
  85.   width: 200px;
  86.   height: 36px;
  87.   border: none;
  88.   outline: none;
  89.   background-color: #f7f8fa;
  90.   border-radius: 20px;
  91.   padding-left: 10px;
  92. }
  94. header .navs .content .search > span {
  95.   font-size: 22px;
  96.   color: #ccc;
  97.   position: relative;
  98.   left: -40px;
  99.   top: 5px;
  100. }
  102. header .navs .content .search > span:hover {
  103.   color: red;
  104.   font-weight: bold;
  105. }
  106. header .navs .content nav a > b {
  107.   font-size: 2em;
  108.   line-height: 0px;
  109. }
  110. header .navs .content nav a .shouji {
  111.   font-size: 20px;
  112.   color: red;
  113. }
  114. header .navs .content nav > a:nth-of-type(8) {
  115.   color: red;
  116. }
  117. header .navs .content nav a:hover {
  118.   color: red;
  119.   font-weight: normal;
  120. }
  121. header .navs .content nav a .xiala {
  122.   font-size: small;
  123.   margin-bottom: 5px;
  124.   margin-left: 5px;
  125. }
  127. header .navs .content nav a > span {
  128.   height: 15px;
  129.   padding: 0px 4px;
  130.   background: #f11717;
  131.   border-radius: 100px;
  132.   color: #ffffff;
  133.   font-size: 12px;
  134.   line-height: 15px;
  135.   position: relative;
  136.   left: 0px;
  137.   top: -9px;
  138. }

main-nav.css

  1. main {
  2.   font-size: 14px;
  3. }
  5. main .navs {
  6.   /* 2行3列 */
  7.   display: grid;
  8.   grid-template-columns: 160px 810px 190px;
  9.   grid-template-rows: 400px 80px;
  10.   gap: 20px;
  11.   place-content: center;
  12.   margin: 30px 0;
  13. }
  15. main .navs > * {
  16.   background-color: #fff;
  17.   border-radius: 20px;
  18.   /* outline: 1px solid red; */
  19. }
  21. /* 底部左侧占2列 */
  23. main .navs .bottom-left {
  24.   grid-column: span 2;
  25. }
  27. main .navs .slider img {
  28.   width: 100%;
  29.   border-radius: 20px;
  30. }
  32. /* 左侧导航 */
  34. main .navs .left {
  35.   display: grid;
  36.   place-items: center;
  37.   padding: 20px 0;
  38. }
  40. main .navs .left a:hover {
  41.   color: red;
  42.   background-color: rgb(250, 223, 227);
  43. }
  45. main .navs .left a {
  46.   border-radius: 20px;
  47.   padding: 10px 20px;
  48. }
  50. /* 底部左侧 */
  52. main .navs .bottom-left {
  53.   display: grid;
  54.   grid-template-columns: 100px 1fr;
  55. }
  57. main .navs .bottom-left .desc {
  58.   display: grid;
  59.   place-items: center;
  60.   padding: 16px;
  61. }
  63. main .navs .bottom-left .detail img {
  64.   width: 100%;
  65.   grid-row: span 2;
  66. }
  68. main .navs .bottom-left .detail {
  69.   display: flex;
  70.   place-items: center;
  71.   place-content: space-between;
  72. }
  74. main .navs .bottom-left .detail li {
  75.   display: grid;
  76.   grid-template-columns: 36px 85px;
  77.   gap: 0 10px;
  78.   place-items: center start;
  79. }
  81. main .navs .bottom-left .detail li a {
  82.   font-size: 14px;
  83. }
  85. main .navs .bottom-left .detail li a:hover {
  86.   color: red;
  87. }
  89. main .navs .bottom-left .detail li span,
  90. main .navs .bottom-left .desc span {
  91.   font-size: 12px;
  92.   color: #999;
  93. }
  95. /* 右侧侧导航 */
  97. main .right {
  98.   display: grid;
  99.   grid-template-rows: 142px 1fr;
  100.   gap: 1px;
  101.   background-color: rgb(243, 245, 247);
  102. }
  104. main .right .right-top {
  105.   width: 100%;
  106.   display: grid;
  107.   grid-template-rows: 50% 1fr;
  108.   place-items: center;
  109.   background-color: white;
  110.   border-top-left-radius: 20px;
  111.   border-top-right-radius: 20px;
  112. }
  114. main .right .right-bottom {
  115.   width: 100%;
  116.   height: 100%;
  117.   display: grid;
  118.   grid-template: 2/7;
  119.   background-color: white;
  120.   border-bottom-left-radius: 20px;
  121.   border-bottom-right-radius: 20px;
  122. }
  123. main .right .right-top .right-top-content {
  124.   display: grid;
  125.   width: 100%;
  126.   height: 100%;
  127.   grid-template-columns: 30% 1fr;
  128.   padding: 20px;
  129.   place-items: end start;
  130. }
  131. main .right .right-top .right-top-content > img {
  132.   width: 40px;
  133.   height: 40px;
  134.   border-radius: 40px;
  135. }
  136. main .right .right-top .right-top-content > dl {
  137.   margin-left: 10px;
  138. }
  139. main .right .right-top .right-top-content > dl > dt {
  140.   margin-bottom: 10px;
  141. }
  142. main .right .right-top .right-top-content > dl > dt > a {
  143.   font-weight: bold;
  144.   color: #000;
  145.   font-size: 14px;
  146.   line-height: 1px;
  147. }
  149. main .right .right-top .right-top-content > dl > dd {
  150.   color: #999999;
  151.   font-size: 8px;
  152. }
  154. main .right .right-top .right-top-button > button {
  155.   width: 150px;
  156.   height: 34px;
  157.   outline: none;
  158.   background-color: #f11717;
  159.   border-radius: 100px;
  160.   color: #fff;
  161.   text-align: center;
  162.   border: 0px;
  163. }
  164. main .right .right-top .right-top-button > button:hover {
  165.   background-color: #d60707;
  166. }
  167. main .right .right-bottom .right-bottom-content {
  168.   width: 100%;
  169.   padding: 20px;
  170.   text-align: left;
  171. }
  172. main .right .right-bottom .right-bottom-content .right-bottom-content-top > a {
  173.   padding: 0px 4px;
  174.   background: #ff583d;
  175.   border-radius: 10%;
  176.   color: #ffffff;
  177.   font-size: 12px;
  178.   margin-left: 10px;
  179. }
  180. main .right .right-bottom .right-bottom-content .right-bottom-content-list {
  181.   display: grid;
  182.   grid-template-rows: repeat(6, 20px);
  183.   gap: 15px;
  184.   overflow: hidden;
  185. }
  186. main .right .right-bottom .right-bottom-content .right-bottom-content-list div {
  187.   display: flex;
  188. }
  189. main
  190.   .right
  191.   .right-bottom
  192.   .right-bottom-content
  193.   .right-bottom-content-list
  194.   > div:first-child {
  195.   margin: 0;
  196.   padding: 0;
  197.   grid-row: span 2;
  198.   padding-top: 15px;
  199. }
  200. main
  201.   .right
  202.   .right-bottom
  203.   .right-bottom-content
  204.   .right-bottom-content-list
  205.   span {
  206.   flex-shrink: 0;
  207.   margin-right: 10px;
  208. }
  209. main .right .right-bottom .right-bottom-content .right-bottom-content-list a {
  210.   font-size: 14px;
  211.   color: #ccc;
  212.   overflow: hidden;
  213. }
  214. main
  215.   .right
  216.   .right-bottom
  217.   .right-bottom-content
  218.   .right-bottom-content-list
  219.   a:first-child {
  220.   font-size: 14px;
  221.   color: #ccc;
  222.   margin-left: 10px;
  223.   background: #ff583d;
  224. }
  225. main
  226.   .right
  227.   .right-bottom
  228.   .right-bottom-content
  229.   .right-bottom-content-list
  230.   a:hover {
  231.   color: red;
  232. }
  234. main .bottom-right {
  235.   display: grid;
  236.   width: 100%;
  237.   padding: 10px;
  238.   grid-template-columns: repeat(2, 50%);
  239.   text-align: center;
  240. }
  241. main .bottom-right div {
  242.   display: grid;
  243.   width: 100%;
  244.   grid-template-rows: 50px, 1fr;
  245.   gap: 5px;
  246. }
  247. main .bottom-right span {
  248.   color: #333333;
  249.   font-size: 40px;
  250. }
  251. main .bottom-right a:hover {
  252.   color: red;
  253.   font-weight: bold;
  254. }
上一条：选择器权重和伪类选择器下一条：仿php中文网首页页面(一部分实战)演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议