Community Learn Tools Library Leisure
search
English
Home > List of blog posts > gird布局实战案例：仿PHP中文网首页
Blogger Information
Blog 145
fans 7
comment 7
visits 164590
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
gird布局实战案例：仿PHP中文网首页
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
832 people have browsed it

仿php中文网首页

1.html代码部分:

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>php中文网</title>
  8.     <link rel="stylesheet" href="static/style/layout.css">
  9.     <link rel="stylesheet" href="static/style/header.css">
  10.     <link rel="stylesheet" href="static/style/main-top.css">
  11.     <link rel="stylesheet" href="static/style/footer.css">
  12. </head>
  13. <body>
  14.     <header>
  15.         <a href="#" class="logo">
  16.             <span>php</span>
  17.             <span>中文网</span>
  18.         </a>
  19.         <ul>
  20.             <li><a href="">首页</a></li>
  21.             <li><a href="">视频教程</a></li>
  22.             <li><a href="">入门教程</a></li>
  23.             <li><a href="">社区问答</a></li>
  24.             <li><a href="">技术文章</a></li>
  25.             <li><a href="">资源下载</a></li>
  26.             <li><a href="">编程词典</a></li>
  27.             <li><a href="">工具下载</a></li>
  28.             <li><a href="">PHP培训</a></li>
  29.         </ul>
  30.         <div class="user">
  31.             <span>登陆</span>
  32.             <span>注册</span>
  33.         </div>
  34.     </header>
  35.     <main>
  36.         <div class="main-top">
  37.             <ul>
  38.                 <li><a href=""><span>php开发</span><span>&gt;</span></a></li>
  39.                 <li><a href=""><span>前端开发</span><span>&gt;</span></a></li>
  40.                 <li><a href=""><span>服务端开发</span><span>&gt;</span></a></li>
  41.                 <li><a href=""><span>移动开发</span><span>&gt;</span></a></li>
  42.                 <li><a href=""><span>数据库</span><span>&gt;</span></a></li>
  43.                 <li><a href=""><span>服务器维护&下载</span><span>&gt;</span></a></li>
  44.                 <li><a href=""><span>在线工具箱</span><span>&gt;</span></a></li>
  45.                 <li><a href=""><span>常用类库</span><span>&gt;</span></a></li>
  46.             </ul>
  47.             <div>
  48.                 <ul>
  49.                     <li><a href="">PHP头条</a></li>
  50.                     <li><a href="">孤独九剑</a></li>
  51.                     <li><a href="">学习路线</a></li>
  52.                     <li><a href="">在线工具</a></li>
  53.                     <li><a href="">趣味课堂</a></li>
  54.                     <li><a href="">社区课堂</a></li>
  55.                     <li><a href="">课程直播</a></li>
  56.                     <li><input type="search"><span></span></li>
  57.                 </ul>
  58.                 <img src="./static/images/banner.jpg" alt="">
  59.                 <div>
  60.                     <a href=""><img src="static/images/1.jpg" alt=""></a>
  61.                     <a href=""><img src="static/images/2.png" alt=""></a>
  62.                     <a href=""><img src="static/images/3.jpg" alt=""></a>
  63.                     <a href=""><img src="static/images/4.jpg" alt=""></a>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.         <div class="articles-list">
  68.             <div>
  69.                 <h4>头条</h4>
  70.                 <ul>
  71.                     <li><a href="">文章标题列表文章名名字1</a></li>
  72.                     <li><a href="">文章标题列表文章名名字2</a></li>
  73.                     <li><a href="">文章标题列表文章名名字3</a></li>
  74.                     <li><a href="">文章标题列表文章名名字4</a></li>
  75.                     <li><a href="">文章标题列表文章名名字5</a></li>
  76.                     <li><a href="">文章标题列表文章名名字6</a></li>
  77.                     <li><a href="">文章标题列表文章名名字7</a></li>
  78.                     <li><a href="">文章标题列表文章名名字8</a></li>
  79.                     <li><a href="">文章标题列表文章名名字9</a></li>
  80.                     <li><a href="">文章标题列表文章名名字10</a></li>
  81.                     <li><a href="">文章标题列表文章名名字11</a></li>
  83.                 </ul>
  84.             </div>
  85.             <div>
  86.                 <h4>最新课程</h4>
  87.                 <div>
  88.                     <div>
  89.                         <img src="static/images/article1.png" alt="">
  90.                         <div>
  91.                             <span>中级</span>
  92.                             <p>通用后台管理系统实战开发实战开发</p>
  93.                         </div>
  94.                     </div>
  95.                     <div>
  96.                         <img src="static/images/article2.png" alt="">
  97.                         <div>
  98.                             <span>高级</span>
  99.                             <p>ThinkPHP5.1企业站点快速开发快速开发</p>
  100.                         </div>
  101.                     </div>
  102.                     <div>
  103.                         <img src="static/images/article3.png" alt="">
  104.                         <div>
  105.                             <span>中级</span>
  106.                             <p>ThinkPHP5.1企业站点快速开发</p>
  107.                         </div>
  108.                     </div>
  109.                     <div>
  110.                         <img src="static/images/article1.png" alt="">
  111.                         <div>
  112.                             <span>中级</span>
  113.                             <p>ThinkPHP5.1企业站点快速开发</p>
  114.                         </div>
  115.                     </div>
  116.                     <div>
  117.                         <img src="static/images/article2.png" alt="">
  118.                         <div>
  119.                             <span>高级</span>
  120.                             <p>ThinkPHP5.1企业站点快速开发</p>
  121.                         </div>
  122.                     </div>
  123.                     <div>
  124.                         <img src="static/images/article3.png" alt="">
  125.                         <div>
  126.                             <span>中级</span>
  127.                             <p>ThinkPHP5.1企业站点快速开发</p>
  128.                         </div>
  129.                     </div>
  130.                 </div>
  132.             </div>
  133.             <div>
  134.                 <div>
  135.                     <h4>常用手册</h4>
  136.                     <h4>更多</h4>
  137.                 </div>
  138.                 <div>
  139.                         <div>
  140.                             <img src="static/images/article-logo.jpg" alt="">
  141.                             <p>JavaScript参考手册JavaScript参考手册</p>
  142.                         </div>
  143.                         <div>
  144.                             <img src="static/images/article-logo.jpg" alt="">
  145.                             <p>JavaScript参考手册JavaScript参考手册</p>
  146.                         </div>
  147.                         <div>
  148.                             <img src="static/images/article-logo.jpg" alt="">
  149.                             <p>JavaScript参考手册JavaScript参考手册</p>
  150.                         </div>
  151.                         <div>
  152.                             <img src="static/images/article-logo.jpg" alt="">
  153.                             <p>JavaScript参考手册JavaScript参考手册</p>
  154.                         </div>
  155.                         <div>
  156.                             <img src="static/images/article-logo.jpg" alt="">
  157.                             <p>JavaScript参考手册JavaScript参考手册</p>
  158.                         </div>
  159.                         <div>
  160.                             <img src="static/images/article-logo.jpg" alt="">
  161.                             <p>JavaScript参考手册JavaScript参考手册</p>
  162.                         </div>
  164.                     </div>
  166.             </div>
  167.         </div>
  168.         <div class="container">
  169.             <span><i>&lt;/&gt;</i><h3>php入门精品课程</h3><i>&lt;/&gt;</i></span>
  170.             <img src="static/images/span2.jpg" alt="">
  171.             <div class="item">
  172.                 <img src="static/images/article-detail.jpg" alt="">
  173.                 <div>
  174.                     <span><span>初级</span>2018前端入门_HTML5</span>
  175.                     <span>18w次播放</span>
  176.                 </div>
  177.             </div>
  178.             <div class="item">
  179.                 <img src="static/images/article-detail.jpg" alt="">
  180.                 <div>
  181.                     <span><span>初级</span>2018前端入门_HTML5</span>
  182.                     <span>18w次播放</span>
  183.                 </div>
  184.             </div>
  185.             <div class="item">
  186.                 <img src="static/images/article-detail.jpg" alt="">
  187.                 <div>
  188.                     <span><span>初级</span>2018前端入门_HTML5</span>
  189.                     <span>18w次播放</span>
  190.                 </div>
  191.             </div>
  192.             <div class="item">
  193.                 <img src="static/images/article-detail.jpg" alt="">
  194.                 <div>
  195.                     <span><span>初级</span>2018前端入门_HTML5</span>
  196.                     <span>18w次播放</span>
  197.                 </div>
  198.             </div>
  199.             <div class="item">
  200.                 <img src="static/images/article-detail.jpg" alt="">
  201.                 <div>
  202.                     <span><span>初级</span>2018前端入门_HTML5</span>
  203.                     <span>18w次播放</span>
  204.                 </div>
  205.             </div>
  206.             <div class="item">
  207.                 <img src="static/images/article-detail.jpg" alt="">
  208.                 <div>
  209.                     <span><span>初级</span>2018前端入门_HTML5</span>
  210.                     <span>18w次播放</span>
  211.                 </div>
  212.             </div>
  213.             <div class="item">
  214.                 <img src="static/images/article-detail.jpg" alt="">
  215.                 <div>
  216.                     <span><span>初级</span>2018前端入门_HTML5</span>
  217.                     <span>18w次播放</span>
  218.                 </div>
  219.             </div>
  220.             <div class="item">
  221.                 <img src="static/images/article-detail.jpg" alt="">
  222.                 <div>
  223.                     <span><span>初级</span>2018前端入门_HTML5</span>
  224.                     <span>18w次播放</span>
  225.                 </div>
  226.             </div>
  227.             <div class="item">
  228.                 <img src="static/images/article-detail.jpg" alt="">
  229.                 <div>
  230.                     <span><span>初级</span>2018前端入门_HTML5</span>
  231.                     <span>18w次播放</span>
  232.                 </div>
  233.             </div>
  234.             <div class="item">
  235.                 <img src="static/images/article-detail.jpg" alt="">
  236.                 <div>
  237.                     <span><span>初级</span>2018前端入门_HTML5</span>
  238.                     <span>18w次播放</span>
  239.                 </div>
  240.             </div>
  241.             <div class="item">
  242.                 <img src="static/images/article-detail.jpg" alt="">
  243.                 <div>
  244.                     <span><span>初级</span>2018前端入门_HTML5</span>
  245.                     <span>18w次播放</span>
  246.                 </div>
  247.             </div>
  248.             <div class="item">
  249.                 <img src="static/images/article-detail.jpg" alt="">
  250.                 <div>
  251.                     <span><span>初级</span>2018前端入门_HTML5</span>
  252.                     <span>18w次播放</span>
  253.                 </div>
  254.             </div>
  255.             <div class="item">
  256.                 <img src="static/images/article-detail.jpg" alt="">
  257.                 <div>
  258.                     <span><span>初级</span>2018前端入门_HTML5</span>
  259.                     <span>18w次播放</span>
  260.                 </div>
  261.             </div>
  264.         </div>
  265.     </main>
  266.     <footer>
  267.         <div class="content">
  268.             <ul>
  269.                 <li><a href="">网站链接1</a></li>
  270.                 <li><a href="">网站链接2</a></li>
  271.                 <li><a href="">网站链接3</a></li>
  272.                 <li><a href="">网站链接4</a></li>
  273.                 <li><a href="">网站链接5</a></li>
  274.                 <li><a href="">网站链接6</a></li>
  275.                 <li><a href="">网站链接7</a></li>
  276.                 <li><a href="">网站链接8</a></li>
  277.                 <li><a href="">网站链接9</a></li>
  278.             </ul>
  279.             <p>php中文网：公益在线php培训，帮助PHP学习者快速成长！</p>
  280.             <p>Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1 </p>
  281.             <ul>
  282.                 <li><a href="">关于我们1</a></li>
  283.                 <li><a href="">关于我们1</a></li>
  284.                 <li><a href="">关于我们1</a></li>
  285.                 <li><a href="">关于我们1</a></li>
  286.             </ul>
  287.             <div class="logo-QR">
  288.                 <img src="static/images/种业圈.jpg" alt="">
  289.                 <img src="static/images/种业圈.jpg" alt="">
  291.             </div>
  292.         </div>
  293.     </footer>
  294. </body>
  295. </html>

