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="//at.alicdn.com/t/font_3269118_mgnsjoz5gtp.css" />
  9.         <link rel="stylesheet" href="static/font-icon/iconfont.css" />
  10.         <link rel="stylesheet" href="static/css/header.css" />
  11.         <link rel="stylesheet" href="static/css/main-nav.css" />
  12.         <title>仿php.cn中文网首页差头部</title>
  13.     </head>
  14.     <body>
  15.         <!-- 页眉 -->
  16.         <header>
  17.             <!-- 1 顶部 -->
  18.             <div class="top">
  19.                 <div class="content">
  20.                     <div class="title">php中文网,程序员梦开始的地方!</div>
  21.                     <div class="right">
  22.                         <a href="" class="iconfont icon-tixing"></a>
  23.                         <a href=""><img src="static/images/user-pic.jpeg" alt="" /></a>
  24.                     </div>
  25.                 </div>
  26.             </div>
  28.             <!-- 2 导航 -->
  29.             <div class="navs">
  30.                 <div class="content">
  31.                     <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
  32.                     <nav>
  33.                         <a href="" class="active">首页</a>
  34.                         <a href="">视频教程</a>
  35.                         <a href="">学习路径</a>
  36.                         <a href="">php培训</a>
  37.                         <a href="">资源下载</a>
  38.                     </nav>
  39.                     <div class="search">
  40.                         <input type="search" placeholder="输入关键字搜索" />
  41.                         <span class="iconfont icon-fangdajing fdj"></span>
  42.                     </div>
  43.                 </div>
  44.             </div>
  45.         </header>
  46.         <!-- 主体 -->
  47.         <main>
  48.             <div class="navs">
  49.                 <!-- 2行3列 -->
  51.                 <div class="left">
  52.                     <a href="">php开发</a>
  53.                     <a href="">大前端</a>
  54.                     <a href="">后端开发</a>
  55.                     <a href="">数据库</a>
  56.                     <a href="">移动端</a>
  57.                     <a href="">运维开发</a>
  58.                     <a href="">UI设计</a>
  59.                     <a href="">计算机基础</a>
  60.                 </div>
  61.                 <div class="slider">
  62.                     <a href="">
  63.                         <img src="static/images/slider.jpeg" alt="" />
  64.                     </a>
  65.                 </div>
  66.                 <div class="right">
  67.                     <div class="rightxx">
  68.                         <div class="right-top">
  69.                             <img src="./img/user_avatar.jpg" alt="" />
  70.                             <div class="xmsj">
  71.                                 <span>天宁</span>
  72.                                 <span>p豆 12</span>
  73.                             </div>
  74.                             <button>我的学习</button>
  75.                         </div>
  76.                         <div class="right-bottom">
  77.                             <span>问答社区</span>
  78.                             <a href="#">答疑</a>
  79.                             <span>头条</span>
  80.                             <a href="#">JetBrains和Gitlab均表明暂停</a>
  81.                             <span>新课</span>
  82.                             <a href="#">3.9号公益直播</a>
  83.                             <span>新班</span>
  84.                             <a href="#">19期PHP直播班</a>
  85.                             <span>招募</span>
  86.                             <a href="#">课程合作计划</a>
  87.                             <span>公告</span>
  88.                             <a href="#">APP上线啦</a>
  89.                         </div>
  90.                     </div>
  91.                 </div>
  92.                 <div class="bottom-left">
  93.                     <!-- 学习路径  -->
  94.                     <div class="desc">
  95.                         <div class="title">学习路径</div>
  96.                         <span>全部7个&gt;</span>
  97.                     </div>
  98.                     <ul class="detail">
  99.                         <li onclick="">
  100.                             <img src="static/images//dgjj.png" alt="" />
  101.                             <a href="">独孤九贱</a>
  102.                             <span>9门课程</span>
  103.                         </li>
  104.                         <li onclick="">
  105.                             <img src="static/images//ynxj.png" alt="" />
  106.                             <a href="">独孤九贱</a>
  107.                             <span>9门课程</span>
  108.                         </li>
  109.                         <li onclick="">
  110.                             <img src="static/images//phpkjkf.png" alt="" />
  111.                             <a href="">独孤九贱</a>
  112.                             <span>9门课程</span>
  113.                         </li>
  114.                         <li onclick="">
  115.                             <img src="static/images//phpksrm.png" alt="" />
  116.                             <a href="">趣味闯关</a>
  117.                             <span>9门课程</span>
  118.                         </li>
  119.                         <li onclick="">
  120.                             <img src="static/images//dgjj.png" alt="" />
  121.                             <a href="">独孤九贱</a>
  122.                             <span>9门课程</span>
  123.                         </li>
  124.                     </ul>
  125.                 </div>
  126.                 <div class="bottom-right">
  127.                     <img src="./img/gzh.png" alt="" />
  128.                     <img src="./img/qqq.png" alt="" />
  129.                     <span>官方公众号</span>
  130.                     <span>官方QQ群</span>
  131.                 </div>
  132.             </div>
  133.             <!-- 最新课程 -->
  134.             <div class="zxkc">
  135.                 <span>最新课程</span>
  136.                 <span>更多&gt;</span>
  137.                 <div class="items">
  138.                     <div class="item">
  139.                         <a href=""><img src="static/images/zxkc1.png" alt="" /></a>
  140.                         <div class="title">
  141.                             <span>中级</span>
  142.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  143.                         </div>
  144.                         <div class="sc">
  145.                             <span>1372次学习</span>
  146.                             <div>
  147.                                 <div class="iconfont icon-shoucang"></div>
  148.                                 <span>收藏</span>
  149.                             </div>
  150.                         </div>
  151.                     </div>
  152.                     <div class="item">
  153.                         <a href=""><img src="static/images/zxkc2.png" alt="" /></a>
  154.                         <div class="title">
  155.                             <span>中级</span>
  156.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  157.                         </div>
  158.                         <div class="sc">
  159.                             <span>1372次学习</span>
  160.                             <div>
  161.                                 <div class="iconfont icon-shoucang"></div>
  162.                                 <span>收藏</span>
  163.                             </div>
  164.                         </div>
  165.                     </div>
  166.                     <div class="item">
  167.                         <a href=""><img src="static/images/zxkc3.png" alt="" /></a>
  168.                         <div class="title">
  169.                             <span>中级</span>
  170.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  171.                         </div>
  172.                         <div class="sc">
  173.                             <span>1372次学习</span>
  174.                             <div>
  175.                                 <div class="iconfont icon-shoucang"></div>
  176.                                 <span>收藏</span>
  177.                             </div>
  178.                         </div>
  179.                     </div>
  180.                     <div class="item">
  181.                         <a href=""><img src="static/images/zxkc4.png" alt="" /></a>
  182.                         <div class="title">
  183.                             <span>中级</span>
  184.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  185.                         </div>
  186.                         <div class="sc">
  187.                             <span>1372次学习</span>
  188.                             <div>
  189.                                 <div class="iconfont icon-shoucang"></div>
  190.                                 <span>收藏</span>
  191.                             </div>
  192.                         </div>
  193.                     </div>
  194.                     <div class="item">
  195.                         <a href=""><img src="static/images/zxkc5.png" alt="" /></a>
  196.                         <div class="title">
  197.                             <span>中级</span>
  198.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  199.                         </div>
  200.                         <div class="sc">
  201.                             <span>1372次学习</span>
  202.                             <div>
  203.                                 <div class="iconfont icon-shoucang"></div>
  204.                                 <span>收藏</span>
  205.                             </div>
  206.                         </div>
  207.                     </div>
  208.                     <div class="item">
  209.                         <a href=""><img src="static/images/zxkc6.png" alt="" /></a>
  210.                         <div class="title">
  211.                             <span>中级</span>
  212.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  213.                         </div>
  214.                         <div class="sc">
  215.                             <span>1372次学习</span>
  216.                             <div>
  217.                                 <div class="iconfont icon-shoucang"></div>
  218.                                 <span>收藏</span>
  219.                             </div>
  220.                         </div>
  221.                     </div>
  222.                     <div class="item">
  223.                         <a href=""><img src="static/images/zxkc7.png" alt="" /></a>
  224.                         <div class="title">
  225.                             <span>中级</span>
  226.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  227.                         </div>
  228.                         <div class="sc">
  229.                             <span>1372次学习</span>
  230.                             <div>
  231.                                 <div class="iconfont icon-shoucang"></div>
  232.                                 <span>收藏</span>
  233.                             </div>
  234.                         </div>
  235.                     </div>
  236.                     <div class="item">
  237.                         <a href=""><img src="static/images/zxkc8.png" alt="" /></a>
  238.                         <div class="title">
  239.                             <span>中级</span>
  240.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  241.                         </div>
  242.                         <div class="sc">
  243.                             <span>1372次学习</span>
  244.                             <div>
  245.                                 <div class="iconfont icon-shoucang"></div>
  246.                                 <span>收藏</span>
  247.                             </div>
  248.                         </div>
  249.                     </div>
  250.                     <div class="item">
  251.                         <a href=""><img src="static/images/zxkc9.png" alt="" /></a>
  252.                         <div class="title">
  253.                             <span>中级</span>
  254.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  255.                         </div>
  256.                         <div class="sc">
  257.                             <span>1372次学习</span>
  258.                             <div>
  259.                                 <div class="iconfont icon-shoucang"></div>
  260.                                 <span>收藏</span>
  261.                             </div>
  262.                         </div>
  263.                     </div>
  264.                     <div class="item">
  265.                         <a href=""><img src="static/images/zxkc10.png" alt="" /></a>
  266.                         <div class="title">
  267.                             <span>中级</span>
  268.                             <a href="">HTTP协议HTTP协议HTTP协议HTTP协议</a>
  269.                         </div>
  270.                         <div class="sc">
  271.                             <span>1372次学习</span>
  272.                             <div>
  273.                                 <div class="iconfont icon-shoucang"></div>
  274.                                 <span>收藏</span>
  275.                             </div>
  276.                         </div>
  277.                     </div>
  278.                 </div>
  279.             </div>
  280.         </main>
  281.     </body>
  282. </html>

