search

博客列表 >仿PHP中文网的一小部分

仿PHP中文网的一小部分

Pharaoh
Pharaoh原创
2022年07月15日 18:46:35281浏览

效果图

代码

  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="css/header.css" />
  9.     <link rel="stylesheet" href="css/icon-font.css" />
  10.   </head>
  11.   <body>
  12.     <header>
  13.       <div>
  14.         <div class="top">
  15.           <p>php中文网-程序员梦开始的地方</p>
  16.           <div class="right">
  17.             <a href="" class="iconfont icon-tixingtianchong"></a>
  18.             <a href=""><img src="user_avatar.jpg" alt="" /></a>
  19.           </div>
  20.         </div>
  21.       </div>
  22.       <main>
  23.         <div class="nav">
  24.           <a href=""><img src="logo-2x.png" alt="" /></a>
  25.           <ul>
  26.             <li><a href="">首页</a></li>
  27.             <li><a href="">视频教程</a></li>
  28.             <li><a href="">学习路径</a></li>
  29.             <li><a href="">PHP培训</a></li>
  30.             <li><a href="">资源下载</a></li>
  31.             <li><a href="">技术文章</a></li>
  32.             <li><a href="">社区</a></li>
  33.           </ul>
  34.           <div class="sreach">
  35.             <input type="sreach" placeholder="输入关键词搜索" />
  36.             <span class="iconfont icon-fangdajing1"></span>
  37.           </div>
  38.         </div>
  39.       </main>
  40.     </header>
  42.     <main>
  43.       <div class="top">
  44.         <div class="left">
  45.           <ul>
  46.             <li><a href="">php开发</a></li>
  47.             <li><a href="">大前端</a></li>
  48.             <li><a href="">后端开发</a></li>
  49.             <li><a href="">数据库</a></li>
  50.             <li><a href="">移动端</a></li>
  51.             <li><a href="">运维开发</a></li>
  52.             <li><a href="">UI设计</a></li>
  53.             <li><a href="">计算机基础</a></li>
  54.           </ul>
  55.         </div>
  56.         <div class="middle">
  57.           <img src="main.png" alt="" />
  58.         </div>
  59.         <div class="right">
  60.           <div class="top">
  61.             <div>
  62.               <div class="img"><img src="user_avatar.jpg" alt="" /></div>
  63.               <div class="user">
  64.                 <h2>Pharaoh</h2>
  65.                 <span>P豆 9999</span>
  66.               </div>
  67.             </div>
  68.             <div><a href="">我要学习</a></div>
  69.           </div>
  70.           <div class="buttom">
  71.             <div>
  72.               <span>问答社区</span>
  73.               <span>答疑</span>
  74.             </div>
  75.             <div>
  76.               <span>头条</span>
  77.               <span>66个面试问题</span>
  78.             </div>
  79.             <div>
  80.               <span>福利</span>
  81.               <span>限时折扣>></span>
  82.             </div>
  83.             <div>
  84.               <span>新班</span>
  85.               <span>20期PHP线上班</span>
  86.             </div>
  87.             <div>
  88.               <span>招募</span>
  89.               <span>课程合作计划</span>
  90.             </div>
  91.             <div>
  92.               <span>公告</span>
  93.               <span>APP上线啦</span>
  94.             </div>
  95.           </div>
  96.         </div>
  97.       </div>
  98.       <div class="buttom">
  99.         <div class="left"></div>
  100.         <div class="right"></div>
  101.       </div>
  102.     </main>
  104.     <div class="two">
  105.       <div class="left">
  106.         <div>
  107.           <h2>学习路径</h2>
  108.           <p>全部7个</p>
  109.         </div>
  110.         <div>
  111.           <div><img src="dgjj.png" alt="" /></div>
  112.           <div>
  113.             <a href="">独孤九剑</a>
  114.             <p>9门课程</p>
  115.           </div>
  116.         </div>
  117.         <div>
  118.           <div><img src="ynxj.png" alt="" /></div>
  119.           <div>
  120.             <a href="">玉女心经</a>
  121.             <p>5门课程</p>
  122.           </div>
  123.         </div>
  124.         <div>
  125.           <div><img src="tlbb.png" alt="" /></div>
  126.           <div>
  127.             <a href="">天龙八部</a>
  128.             <p>3门课程</p>
  129.           </div>
  130.         </div>
  131.         <div>
  132.           <div><img src="phpkjkf.png" alt="" /></div>
  133.           <div>
  134.             <a href="">自学指南</a>
  135.             <p>19门课程</p>
  136.           </div>
  137.         </div>
  138.         <div>
  139.           <div><img src="phpksrm.png" alt="" /></div>
  140.           <div>
  141.             <a href="">趣味闯关</a>
  142.             <p>22门课程</p>
  143.           </div>
  144.         </div>
  145.       </div>
  146.       <div class="right">
  147.         <div>
  148.           <div><img src="../默写/dy.png" alt="" /></div>
  149.           <div>官方工众号</div>
  150.         </div>
  151.         <div>
  152.           <div><img src="../默写/dy.png" alt="" /></div>
  153.           <div>官方QQ群</div>
  154.         </div>
  155.       </div>
  156.     </div>
  157.   </body>
  158. </html>

