简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

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

仿PHP中文网首页-部分

秋闲独醉
秋闲独醉原创
2022年07月17日 15:01:26450浏览

  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.     <link rel="stylesheet" href="static/css/index.css" />
  8.     <title>模仿php中文网首页</title>
  9.   </head>
  10.   <body>
  11.     <header>
  12.       <div class="top">
  13.         <div class="content">
  14.           <div class="title">php中文网-程序员梦开始的地方！</div>
  15.           <div class="right">
  16.             <a href="" class="iconfont icon-tixingtianchong"></a>
  17.             <a href="" class="img"><img src="static/images/user-pic.jpeg" alt="这是一个用户头像" /></a>
  18.           </div>
  19.         </div>
  20.       </div>
  21.       <div class="nav">
  22.         <div class="content">
  23.           <a href=""><img src="static/images/logo.png" alt="网站logo" /></a>
  24.           <div class="menu">
  25.             <a href="" class="active">首页</a>
  26.             <a href="">视频教程</a>
  27.             <a href="">学习路径</a>
  28.             <a href="">php培训</a>
  29.             <a href="">资源下载</a>
  30.           </div>
  31.           <div class="search">
  32.             <input type="search" name="" id="" placeholder="输入关键字" />
  33.             <span class="iconfont icon-fangdajing1"></span>
  34.           </div>
  35.         </div>
  36.       </div>
  37.     </header>
  39.     <main>
  40.       <div class="nav">
  41.         <div class="content">
  42.           <div class="left">
  43.             <a href="">php开发</a>
  44.             <a href="">大前端</a>
  45.             <a href="">后端开发</a>
  46.             <a href="">数据库</a>
  47.             <a href="">移动端</a>
  48.             <a href="">运维开发</a>
  49.             <a href="">UI设计</a>
  50.             <a href="">计算机基础</a>
  51.           </div>
  52.           <div class="slider">
  53.             <a href=""><img src="static/images/slider.jpeg" alt="广告" /> </a>
  54.           </div>
  55.           <div class="right">
  56.             <div class="login">
  57.               <div class="touxiang">
  58.                 <a href=""><img src="static/images/user-pic.jpeg" alt="" /> </a>
  59.                 <p>我的名字</p>
  60.                 <p>P豆20</p>
  61.               </div>
  62.               <button>我的学习</button>
  63.             </div>
  64.             <div class="question">
  65.               <div class="title">问答社区</div>
  66.               <div class="toutiao">
  67.                 <p>头条</p>
  68.                 <span>内容</span>
  69.               </div>
  70.               <div class="toutiao">
  71.                 <p>福利</p>
  72.                 <span>内容</span>
  73.               </div>
  74.               <div class="toutiao">
  75.                 <p>新班</p>
  76.                 <span>内容</span>
  77.               </div>
  78.               <div class="toutiao">
  79.                 <p>招募</p>
  80.                 <span>内容</span>
  81.               </div>
  82.               <div class="toutiao">
  83.                 <p>公告</p>
  84.                 <span>内容</span>
  85.               </div>
  86.             </div>
  87.           </div>
  88.           <div class="bottom-left">
  89.             <div class="desc">
  90.               <div class="title">学习路径</div>
  91.               <span>全部7个&gt;</span>
  92.             </div>
  93.             <ul class="detail">
  94.               <li onclick="">
  95.                 <img src="static/images/dgjj.png" alt="" />
  96.                 <a href="">独孤九剑</a>
  97.                 <span>9门课程</span>
  98.               </li>
  99.               <li onclick="">
  100.                 <img src="static/images/ynxj.png" alt="" />
  101.                 <a href="">独孤九剑</a>
  102.                 <span>9门课程</span>
  103.               </li>
  105.               <li onclick="">
  106.                 <img src="static/images/tlbb.png" alt="" />
  107.                 <a href="">独孤九剑</a>
  108.                 <span>9门课程</span>
  109.               </li>
  111.               <li onclick="">
  112.                 <img src="static/images/phpkjkf.png" alt="" />
  113.                 <a href="">独孤九剑</a>
  114.                 <span>9门课程</span>
  115.               </li>
  116.               <li onclick="">
  117.                 <img src="static/images/phpksrm.png" alt="" />
  118.                 <a href="">独孤九剑</a>
  119.                 <span>9门课程</span>
  120.               </li>
  121.             </ul>
  122.           </div>
  123.           <div class="bootom-right">
  124.             <div class="lianxi">
  125.               <a href=""><img src="static/images/phpkjkf.png" alt="" /></a>
  126.               <a href=""><img src="static/images/phpkjkf.png" alt="" /></a>
  127.               <p>微信</p>
  128.               <p>QQ</p>
  129.             </div>
  130.           </div>
  131.         </div>
  132.       </div>
  133.     </main>
  134.   </body>
  135. </html>
  1. @import url("icon-font.css");
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6.   text-decoration: none;
  7.   color: gray;
  8.   /* background-color: rgb(100, 100, 100); */
  9. }
  10. body {
  11.   background-color: rgba(200, 200, 200, 0.3);
  12. }
  13. body header .top {
  14.   height: 40px;
  15.   width: 100vw;
  16.   background-color: #343434;
  17. }
  18. body header .top .content {
  19.   width: 1200px;
  20.   display: grid;
  21.   grid-template-columns: 400px 100px;
  22.   grid-auto-rows: 40px;
  23.   place-content: space-between;
  24.   place-items: center start;
  25.   margin: auto;
  26. }
  27. body header .top .content .title {
  28.   font-size: large;
  29. }
  30. header .top .content .right .img {
  31.   text-align: center;
  32.   padding-top: 5px;
  33. }
  35. header .top .content .right {
  36.   display: grid;
  37.   grid-template-columns: repeat(2, 1fr);
  38.   place-items: center;
  39. }
  40. header .top .content .right .icon-tixingtianchong {
  41.   color: white;
  42.   font-size: larger;
  43. }
  44. body header .top .content .right img {
  45.   border-radius: 50%;
  46.   width: 70%;
  47. }
  48. header .nav {
  49.   width: 100vw;
  50.   height: 90px;
  51.   background-color: white;
  52.   box-shadow: 0 4px 10px rgba(200, 200, 200, 0.5);
  53. }
  54. header .nav .content {
  55.   width: 1200px;
  56.   display: grid;
  57.   grid-template-columns: 140px 1fr 180px;
  58.   grid-auto-rows: 90px;
  59.   gap: 10px;
  60.   place-items: center start;
  61.   margin: auto;
  62. }
  63. header .nav .content img {
  64.   width: 140px;
  65. }
  66. header .nav .content .menu + .search {
  67.   display: flex;
  68. }
  69. header .nav .content .menu a {
  70.   margin: 10px;
  71.   font-size: large;
  72. }
  74. header .nav .content .search input[type="search"] {
  75.   width: 200px;
  76.   height: 35px;
  77.   border: none;
  78.   /* 轮廓线 */
  79.   outline: none;
  80.   border-radius: 20px;
  81.   background-color: #eee;
  82. }
  83. header .nav .content .search .iconfont {
  84.   position: relative;
  85.   font-size: 20px;
  86.   top: 5px;
  87.   left: -40px;
  88. }
  89. main .nav {
  90.   width: 100vw;
  91.   height: 480px;
  92. }
  93. main .nav .content {
  94.   width: 1200px;
  95.   display: grid;
  96.   margin: 30px auto;
  97.   grid-template-columns: 160px 810px 190px;
  98.   grid-template-rows: 400px 80px;
  99.   gap: 20px;
  100.   place-content: center;
  101.   place-content: space-between;
  102. }
  103. main .nav .content .left {
  104.   width: 160px;
  105.   background-color: white;
  106.   border-radius: 20px;
  107.   display: flex;
  108.   flex-direction: column;
  109. }
  110. main .nav .content .right {
  111.   width: 190px;
  112.   background-color: white;
  113.   border-radius: 20px;
  114. }
  115. main .right .login {
  116.   display: grid;
  117.   grid-template-rows: 80px 40px;
  118.   grid-template-columns: 160px;
  119.   place-content: center;
  120. }
  121. main .right .login .touxiang {
  122.   width: 150px;
  123.   display: grid;
  124.   grid-template-columns: repeat(2, 70px);
  125.   grid-template-rows: repeat(2, 40px);
  126.   /* place-items: end end; */
  127. }
  128. .login .touxiang a {
  129.   margin: auto;
  130.   place-self: center;
  131.   grid-row: 1 / 3;
  132. }
  133. .login .touxiang a img {
  134.   margin-left: 10px;
  135.   width: 70%;
  136.   border-radius: 50%;
  137. }
  138. .login .touxiang p:first-of-type {
  139.   color: black;
  140.   font-weight: bold;
  141.   font-size: 14 px;
  142.   place-self: end start;
  143. }
  144. .login button {
  145.   border-style: none;
  146.   width: 120px;
  147.   height: 30px;
  148.   background-color: red;
  149.   color: white;
  150.   border-radius: 40px;
  151.   place-self: center;
  152. }
  153. .right .question {
  154.   width: 150px;
  155.   display: grid;
  156.   grid-template-rows: repeat(6, 30px);
  157.   margin-left: 20px;
  158.   margin-top: 20px;
  159. }
  160. .right .question .toutiao {
  161.   width: 140px;
  162.   display: grid;
  163.   grid-template-columns: 60px 1fr;
  164. }
  165. .right .question .toutiao {
  166.   color: black;
  167. }
  168. main .nav .content .left a {
  169.   margin: 10px;
  170. }
  171. main .nav .content .slider img {
  172.   border-radius: 20px;
  173. }
  174. main .nav .content .bottom-left {
  175.   grid-column: 1 / span 2;
  176.   display: grid;
  177.   grid-template-columns: 100px 1fr;
  178.   background-color: white;
  179.   border-radius: 20px;
  180.   /* place-content: space-between; */
  181.   place-content: center;
  182.   place-items: center;
  183. }
  184. main .nav .content .bottom-left ul {
  185.   width: 810px;
  186.   display: grid;
  187.   grid-template-columns: repeat(6, 100px);
  188.   place-content: space-between;
  189.   place-items: center;
  190. }
  191. /* main .nav .content .bottom-left ul li {
  192.   margin: 10px;
  193. } */
  194. main .nav .content .bottom-left ul li img {
  195.   width: 30px;
  196. }
  197. main .nav .content .bottom-left .title {
  198.   font-size: 12px;
  199. }
  200. main .nav .content .bottom-left ul li a {
  201.   font-size: 12px;
  202. }
  203. main .nav .content .bottom-left span {
  204.   font-size: 8px;
  205. }
  206. .bottom-left ul li {
  207.   display: grid;
  208.   grid-template-columns: 40px 1fr;
  209.   grid-template-rows: 20px 20px;
  210.   place-items: center start;
  211. }
  212. .bottom-left ul li img {
  213.   grid-row: 1 / span2;
  214. }
  216. main .bootom-right {
  217.   background-color: white;
  218.   border-radius: 20px;
  219. }
  220. main .bootom-right .lianxi {
  221.   width: 190px;
  222.   display: grid;
  223.   grid-template-columns: 60px 60px;
  224.   grid-template-rows: 60px, 60px;
  225.   place-content: end center;
  226.   place-items: center;
  227.   margin-top: 10px;
  228. }
  229. main .bootom-right .lianxi img {
  230.   width: 40px;
  231.   border-radius: 50%;
  232.   border-top: 10px;
  233. }
上一条：移动端布局原理下一条：课程表——表格学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多