2.css代码部分:

  1. /*重置样式*/
  2. *{
  3.     padding: 0;
  4.     margin: 0;
  5.     box-sizing: border-box;    
  6. }
  8. a{
  9.     text-decoration: none;
  10. }
  12. ul{
  13.     list-style: none;
  14. }
  16. :root{
  17.     font-size: 16px;
  18. }
  19. /*整体页面布局样式*/
  20. @import url("reset.css");
  21. body{
  22.     background-color: #f3f5f7;
  23. }
  25. body > main{
  26.     /* outline: 1px solid red; */
  27.     width: 80vw;
  28.     min-height: 50rem;
  29.     margin: 0 auto;
  30. }
  31. /*导航条样式*/
  32. @import url("reset.css");
  34. header{
  35.     background-color: #000;
  36.     /* width: 100vw; */
  37.     min-width: 1400px;
  38.     height: 3.75rem;
  39.     display: grid;
  40.     grid-template-columns: 9rem 1fr 9rem;
  41.     place-content:center space-between;
  42.     grid-gap: 0.8rem;
  43.     color:#969896;
  44.     font-size: 1rem;
  45. }
  47. header > .logo{
  48.     display: flex;
  49.     justify-content: center;
  50.     align-items: center;
  51.     color:white;
  52.     padding-left: 0.8rem;
  53.     font-size: 1rem;
  54.     font-weight: 400;
  55. }
  57. header > .logo > span:first-of-type{
  58.     background-color: #fb4847;
  59.     color:white;
  60.     width: 3rem;
  61.     height: 2rem;
  62.     text-align: center;
  63.     line-height: 2rem;
  64.     font-size:1.2rem;
  65.     font-weight: bolder;
  66.     /* 通过设置背景圆角来绘制logo底色 */
  67.     border-bottom-left-radius:20rem 12rem;
  68.     border-bottom-right-radius:20rem 12rem ;
  69.     border-top-left-radius:20rem 12rem ;
  70.     border-top-right-radius:20rem 12rem ;
  71.     margin-right: 0.2rem;
  73. }
  75. header > ul {
  76.     display: flex;
  77.     justify-content: flex-start;
  78.     align-items: center;
  79.     /* height: 3.75rem; */
  80. }
  82. header > ul  > li > a:hover{
  83.     /* background-color: rgba(255,255,255,.3); */
  84.     border-bottom:0.3rem solid green;
  85.     color:whitesmoke;
  86. }
  87. header > ul > li > a{
  88.     display: inline-block;
  89.     height: 3.75rem;
  90.     width: 6rem;
  91.     line-height: 3.75rem;
  92.     text-align: center;
  93.     color:#969896;
  94. }
  96. header > .user{
  97.     font-size: 1rem;
  98.     display: flex;
  99.     justify-content: space-evenly;
  100.     align-items: center;
  101.     font-weight: bolder;
  102. }
  103. header > .user > span {
  104.     height: 3.75rem;
  105.     width: 20rem;
  106.     line-height: 3.75rem;
  107.     text-align: center;
  108. }
  110. header > .user > span:hover{
  111.     background-color: rgba(255,255,255,.3);
  112.     /* border-bottom: 2px solid green; */
  113.     color:whitesmoke;
  114. }
  115. /*主题内容样式*/
  116. @import url("reset.css");
  118. main > .main-top {
  119.     margin-top:1.2rem ;
  120.     min-width: 78rem;
  121.     height: 33rem;
  122.     box-shadow: 0 0 10px lightslategrey;
  123.     border-radius: 0.5rem;
  124.     display: grid;
  125.     grid-template-columns: 12rem minmax(66rem,1fr);
  126. }
  128. main > .main-top > ul{
  129.     background-color: #2b333b;
  130.     border-top-left-radius:0.5rem ;
  131.     border-bottom-left-radius:0.5rem ;
  132.     display: flex;
  133.     flex-flow: column nowrap;
  134.     justify-content: space-evenly;
  135. }
  136. main > .main-top > ul > li > a{
  137.     display: flex;
  138.     width: 12rem;
  139.     height: 3.5rem;
  140.     line-height:3.5rem;
  141.     padding: 0 1rem;
  142.     justify-content: space-between;
  143.     font-size: 1.1rem;
  144.     color:lightslategray;
  146. }
  147. main > .main-top > ul > li > a:hover{
  148.     background-color: rgba(255,255,255,.3);
  149.     color: white;
  151. }
  152. main > .main-top > div >ul{
  153.     display: flex;
  154.     /* flex-flow: row nowrap; */
  155.     /* background-color: #fff; */
  156.     /* width:60rem ; */
  157. }
  159. main >.main-top > div > ul{
  160.     display: flex;
  161.     justify-content: space-around;
  162.     height: 3.5rem;
  163.     align-items: center;
  164. }
  165. main >.main-top > div > img{
  166.     width:66rem;
  167. }
  168. main >.main-top > div > div {
  169.     padding-top:0.5rem ;
  170.     display: flex;
  171.     justify-content: space-around;
  172. }
  173. main >.main-top > div > div > a >img{
  174.     width: 16rem;
  175.     border-radius: 1rem;
  176. }
  178. /* 文章列表区 */
  179. main > .articles-list {
  180.     margin-top: 1.5rem;
  181.     min-width: 78rem;
  182.     height: 24rem;
  183.     display: grid;
  184.     grid-template-columns: 19rem 40rem 17rem; 
  185.     /* box-shadow: 0 0 10px lightslategrey;
  186.     border-radius: 0.5rem; */
  187.     grid-gap: 1rem;
  188.     margin-bottom: 1.5rem;
  189. }
  190. main > .articles-list >div:first-of-type{
  191.     box-shadow: 0 0 10px lightslategrey;
  192.     border-radius: 0.5rem;
  193. }
  194. main > .articles-list >div:first-of-type > h4{
  195.     height: 2.5rem;
  196.     /* background-color: red; */
  197.     line-height: 2.5rem;
  198.     margin: 0 1rem;
  199.     padding-left:1rem ;
  200.     border-bottom: 1px solid #969896;
  201. }
  203. main > .articles-list >div:first-of-type > ul{
  204.     height: 21.5rem;
  205.     display: flex;
  206.     flex-flow: column nowrap;
  207.     justify-content: space-evenly;
  208.     padding-left:1rem ;
  209. }
  210. main > .articles-list >div:first-of-type > ul a {
  211.     color:#778899;
  212. }
  213. main > .articles-list > div:nth-of-type(2){
  214.     box-shadow: 0 0 10px lightslategrey;
  215.     border-radius: 0.5rem;
  216. }
  217. main > .articles-list > div:nth-of-type(2) > div{
  218.     display: grid;
  219.     height: 21.5rem;
  220.     grid-template-columns: repeat(3,13rem);
  221.     grid-template-rows:repeat(2,10rem);
  222.     place-content:center center;
  223.     place-items: center center;
  224. }
  225. main > .articles-list > div:nth-of-type(2) > div > div{
  226.     width: 12rem;
  227.     /* background-color: red; */
  228.     space-self:center center;
  229.     padding-top: 1rem;
  230.     /* position: relative; */
  231. }
  232. main > .articles-list > div:nth-of-type(2) > div > div > div > * {
  233.     display: inline;
  234.     /* background-color: lightblue; */
  235.     font-size: 0.8rem;
  236. }
  237. main > .articles-list > div:nth-of-type(2) > div > div > div {
  238.     height: 4rem;
  239.     padding: 0.2rem;
  240.     background-color: #fff;
  241.     border-radius: 0.5rem;
  242.     position: relative;
  243.     top:-1.5rem;
  244.     /* line-height: 4rem; */
  245. }
  246. main > .articles-list > div:nth-of-type(2) > div > div > div> span{
  247.     background-color: #708090;
  248.     /* width: 6rem; */
  249.     padding: 0 0.2rem;
  250.     border-radius: 0.5rem;
  251. }
  253. main > .articles-list >div:nth-of-type(2) > h4{
  254.     height: 2.5rem;
  255.     /* background-color: red; */
  256.     line-height: 2.5rem;
  257.     margin: 0 1rem;
  258.     padding-left:1rem ;
  259.     border-bottom: 1px solid #969896;
  260. }
  261. main > .articles-list > div:nth-of-type(2) img{
  262.     width: 12rem;
  263.     height: 6rem;
  264.     display: block;
  265.     border-radius: 0.5rem;
  266. }
  267. main > .articles-list > div:last-of-type{
  268.     box-shadow: 0 0 10px lightslategrey;
  269.     border-radius: 0.5rem;
  270. }
  271. main > .articles-list > div:last-of-type > div:first-child {
  272.     line-height: 2.5rem;
  273.     margin: 0 1rem;
  274.     padding:0 1rem ;
  275.     border-bottom: 1px solid #969896;
  276. }
  277. main > .articles-list >div:last-of-type > div:last-of-type{
  278.     height: 21.5rem;
  279.     display: flex;
  280.     flex-flow: column nowrap;
  281.     justify-content: space-evenly;
  282.     padding-left:1rem ;
  283. }
  284. main > .articles-list > div:last-of-type img {
  285.     width: 3rem;
  286. }
  287. main > .articles-list > div:last-of-type >div:first-of-type{
  288.     display: flex;
  289.     justify-content: space-between;
  290. }
  291. main > .articles-list > div:last-of-type >div:last-of-type > div{
  292.     display: flex;
  293. }
  294. main > .articles-list > div:last-of-type >div:last-of-type > div > p{
  295.     margin-left: 1rem;
  296. }
  298. /* 精品课程css 布局 */
  301. main > .container {
  302.     min-width:78rem;
  303.     display: grid;
  304.     grid-template-columns: repeat(5,14rem);
  305.     grid-template-rows: 4rem repeat(3,10rem);
  306.     grid-gap: 0.5rem;
  307.     box-shadow: 0 0 10px lightslategrey;
  308.     border-radius: 0.5rem;
  309.     margin-bottom: 2rem;
  310.     place-content: space-evenly  space-evenly;
  311.     place-items: center center;
  312.     padding-bottom: 1rem;
  313. } 
  314. main > .container > span {
  315.     grid-area: span 1 / span 5;
  316.     width: 14rem;
  317.     display: flex;
  318.     justify-content: center;
  319.     align-items: center;
  320. }
  322. main > .container > img{
  323.     grid-area: 2 / 1 / 4 / 2;
  324.     width: 13rem;
  325.     height: 20rem;
  326.     border-radius: 0.5rem;
  327.     box-shadow: 0 0 10px lightslategrey;
  328. }
  329. main > .container > .item {
  330.     position: relative;
  331.     box-shadow: 0 0 10px lightslategrey;
  332.     border-radius: 0.5rem;
  333. }
  334. main > .container > .item > img{
  335.     width: 13rem;
  336.     height: 9rem;
  337.     border-radius: 0.5rem;
  339. }
  341. main > .container > .item > div {
  342.     width: 13rem;
  343.     background-color: #fff;
  344.     display: flex;
  345.     flex-flow: column nowrap;
  347.     justify-content: space-between;
  348.     padding: 0.4rem 0.2rem 0.2rem;
  349.     font-size: 0.9rem;
  350.     border-radius: 0.5rem;
  351.     /* z-index: 10; */
  352.     position: absolute;
  353.     bottom:0;
  354.     height: 3rem;
  355. }
  356. main > .container > .item > div:hover{
  357.     height: 5rem;
  358. }
  359. main > .container > .item > div > span > span{
  360.     background-color: #969896;
  361.     color: white;
  362.     font-style: none;
  363.     margin-left: 0.4rem;
  364.     margin-right: 0.4rem;
  365. }
  367. main > .container > .item > div > span:last-child{
  368.     font-size: 0.6rem;
  369.     color:#D3D3D3;
  370. }

3.代码运行结果图:

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post