CSS代码

  1. @import url(reset.css);
  3. body {
  4.   background-color: rgb(212, 212, 212);
  5. }
  7. header > div:first-child {
  8.   background-color: rgb(61, 60, 60);
  9.   width: 100vw;
  10. }
  11. header .top {
  12.   width: 1200px;
  13.   height: 50px;
  14.   margin: auto;
  15.   display: grid;
  16.   grid-template-columns: 400px 100px;
  17.   grid-auto-rows: 50px;
  18.   place-content: center space-between;
  19.   place-items: center start;
  20. }
  22. header .top p {
  23.   color: rgb(235, 235, 235);
  24. }
  26. header div:first-child .right {
  27.   display: grid;
  28.   grid-template-columns: 50px 30px;
  29.   place-items: center;
  30. }
  32. header div:first-child .right a:first-child {
  33.   color: white;
  34. }
  36. header div:first-child .top .right a img {
  37.   width: 100%;
  38.   border-radius: 20px;
  39. }
  40. body header main {
  41.   width: 100vw;
  42.   background-color: white;
  43.   box-shadow: 0px 6px 8px rgb(7, 17, 27, 0.1);
  44. }
  45. .nav {
  46.   width: 1200px;
  47.   height: 80px;
  48.   display: flex;
  49.   margin: auto;
  50.   justify-content: space-between;
  51.   align-items: center;
  52. }
  54. header main .nav ul {
  55.   width: 800px;
  56.   display: flex;
  57. }
  59. header main .nav ul li {
  60.   margin-left: 15px;
  61. }
  63. header main .nav ul li a:hover,
  64. header main .nav ul li:first-child a {
  65.   color: red;
  66. }
  68. header main .nav a:first-child img {
  69.   width: 150px;
  70. }
  72. header main .nav div input {
  73.   border-radius: 20px;
  74.   height: 35px;
  75.   background-color: rgb(211, 211, 211);
  76.   border: none;
  77.   outline: none;
  78.   padding-left: 9px;
  79. }
  80. body header main .nav .sreach span {
  81.   position: relative;
  82.   left: -30px;
  83. }
  85. body > main {
  86.   width: 1200px;
  87.   margin: 30px auto;
  88. }
  90. body > main > .top {
  91.   display: grid;
  92.   grid-template-columns: 160px 810px 190px;
  93.   gap: 10px;
  94.   font-size: 14px;
  95. }
  97. body > main > .top > * {
  98.   background-color: white;
  99.   border-radius: 25px;
  100. }
  102. body main .top .left ul {
  103.   display: grid;
  104.   grid-template-rows: repeat(8, 1fr);
  105.   place-content: center;
  106.   place-items: center;
  107.   padding-top: 10px;
  108. }
  110. body main .top .left ul li {
  111.   padding: 15px 25px;
  112.   border-radius: 25px;
  113. }
  115. body main .top .left ul li:hover {
  116.   background-color: crimson;
  117. }
  119. body main .top .middle img {
  120.   border-radius: 25px;
  121. }
  123. body main .top .right {
  124.   display: grid;
  125.   grid-template-rows: 140px 240px;
  126.   place-content: center;
  127.   place-items: center;
  128. }
  130. body main .right .top > div:first-child {
  131.   width: 100%;
  132.   display: flex;
  133.   justify-content: flex-start;
  134. }
  136. body > main .right .top > div:first-child .img {
  137.   width: 40px;
  138. }
  140. body main .right .top > div:first-child img {
  141.   width: 100%;
  142.   border-radius: 50px;
  143. }
  145. body > main .right .top {
  146.   height: 100%;
  147.   width: 100%;
  148.   padding: 10px 25px;
  149.   border-bottom: 1px solid rgb(212, 212, 212);
  150.   overflow: hidden;
  151. }
  153. body > main .right .top > div:first-child .user h2 {
  154.   font-size: 0.9rem;
  155. }
  157. body > main .right .top > div:first-child .user span {
  158.   font-size: 0.6rem;
  159.   color: rgb(141, 141, 141);
  160. }
  162. body > main .right .top > div:first-child .user {
  163.   padding: 0 10px;
  164. }
  166. body > main .right .top > div:last-child {
  167.   width: 150px;
  168.   height: 34px;
  169.   margin: auto;
  170.   background-color: #f11717;
  171.   text-align: center;
  172.   border-radius: 20px;
  173.   margin-top: 30px;
  174. }
  176. body > main .right .top > div:last-child a {
  177.   display: block;
  178.   line-height: 34px;
  179.   color: white;
  180. }
  182. body > main .right .buttom {
  183.   padding: 0 20px;
  184.   margin-top: 30px;
  185.   display: grid;
  186.   grid-template-rows: repeat(6, 40px);
  187.   place-items: auto center;
  188.   place-content: space-between center;
  189. }
  191. body > main .right .buttom div span:last-child {
  192.   color: rgb(180, 180, 180);
  193. }
  195. body > main .right .buttom div:first-child span:last-child {
  196.   display: inline-block;
  197.   background-color: orangered;
  198.   color: white;
  199.   border-radius: 5px;
  200.   width: 35px;
  201.   text-align: center;
  202. }
  204. body .two {
  205.   width: 1200px;
  206.   height: 80px;
  207.   display: grid;
  208.   grid-template-columns: 980px 190px;
  209.   margin: auto;
  210. }
  212. body .two .left {
  213.   display: flex;
  214.   background-color: white;
  215.   justify-content: center;
  216.   align-items: center;
  217.   border-radius: 15px;
  218. }
  220. body .two > .left > div:first-child {
  221.   width: 79px;
  222. }
  224. body .two > .left > div:not(div:first-child) {
  225.   display: flex;
  226. }
  228. body .two > .left > div:not(div:first-child) > div {
  229.   width: 130px;
  230.   height: 40px;
  231. }
  233. body .two > .left > div:not(div:first-child) > div:first-child {
  234.   width: 40px;
  235.   height: 40px;
  236.   padding: 0 5px;
  237.   font-size: 20px;
  238. }
  240. body .two > .left > div:not(div:first-child) > div > p {
  241.   color: darkgrey;
  242.   font-size: 0.5rem;
  243. }
  245. body .two > .left > div:not(div:first-child) > div img {
  246.   width: 90%;
  247. }
  249. body .two > .left div:first-child {
  250.   font-size: 5px;
  251.   margin: 0 0px;
  252. }
  254. body .two .right {
  255.   margin-left: 12px;
  256.   border-radius: 15px;
  257.   display: flex;
  258.   justify-content: center;
  259.   align-items: center;
  260.   background-color: white;
  261.   width: 190px;
  262. }
  264. body .two .right div div:last-child {
  265.   font-weight: bold;
  266.   font-size: x-small;
  267. }
  268. body .two .right div img {
  269.   width: 30%;
  270.   border-radius: 50px;
  271. }
  273. body .two .right div {
  274.   text-align: center;
  275. }

感想

其实有很多种办法实现：浮动，弹性布局，盒子布局，甚至可以互相嵌套，还需要多多练习

上一条：grid容器、项目属性及案例下一条：仿php中文网
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多