1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <link rel="stylesheet" href="static/css/reset.css" />
  9.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3269118_mgnsjoz5gtp.css" />
  10.     <link rel="stylesheet" href="static/css/header.css" />
  11.     <link rel="stylesheet" href="static/css/main-nav.css" />
  12.     <link rel="stylesheet" href="//at.alicdn.com/t/font_3284190_7o8q270yfoo.css">
  14.     <title>仿php.cn中文网首页差头部</title>
  15. </head>
  17. <body>
  18.     <!-- 页眉 -->
  19.     <header>
  20.         <!-- 1 顶部 -->
  21.         <div class="top">
  22.             <div class="content">
  23.                 <div class="title">php中文网,程序员梦开始的地方!</div>
  24.                 <div class="right">
  25.                     <a href="" class="iconfont icon-tixing"></a>
  26.                     <a href=""><img src="static/images/user-pic.jpeg" alt="" /></a>
  27.                 </div>
  28.             </div>
  29.         </div>
  31.         <!-- 2 导航 -->
  32.         <div class="navs">
  33.             <div class="content">
  34.                 <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
  35.                 <nav>
  36.                     <a href="" class="active">首页</a>
  37.                     <a href="">视频教程</a>
  38.                     <a href="">学习路径</a>
  39.                     <a href="">php培训</a>
  40.                     <a href="">资源下载</a>
  41.                 </nav>
  42.                 <div class="search">
  43.                     <input type="search" placeholder="输入关键字搜索" />
  44.                     <span class="iconfont icon-fangdajing fdj"></span>
  45.                 </div>
  46.             </div>
  47.         </div>
  48.     </header>
  50.     <!-- 主体 -->
  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-content">
  74.                     <div class="right-content-shang">
  75.                         <div class="right-content-shang1"> <span>
  76.                             <a href=""><img src="static/images/hua.jpg" alt=""></a>
  77.                         </span>
  78.                         <dl>
  79.                             <dt><a href="">愿情的博客</a></dt>
  80.                             <dd>p豆:32</dd>
  81.                         </dl>
  82.                         </div>
  83.                         <div class="right-content-shang2">
  84.                             <a href="">我的学习</a>
  85.                         </div>
  86.                     </div>
  87.                    <div class="right-content-xia">
  88.                        <div class="f1">
  89.                         <span>问答社区</span>
  90.                         <a href="" >答疑</a>
  91.                        </div>
  92.                         <div class="f2">
  93.                            <p>
  94.                                 <span>头条</span>
  95.                                 <a href="">程序员有多好</a>
  96.                                 <!-- <marquee direction="up" style="float: right;">UP</marquee> -->
  97.                            </p>
  98.                            <p>
  99.                                 <span>新课</span>
  100.                                 <a href="">3.9号公益直播课</a>
  101.                            </p>
  102.                            <p>
  103.                                 <span>新班</span>
  104.                                 <a href="">19期PHP直播班</a>
  105.                            </p>
  106.                            <p>
  107.                                 <span>招募</span>
  108.                                 <a href="">课程合作计划</a>
  109.                            </p>
  110.                            <p>
  111.                             <span>公告</span>
  112.                             <a href="">APP上线啦</a>
  113.                        </p>
  114.                         </div>
  115.                    </div>
  116.                 </div>
  117.             </div>
  122.             <div class="bottom-left">
  123.                 <!-- 学习路径  -->
  124.                 <div class="desc">
  125.                     <div class="title">学习路径</div>
  126.                     <span>全部7个&gt;</span>
  127.                 </div>
  128.                 <ul class="detail">
  129.                     <li onclick="">
  130.                         <img src="static/images//dgjj.png" alt="" />
  131.                         <a href="">独孤九贱</a>
  132.                         <span>9门课程</span>
  133.                     </li>
  134.                     <li onclick="">
  135.                         <img src="static/images//ynxj.png" alt="" />
  136.                         <a href="">独孤九贱</a>
  137.                         <span>9门课程</span>
  138.                     </li>
  139.                     <li onclick="">
  140.                         <img src="static/images//phpkjkf.png" alt="" />
  141.                         <a href="">独孤九贱</a>
  142.                         <span>9门课程</span>
  143.                     </li>
  144.                     <li onclick="">
  145.                         <img src="static/images//phpksrm.png" alt="" />
  146.                         <a href="">趣味闯关</a>
  147.                         <span>9门课程</span>
  148.                     </li>
  149.                     <li onclick="">
  150.                         <img src="static/images//dgjj.png" alt="" />
  151.                         <a href="">独孤九贱</a>
  152.                         <span>9门课程</span>
  153.                     </li>
  154.                 </ul>
  155.             </div>
  157.             <div class="bottom-right">
  158.                 <ul class="content">
  159.                     <li>
  160.                         <a href="">
  161.                         <b class="iconfont icon-weixin"></b>
  162.                         <h2>官方公众号</h2>
  163.                         </a>
  164.                     </li>
  165.                     <li>
  166.                         <a href="">
  167.                         <b class="iconfont icon-QQ-circle-fill"></b>
  168.                         <h2>官方QQ群</h2>
  169.                         </a>
  170.                     </li>
  171.                 </ul>
  172.             </div>
  173.         </div>
  174.             </div>
  175.         </div>
  177.     </main>
  178. </body>
  180. </html>
  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. }
  22. /* 底部左侧占2列 */
  24. main .navs .bottom-left {
  25.     grid-column: span 2;
  26. }
  28. main .navs .slider img {
  29.     width: 100%;
  30.     border-radius: 20px;
  31. }
  34. /* 左侧导航 */
  36. main .navs .left {
  37.     display: grid;
  38.     place-items: center;
  39.     padding: 20px 0;
  40. }
  42. main .navs .left a:hover {
  43.     color: red;
  44.     background-color: rgb(250, 223, 227);
  45. }
  47. main .navs .left a {
  48.     border-radius: 20px;
  49.     padding: 10px 20px;
  50. }
  53. /* 右侧导航栏 */
  54. main .navs .right .right-content{
  55.     display: grid;
  56.     grid-template-rows: 142px 240px;
  57. }
  58. main .navs .right .right-content .right-content-shang{
  59.     display: grid;
  60.     border-bottom: 1px solid #eeeeee;
  61.     padding: 0 0 20px 0;
  62. }
  63. main .navs .right .right-content .right-content-shang .right-content-shang1{
  64.     margin: auto;
  65. }
  66. main .navs .right .right-content .right-content-shang .right-content-shang1 img{
  67.     float: left;
  68.     width: 40px;
  69.     height: 40px;
  70.     border-radius: 100px;
  71.     margin-top: 20px;
  72. }
  73. main .navs .right .right-content .right-content-shang .right-content-shang1 dl{
  74.     float: right;
  75.     width: 105px;
  76.     margin-top: 15px;
  77.     padding: 0 10px;
  78. }
  79. main .navs .right .right-content .right-content-shang .right-content-shang1 dd{
  80.     color: #b6b6b6;
  81. }
  82. main .navs .right .right-content .right-content-shang .right-content-shang1 a{
  83.     font-weight: bold;
  84. }
  85. main .navs .right .right-content .right-content-shang .right-content-shang2{
  86.     width: 150px;
  87.     height: 34px;
  88.     background: #f11717;
  89.     border-radius: 100px;
  90.     line-height: 34px;
  91.     text-align: center;
  92.     text-decoration: none;
  93.     overflow: hidden;
  94.     margin-top: 20px;
  95.     margin-left: 20px;
  96. }
  97. main .navs .right .right-content .right-content-shang .right-content-shang2 a {
  98.     color: #ffffff;
  99. }
  100. main .navs .right .right-content .right-content-xia{
  101.     display: grid;
  102.     grid-template-rows: 50px 1fr;
  103.     margin-left: 20px;
  104. } 
  105. main .navs .right .right-content .right-content-xia .f1 a{
  106.     width: 31px;
  107.     height: 16px;
  108.     background: #ff583d;
  109.     border-radius: 2px;
  110.     font-size: 12px;
  111.     color: #ffffff;
  112.     line-height: 16px;
  113. }
  114. main .navs .right .right-content .right-content-xia .f2 a:hover{
  115.     color: red;
  116. }
  117. main .navs .right .right-content .right-content-xia .f1{
  118.     place-self: center start;
  119. }
  120. main .navs .right .right-content .right-content-xia .f1 span{
  121.     margin-right: 10px;
  122. }
  123. main .navs .right .right-content .right-content-xia .f1 a{
  124.     padding: 1px 3px;
  125. }
  126. main .navs .right .right-content .right-content-xia .f2{
  127.     display: grid;
  128.     place-items: center start;
  129. }
  130. main .navs .right .right-content .right-content-xia .f2 a{
  131.     color: #b6b6b6; 
  132. }
  133. /* 底部左侧 */
  135. main .navs .bottom-left {
  136.     display: grid;
  137.     grid-template-columns: 100px 1fr;/
  138. }
  140. main .navs .bottom-left .desc {
  141.     display: grid;
  142.     place-items: center;
  143.     padding: 16px;
  144. }
  146. main .navs .bottom-left .detail img {
  147.     width: 100%;
  148.     grid-row: span 2;
  149. }
  151. main .navs .bottom-left .detail {
  152.     display: flex;
  153.     place-items: center;
  154.     place-content: space-between;
  155. }
  157. main .navs .bottom-left .detail li {
  158.     display: grid;
  159.     grid-template-columns: 36px 85px;
  160.     gap: 0 10px;
  161.     place-items: center start;
  162. }
  164. main .navs .bottom-left .detail li a {
  165.     font-size: 14px;
  166. }
  168. main .navs .bottom-left .detail li a:hover {
  169.     color: red;
  170. }
  172. main .navs .bottom-left .detail li span,
  173. main .navs .bottom-left .desc span {
  174.     font-size: 12px;
  175.     color: #999;
  176. }
  177. main .navs .bottom-right .content{
  178.     display: grid;
  179.     grid-template-columns: repeat(2,1fr);
  180.     place-items: center;
  181.     place-content: space-between;
  182. }
  183. main .navs .bottom-right .content li a h2{
  184.     font-size: 12px;
  185.     font-weight: bold;
  186.     height: 16px;
  187.     line-height: 16px;
  188.     overflow: hidden;
  189.     margin-top: 5px;
  190. }
  191. main .navs .bottom-right .content li a b{
  192.    font-size: 30px;
  193.    margin-left: 13px;
  194. }
  195. main .navs .bottom-right .content li {
  196.     float: left;
  197.     width: 70px;
  198.     margin-top: 13px;
  199.     margin-left: 20px;
  200. }
  201. main .navs .right .right-content .right-content-xia .f2 p span{
  202.     padding: 0 10px 0 0;
  203. }

更多相关文章

  1. Android硬件抽象层（HAL）概要介绍和学习计划
  2. Android中Drawable Resource学习
  3. 代码虚拟的[小代码]在Android和PHP之间的加密/解密,AES加密
  4. 仿 php.cn 中文网首页
  5. 仿php中文网首页（部分）
  6. 练习PHP中文网首页
  7. 仿PHP中文网首页部分
  8. android入门：zxing学习笔记
  9. Android(安卓)开源项目-StandupTimer学习笔记索引

随机推荐

  1. 如何在没有任何扩展名的php中保存图像
  2. thinkphp框架里怎么用linux的crontab写ph
  3. MySQL或PHP动态地将行转换为列
  4. 如何搜索/汇总我的PHP结果？
  5. PHP实现简单的学生信息管理系统（web版）
  6. 即使system（）中的命令完成，PHP system（）也会挂
  7. 一套PHP做app接口的解决方案
  8. 为什么俺的php无法连接PostgreSQL呢???
  9. yii2的AR模型对id自动去重的问题
  10. PHP中怎样创建一个空对象?