由于是在老师代码基础上增加的,所以只展示我写的部分代码

right导航部分css代码

  1. /* 导航right */
  3. header .navs {
  4.     width: 100vw;
  5.     height: 90px;
  6.     background-color: #fff;
  7. }
  9. header .navs .content {
  10.     width: 1200px;
  11.     /* border: 1px solid #000; */
  12.     display: grid;
  13.     grid-template-columns: 140px 1fr 200px;
  14.     grid-auto-rows: 90px;
  15.     gap: 10px;
  16.     margin: auto;
  17.     place-items: center start;
  18. }
  20. header .navs .content img {
  21.     width: 100%;
  22. }
  24. header .navs .content nav a.active,
  25. header .navs .content nav a:hover {
  26.     color: red;
  27.     font-weight: bold;
  28. }
  30. header .navs .content .search {
  31.     display: flex;
  32. }
  34. header .navs .content nav a {
  35.     padding: 0 10px;
  36. }
  38. header .navs .content .search input[type="search"] {
  39.     width: 200px;
  40.     height: 36px;
  41.     border: none;
  42.     outline: none;
  43.     background-color: #f7f8fa;
  44.     border-radius: 20px;
  45.     padding-left: 10px;
  46. }
  48. header .navs .content .search .fdj {
  49.     font-size: 22px;
  50.     color: #ccc;
  51.     position: relative;
  52.     left: -40px;
  53.     top: 5px;
  54. }

