search

博客列表 >模仿PHP中文网首页

模仿PHP中文网首页

进
进原创
2022年07月18日 19:30:58269浏览

模仿PHP中文网首页

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="https://at.alicdn.com/t/font_3205780_7eqow85axa.css">
  8.     <link rel="stylesheet" href="static/style/top.css">
  9.     <link rel="stylesheet" href="static/style/main.css">
  10.     <title>php中文网</title>
  11. </head>
  12. <body>
  13.     <!-- 页眉 -->
  14.     <header>
  15.         <!-- 顶部 -->
  16.         <div class="top">
  17.             <!-- 左侧 -->
  18.             <div class="neirong">
  19.                 <div class="wenzi">php中文网，程序员梦开始的地方！</div>
  20.             <!-- 右侧用户 -->
  21.                 <div class="you">
  22.                     <a class="iconfont icon-tixingtianchong" href=""></a>
  23.                     <a class="touxiang" href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  24.                 </div>
  25.             </div>
  26.         </div>
  27.         <!-- 导航 -->
  28.         <div class="navs">
  29.             <div class="content">
  30.                 <a href="" class="logo"><img src="static/images/logo.png" alt=""></a>
  31.                 <nav>
  32.                     <a href="" class="active">首页</a>
  33.                     <a href="">视频教程</a>
  34.                     <a href="">学习路径</a>
  35.                     <a href="">PHP培训</a>
  36.                     <a href="">资源下载</a>
  37.                 </nav>
  38.                 <div class="search">
  39.                     <input type="search" placeholder="请输入搜索内容！" />
  40.                     <span class="iconfont icon-fangdajing1"></span>
  42.                 </div>
  43.             </div>
  44.         </div>
  45.     </header>
  46.     <!-- 内容 -->
  47.     <main>
  48.         <div class="navs">
  49.           <div class="left">
  50.             <a href="">php开发</a>
  51.             <a href="">大前端</a>
  52.             <a href="">后端开发</a>
  53.             <a href="">数据库</a>
  54.             <a href="">移动端</a>
  55.             <a href="">运维开发</a>
  56.             <a href="">UI设计</a>
  57.             <a href="">计算机基础</a>
  58.           </div>
  59.           <div class="slider">
  60.             <a href=""><img src="static/images/slider.jpeg" alt="" /></a>
  61.           </div>
  62.           <div class="right">
  63.             <div class="righttop">
  65.               <div class="touxiang"><a href=""><img src="static/images/user-pic.jpeg"  alt=""></a></div>
  66.               <span><a href="" class="name">进</a><p>p豆 16</p></span>
  68.               <button class="xuexi">我的学习</button>
  69.             </div>
  70.             <div class="fengexian"></div>
  71.             <div class="rightfoot">
  72.               <p class="xinxi1">
  73.                 <span>答问社区</span>
  74.                 <a href="">答疑</a>
  75.               </p>
  76.               <p class="xinxi2">
  77.                 <span>头条</span>
  78.                 <a href="">今日头条</a>
  79.               </p>
  80.               <p class="xinxi3">
  81.                 <span>福利</span>
  82.                 <a href="">限时折扣>></a>
  83.               </p>
  84.               <p class="xinxi4">
  85.                 <span>新班</span>
  86.                 <a href="">20期PHP线上班</a>
  87.               </p>
  88.               <p class="xinxi5">
  89.                 <span>招募</span>
  90.                 <a href="">课程合作计划</a>
  91.               </p>
  92.               <p class="xinxi6">
  93.                 <span>公告</span>
  94.                 <a href="">APP上线啦</a>
  95.               </p>
  96.             </div>
  97.           </div>
  98.           <div class="bottom-left">
  99.             <div class="desc">
  100.               <div class="title">学习路径</div>
  101.               <span>全部7个&gt;</span>
  102.             </div>
  103.             <ul class="detail">
  104.               <li onclick="">
  105.                 <img src="static/images/dgjj.png" alt="" />
  106.                 <a href="">独孤九贱</a>
  107.                 <span>9门课程</span>
  108.               </li>
  109.               <li onclick="">
  110.                 <img src="static/images/ynxj.png" alt="" />
  111.                 <a href="">独孤九贱</a>
  112.                 <span>9门课程</span>
  113.               </li>
  114.               <li onclick="">
  115.                 <img src="static/images/tlbb.png" alt="" />
  116.                 <a href="">独孤九贱</a>
  117.                 <span>9门课程</span>
  118.               </li>
  119.               <li onclick="">
  120.                 <img src="static/images/phpkjkf.png" alt="" />
  121.                 <a href="">独孤九贱</a>
  122.                 <span>9门课程</span>
  123.               </li>
  124.               <li onclick="">
  125.                 <img src="static/images/phpksrm.png" alt="" />
  126.                 <a href="">独孤九贱</a>
  127.                 <span>9门课程</span>
  128.               </li>
  129.             </ul>
  130.           </div>
  131.           <div class="bottom-right">
  132.             <div class="weixin">
  133.               <text class="iconfont icon-weixin-copy"></text>
  134.               <h4>官方公众号</h4>
  135.             </div>
  136.             <div class="qq">
  137.               <text class="iconfont icon-QQ-circle-fill"></text>
  138.               <h4>官方QQ群</h4>
  139.             </div>
  140.           </div>
  141.         </div>
  142.       </main>
  143. </body>
  144. </html>

