效果

代码

HTML页面代码

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <link rel="stylesheet" href="static/csstext/headertext.css">
  6.     <link rel="stylesheet" href="static/csstext/resettext.css">
  7.     <link rel="stylesheet" href="static/csstext/maintext.css">
  8.     <title>仿PHP中文网首页头部</title>
  9. </head>
  10. <body>
  11.     <!-- 页眉 -->
  12.     <header>
  13.         <!-- 1 顶部 -->
  14.         <div class="top">
  15.             <div class="content1">
  16.                 <div class="dream">欢迎光临-梦开始的地方！</div>
  17.                 <div class="topright">
  18.                      <div class="ding">提醒</div>
  19.                      <div class="denglu">登录</div>
  20.                 </div>
  21.             </div>
  22.         </div>
  24.         <!-- 2 导航 -->
  25.         <div class="navigations">
  26.             <div class="content2">
  27.                  <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
  28.                  <nav>
  29.                      <a href="" class="shouye">首页</a>
  30.                      <a href="">视频教学</a>
  31.                      <a href="">学习路径</a>
  32.                      <a href="">PHP培训</a>
  33.                      <a href="">资源下载</a>
  34.                  </nav>
  35.                  <div class="search">
  36.                     <input type="search" placeholder="输入关键字搜索"/>
  37.                     <span class=""></span>
  38.                  </div>
  39.             </div>                        
  40.         </div>
  41.     </header>
  43.     <!-- 主体 -->
  44.     <main>
  45.         <div class="navigation2">
  46.             <!-- 2行3列 -->
  48.             <div class="left">
  49.                 <a href="">PHP开发</a>
  50.                 <a href="">大前端</a>
  51.                 <a href="">PHP开发</a>
  52.                 <a href="">PHP开发</a>
  53.                 <a href="">PHP开发</a>
  54.                 <a href="">PHP开发</a>
  55.                 <a href="">PHP开发</a>
  56.                 <a href="">PHP开发</a>
  57.             </div>
  59.             <div class="slider">
  60.                 <a href="">
  61.                     <img src="static/images/slider.jpeg" alt="" />
  62.                 </a>
  63.             </div>
  65.             <div class="right">
  67.                 <div class="user">
  68.                      <div class="userID">
  69.                          <img src="static/images/touxiang.jpeg" alt="">
  70.                          <div class="userID-desc">
  71.                            <a href="">手机用户01</a>
  72.                            <span>P豆 12</span> 
  73.                          </div>
  74.                      </div>       
  75.                      <div class="study">
  76.                          <button>我的学习</button>
  77.                     </div>
  78.                 </div>   
  81.                 <ul class="wenda">
  82.                     <li class="cont1">
  83.                         <span>问答社区</span>
  84.                         <a href="">答疑</a>
  85.                     </li>
  86.                     <li class="cont2">
  87.                         <span>头条</span>
  88.                         <a href="">520专属浪漫表白方式！</a>
  89.                     </li>
  90.                     <li class="cont3">
  91.                         <span>福利</span>
  92.                         <a href="">编程书籍>></a>
  93.                     </li>
  94.                     <li class="cont4">
  95.                         <span>新班</span>
  96.                         <a href="">大前端上线</a>
  97.                     </li>
  98.                     <li class="cont5">
  99.                         <span>招募</span>
  100.                         <a href="">课程合作计划</a>
  101.                     </li>
  102.                     <li class="cont6">
  103.                         <span>公告</span>
  104.                         <a href="">APP上线啦</a>
  105.                     </li>
  106.                 </ul>
  108.             </div>
  110.             <div class="bottom-left">
  111.                 <!-- 学习路径 -->
  112.                 <div class="desc">
  113.                     <div class="title">学习路径</div>
  114.                     <span>全部7个</span>
  115.                 </div>
  117.                 <ul class="detail">
  118.                         <li>
  119.                             <img src="static/images/dgjj.png" alt="">
  120.                             <a href="">独孤九贱</a>
  121.                             <span>9门课程<span>
  122.                         </li>
  123.                         <li>
  124.                             <img src="static/images/dgjj.png" alt="">
  125.                             <a href="">玉女心经</a>
  126.                             <span>5门课程<span>
  127.                         </li>
  128.                         <li>
  129.                             <img src="static/images/dgjj.png" alt="">
  130.                             <a href="">天龙八部</a>
  131.                             <span>3门课程<span>
  132.                         </li>
  133.                         <li>
  134.                             <img src="static/images/dgjj.png" alt="">
  135.                             <a href="">自学指南</a>
  136.                             <span>19门课程<span>
  137.                         </li>
  138.                         <li>
  139.                             <img src="static/images/dgjj.png" alt="">
  140.                             <a href="">趣味闯关</a>
  141.                             <span>22门课程<span>
  142.                         </li>    
  143.                  </ul>
  144.             </div>                      
  146.             <div class="bottom-right">
  147.              <ul>
  148.                 <li class="tubiao1">
  149.                     <a href="">
  150.                     <img src="static/images/weixin.png" alt=""></img>
  151.                     <h5>官方公众号</h5>
  152.                    </a>
  153.                 </li>
  155.                 <li class="tubiao1">
  156.                     <a href="">
  157.                     <img src="static/images/qq.png" alt=""></img>
  158.                     <h5>官方QQ群</h5>
  159.                    </a>
  160.                 </li>
  161.             </ul>
  162.         </div>    
  163.     </div>   
  164.     </main>
  165. </body>

