search

博客列表 >gird布局实战案例：仿PHP中文网首页

gird布局实战案例：仿PHP中文网首页

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年12月30日 12:42:34831浏览

仿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.代码运行结果图:

上一条：弹性盒子布局——flex下一条：jq返回顶部多种实现方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多