1.1css代码re.css

  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4.     box-sizing: border-box;
  5. }
  7. a {
  8.     text-decoration: none;
  9.     color: #555;
  10. }
  12. body {
  13.     background-color: rgb(243, 245, 247);
  14. }
  16. li {
  17.     list-style: none;
  18. }

1.2css代码top.css

  1. @import url(re.css);
  2. header .top {
  3.     width: 100vw;
  4.     height: 40px;
  5.     background-color: #343434;
  6.     color: white;
  7. }
  9. header .top .neirong {
  10.     width: 1200px;
  11.     display: grid;
  12.     grid-template-columns: 400px 100px;
  13.     grid-auto-rows: 40px;
  14.     place-content: space-between;
  15.     place-items: center start;
  16.     margin: auto;
  17. }
  19. header .top .neirong a {
  20.     color: white;
  21. }
  23. header .top .neirong img {
  24.     width: 50%;
  25.     border-radius: 50%;
  26. }
  28. header .top .neirong .you {
  29.     display: grid;
  30.     grid-template-columns: repeat(2, 1fr);
  31.     place-items: center;
  32. }
  34. header .top .neirong .you .iconfont {
  35.     font-size: larger;
  36. }
  39. /* 导航 */
  40. header .navs {
  41.     width: 100vw;
  42.     height: 90px;
  43.     background-color: white;
  44.     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  45. }
  47. header .navs .content {
  48.     width: 1200px;
  49.     display: grid;
  50.     grid-template-columns: 140px 1fr 200px;
  51.     grid-auto-rows: 90px;
  52.     place-items: center start;
  53.     margin: auto;
  54.     gap: 10px;
  55. }
  57. header .navs .content nav {
  58.     display: flex;
  59. }
  61. header .navs .content nav a {
  62.     padding: 0 10px;
  63. }
  65. header .navs .content nav a:hover,
  66. header .navs .content nav a.active {
  67.     font-size: bold;
  68.     color: red;
  69. }
  71. header .navs .content a img {
  72.     width: 100%;
  73. }
  75. header .navs .content .search {
  76.     display: flex;
  77. }
  79. header .navs .content .search input[type='search'] {
  80.     border: none;
  81.     background-color: #eee;
  82.     width: 200px;
  83.     height: 36px;
  84.     outline: none;
  85.     border-radius: 20px;
  86.     padding-left: 10px;
  87. }
  89. header .navs .content .search .iconfont {
  90.     position: relative;
  91.     font-size: 22px;
  92.     left: -40px;
  93.     top: 6px;
  94.     color: #ccc;
  95. }
  97. header .navs .content .search .iconfont:hover {
  98.     cursor: pointer;
  99.     color: red;
  100. }