resettext.css

  1. /* 页面元素样式初始化 */
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  8. a {
  9.     text-decoration: none;
  10.     color:#555;
  11. }    
  13. body {
  14.     background-color: rgb(243,245,247);
  15. }
  17. li {
  18.     list-style: none;
  19. }

headertext.css

  1. header .top{
  2.     width: 100vw;
  3.     height: 40px;
  4.     background-color: rgb(52,52,52) ;
  5.     color: #aaa;
  6. }
  8. header .top .content1 img {
  9.     width: 50%;
  10.     border-radius: 50%;
  11. }
  13. header .top .content1 {
  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 .content1 .topright {
  24.     display:grid;
  25.     grid-template-columns:repeat(2,1fr);
  26.     place-items: center;
  27. }
  29. /* 导航 */
  31. header .navigations {
  32.     width: 100vw;
  33.     height: 90px;
  34.     background-color:#fff;
  35. }
  37. header .navigations .content2 {
  38.     width: 1200px;
  39.     display: grid;
  40.     grid-template-columns: 140px 1fr 200px;
  41.     grid-auto-rows:90px;
  42.     gap:10px;
  43.     margin: auto;
  44.     place-items: center start;
  45. }
  47. header .navigations .content2 img {
  48.     width:100%;
  49. }
  51. header .navigations .content2 nav a.shouye,
  52. header .navigations .content2 nav a:hover {
  53.     color:red;
  54.     font-weight:bold;
  55. }
  57. header .navigations .content2 nav a {
  58.     padding: 0 10px;
  59. }
  61. header .navigations .content2 .search {
  62.     display: flex;
  63. }
  65. header .navigations .content2 .search input[type='search'] {
  66.     width: 200px;
  67.     height: 36px;
  68.     border: none;
  69.     outline: none;
  70.     background-color: #f7f8fa;
  71.     border-radius: 20px;
  72.     padding-left: 10px;
  73. }

maintext.css

  1. main {
  2.     font-size: 14px;
  3. }
  5. main .navigation2 {
  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;
  14. }
  16. main .navigation2>*{
  17.     background-color:#fff;
  18.     border-radius: 20px;
  19. }
  21. /* 底部左侧占2列 */
  22. main .navigation2 .bottom-left {
  23.     grid-column:span 2;
  24. }
  26. main .navigation2 .slider img {
  27.     width:100%;
  28.     border-radius: 20px;
  29. }
  31. /* 左侧导航 */
  33. main .navigation2 .left {
  34.     display:grid;
  35.     place-items:center;
  36.     padding:20px 0;
  37. }
  39. main .navigation2 .left a:hover{
  40.     color:red;
  41.     background-color:rgb(230, 230, 250);
  42. }
  44. main .navigation2 .left a {
  45.     border-radius: 20px;
  46.     padding:10px 20px;
  48. }
  50. /* 底部左侧 */
  51. main .navigation2 .bottom-left {
  52.     display:grid;
  53.     grid-template-columns: 100px 1fr;
  54.     gap:30px;
  55. }
  57. main .navigation2 .bottom-left .desc {
  58.     display:grid;
  59.     place-items:center;
  60.     padding:16px;
  61. }
  63. main .navigation2 .bottom-left .detail img{
  64.     width: 100%;
  65.     grid-row: span 2;
  66. }
  68. main .navigation2 .bottom-left .detail {
  69.     display: flex;
  70.     place-items: center;
  71.     place-content: space-between;
  72. } 
  74. /* main .navigation2 .bottom-left .detail{
  75.     display: grid;
  76.     grid-template-columns: repeat(5, 1fr);
  77.     place-content: center; 
  79. } */
  81. main .navigation2 .bottom-left .detail li {
  82.     display:grid;
  83.     grid-template-columns: 36px 85px;
  84.     gap:0 10px;
  85.     place-items:center start;
  86. }
  88. main .navigation2 .bottom-left .detal li a{
  89.     font-size:14px;
  90. }
  92. main .navigation2 .bottom-left .detal li a:hover{
  93.     color:red;
  94. }
  96. main .navs .bottom-left .detal li span,
  97. main .navs .bottom-left .desc span {
  98.     font-size: 12px;
  99.     color:#999;
  100. }
  103. /* 右侧导航 */
  105. main .right {
  106.     display:grid;
  107.     grid-template-rows:142px 1fr;
  109. }
  111. main .right .user{
  112.     display:grid;
  113.     grid-template-rows: 70px 1fr;
  114.     border-bottom:rgb(230, 230, 250) solid 1px;
  115.     place-items:center;
  116. }
  119. main .right .user .userID{
  120.     display:grid;
  121.     grid-template-columns: 40px 75px;
  122.     gap:0 20px;
  123. }
  126. button{
  127.     background-color:red;
  128.     width:150px;
  129.     height:34px;
  130.     border-radius:20px;
  131.     border-width:0;
  132.     color:white;
  133. }
  135. main .right .wenda{
  136.     display:grid;
  137.     grid-template-rows: repeat(6,1fr);
  138.     place-items:center start;
  139.     padding:0 20px;
  140.     }
  143.     main .right .wenda .cont1 a{
  144.         background-color:red;
  145.         color:white;
  146.         font-size: smaller;
  147.         }
  151. /* 底部右侧 */
  153. main .navigation2 .bottom-right ul{
  154.     display:flex;
  155.     place-content:center;
  156.     gap:20px;
  157.     padding:10px;
  158. }
  160. main .navigation2 .bottom-right li{
  161.     display:grid;
  162.     grid-template-rows: 36px 36px;
  163. }