最新课程部分css代码

  1. /* 最新课程 */
  2. main .zxkc {
  3.     display: grid;
  4.     /* grid-template-columns: repeat(2, 1fr);
  5.     grid-template-rows: 60px 1fr; */
  6.     grid-template-columns: 1160px;
  7.     grid-template-rows: 32px 530px;
  8.     place-content: center;
  9.     gap: 20px 0;
  10.     margin: 30px 20px;
  11. }
  12. /* 最新课程标题加粗放大 */
  13. main .zxkc > span:first-of-type {
  14.     font-size: 28px;
  15.     font-weight: bolder;
  16. }
  17. /* 更多字体颜色调成灰色 */
  18. main .zxkc > span:last-of-type {
  19.     color: #999999;
  20. }
  21. /* 具体课程区 */
  22. main .zxkc .items {
  23.     grid-area: 2 / 1 / 3 / 3;
  24.     width: 1200px;
  25.     display: grid;
  26.     grid-template-columns: repeat(5, 1fr);
  27.     grid-auto-rows: repeat(2, 1fr);
  28.     /* place-content: center; */
  29.     gap: 10px;
  30. }
  31. /* 设置课程背景和高度圆角 */
  32. main .zxkc .items .item {
  33.     border-radius: 10px;
  34.     background-color: white;
  35.     height: 235px;
  36. }
  37. /* 设置图片和上方圆角 */
  38. main .zxkc .items .item img {
  39.     width: 100%;
  40.     border-top-left-radius: 10px;
  41.     border-top-right-radius: 10px;
  42. }
  44. /* 课程标题设置位置 */
  45. main .zxkc .items .item .title {
  46.     margin: 15px 5px 0px 15px;
  47. }
  49. /* 等级样式 */
  50. main .zxkc .items .item .title span {
  51.     background-color: #93999f;
  52.     color: #fff;
  53.     padding: 0px 3px;
  54. }
  55. /* 标题鼠标移动至变红 */
  56. main .zxkc .items .item .title a:hover {
  57.     color: red;
  58.     cursor: pointer;
  59. }
  61. /* 浏览次数和收藏 */
  62. main .zxkc .items .item .sc {
  63.     color: #999999;
  64.     display: flex;
  65.     place-content: space-between;
  66.     margin: 20px 15px 10px;
  67. }
  69. main .zxkc .items .item .sc div {
  70.     display: flex;
  71.     place-items: center;
  72. }

更多相关文章

  1. sdk manage 更新与安装
  2. 仿php中文网右侧内容
  3. php中文网布局实战
  4. 仿PHP中文网首页
  5. Android(安卓)在TextView中加入多个点击文本区域
  6. 仿 php.cn 中文网首页
  7. 仿php中文网首页（部分）
  8. 练习PHP中文网首页
  9. 布局实战小结

随机推荐

  1. android的编译和运行过程深入分析
  2. android权限机制，你真的了解么
  3. Android的 linux内核
  4. 图解 Android View动画中 android:pivotX
  5. 你的手机到底安不安全？看看Android和iOS是
  6. 简单实现RecyclerView版本的竖向翻页效果
  7. webrtc 之android与PC互通
  8. Android的消息机制，用Android线程间通信的
  9. android基本架构
  10. Android自定义视图二：用Canvas和Paint绘制