1.3css代码main.css

  1. @import url(font_icon/iconfont.css);
  2. main {
  3.     font-size: 14px;
  4. }
  6. main .navs {
  7.     display: grid;
  8.     grid-template-rows: 400px 80px;
  9.     grid-template-columns: 160px 810px 190px;
  10.     gap: 20px;
  11.     place-content: center;
  12.     margin: 30px 0;
  13. }
  14. /* 统一样式 */
  15. main .navs > * {
  16.     background-color: white;
  17.     border-radius: 20px;
  18. }
  20. main .navs .bottom-left {
  21.     grid-column: span 2;
  22. }
  24. main .navs .left {
  25.     padding: 20px 0;
  26.     display: grid;
  27.     place-items: center;
  28. }
  30. main .navs .left a {
  31.     padding: 10px 20px;
  32.     width: 120px;
  33.     text-align: center;
  34. }
  36. main .navs .left a:hover {
  37.     color: red;
  38.     border-radius: 20px;
  39.     background-color: rgb(250, 223, 227);
  40. }
  42. main .navs .slider img {
  43.     width: 100%;
  44.     border-radius: 20px;
  45. }
  47. main .navs .bottom-left {
  48.     display: grid;
  49.     grid-template-columns: 100px 1fr;
  50. }
  52. main .navs .bottom-left .detail img {
  53.     width: 100%;
  54.     grid-row: span 2;
  55. }
  57. main .navs .bottom-left .detail li {
  58.     display: grid;
  59.     grid-template-columns: 36px 85px;
  60.     gap: 3px;
  61.     /* grid-template-columns: repeat(2,36); */
  62. }
  64. main .navs .bottom-left .detail a:hover {
  65.     color: #ff583d;
  66. }
  68. main .navs .bottom-left .detail span {
  69.     color: #b6b6b6;
  70.     font-size: 12px;
  71. }
  73. main .navs .bottom-left .detail a {
  74.     color: black;
  75. }
  77. main .navs .bottom-left .desc span {
  78.     color: #b6b6b6;
  79.     font-size: 12px;
  80. }
  82. main .navs .bottom-left .detail {
  83.     display: flex;
  84.     place-items: center;
  85.     place-content: space-between;
  86. }
  88. main .navs .bottom-left .desc {
  89.     padding: 16px 0;
  90.     display: grid;
  91.     place-items: center;
  92. }
  94. /* 作业部分 */
  96. main .navs .right {
  97.     display: grid;
  98.     grid-template-rows: 142px 1fr 240px;
  99. }
  101. main .navs .right .righttop {
  102.     display: grid;
  103.     grid-template-rows: 80px 34px ;
  104.     grid-template-columns: 40px 150px;
  105.     margin: 0 20px;
  106.     place-items:center start;
  107.     gap: 10px;
  109. }
  111. main .navs .right .righttop .touxiang img{
  112.     width: 100%;
  113.     border-radius: 50%;
  114. }
  116. main .navs .right .righttop .xuexi {
  117.     width: 150px;
  118.     height: 34px;
  119.     border: none;
  120.     background-color: red;
  121.     color: white;
  122.     border-radius: 20px;
  123. }
  124. main .navs .right .righttop .xuexi:hover {
  125.     cursor: pointer;
  126.     background-color: rgb(231, 0, 0);
  127. }
  129. main .navs .right .rightfoot {
  130.     display: grid;
  131.     grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  132.     place-items: center start;
  133.     margin: 0 20px;
  134. }
  136. main .navs .right .rightfoot p {
  137.     display: grid;
  138.     grid-template-columns: 1fr 100px;
  139.     place-items: center start;
  140.     gap: 10px;
  141.     margin: 0 10px 0 0;
  142. }
  144. main .navs .right .fengexian {
  145.     width: 190px;
  146.     height: 1px;
  147.     background-color: #eee;
  148. }
  150. main .navs .right .rightfoot .xinxi1 a{
  151.     width: 31px;
  152.     height: 16px;
  153.     background-color: #ff583d;
  154.     color: white;
  155.     font-size: 14px;
  156.     text-align: center;
  157.     line-height: 16px;
  158.     border-radius: 3px;
  159. }
  161. main .navs .right .rightfoot>span {
  162.     font-size: bold;
  163. }
  164. main .navs .right .rightfoot a {
  165.     color: #b6b6b6;
  166. }
  168. main .navs .right .righttop .name {
  169.     font-size: 16px;
  170.     font-size: bold;
  171.     color: black;
  172. }
  174. main .navs .right .righttop p {
  175.     color: #b6b6b6;
  176. }
  178. /* 联系方式 */
  180. main .navs .bottom-right {
  181.     display: grid;
  182.     grid-template-columns: 95px 95px;
  183.     place-items: center;
  184. }
  186. main .navs .bottom-right .weixin,
  187. main .navs .bottom-right .qq {
  188.     display: grid;
  189.     grid-template-rows: 1fr 1fr;
  190.     place-items: center;
  191. }
  193. main .navs .bottom-right .weixin .iconfont,
  194. main .navs .bottom-right .qq .iconfont {
  195.    font-size: 30px;
  196.    color: #b6b6b6;
  197. }
  199. main .navs .bottom-right .weixin h4,
  200. main .navs .bottom-right .qq h4 {
  201.     font-size: 13px;
  202. }
  204. main .navs .bottom-right .weixin:hover,
  205. main .navs .bottom-right .qq:hover {
  206.     cursor: pointer;
  207.     color: #ff583d;
  208. }

效果截图演示

image-20220718192902272

image-20220718192941024

image-20220718192956363

image-20220718193016895

上一条：vw+rem移动端布局原理下一条：rem+vw的布局原理和流程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多