简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > grid实战 快速实现php.cn首页主要组件
Blogger Information
Blog 13
fans 0
comment 0
visits 8277
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
grid实战 快速实现php.cn首页主要组件
一米互联
Original
645 people have browsed it

快速实现php.cn首页主要组件的布局

css代码：
  1. *{
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         li{
  7.             list-style: none;
  8.         }
  9.         a{
  10.             color: #444444;
  11.             text-decoration: none;
  12.         }
  13.         header{
  14.             height: 10vh;
  15.             background: rgb(50, 51, 51);
  16.             margin-bottom: 30px;
  17.             color:white;
  18.         }
  19.         footer{
  20.             height: 125px;
  21.             color:white;
  22.             background: rgb(50, 51, 51) ;
  23.             margin-top: 34px;
  24.         }
  25.         .main-top{
  26.             min-height: 410px;
  27.             width: 1200px;
  28.             margin-bottom: 30px;
  29.             display: grid;
  30.             grid-template-columns: 216px 1fr;
  31.             grid-template-rows: 60px 1fr 120px;
  32.             margin: auto;
  33.         }
  34.         /* 左侧导航区 */
  35.         .main-top>nav.menus{
  36.             grid-area: span 3;  /*跨越三行*/
  37.             background: lightskyblue;
  38.             border-radius: 10px 0 0 10px;
  39.             text-align: center;
  41.         }
  42.         .main-top>.menus a{
  43.             color: #616161;
  44.             font-size: 12px;
  45.         }
  46.         .main-top .menus a span{
  47.             float: right;
  48.             padding-right: 15px;
  49.         }
  50.         .main-top .menus li{
  51.             height: 60px;
  52.             text-align: left;
  53.             line-height: 60px;
  54.             padding-left: 15px;
  55.             border: 1px dotted #d8d8d8;
  56.         }
  57.         /* 顶部导航区 */
  58.         .main-top>ul.navs{
  59.             background: lightcyan;
  60.             display: grid;
  61.             grid-template-columns: repeat(8,83px) 1fr;
  62.             place-items: center;
  63.             border-radius: 0 10px 0 0;
  64.             font-size: 12px;
  65.         }
  66.         .main-top>ul.navs li{
  67.             position: relative;
  68.         }
  69.         .main-top>ul.navs li img{
  70.             position: absolute;
  71.             top: -10px;
  72.             right: -21px;
  73.         }
  75.         .main-top>ul.navs>li:last-of-type{
  76.             place-self:center start;
  77.             padding-left: 30px;
  78.         }
  79.         .main-top .navs input{
  80.             width:230px;
  81.             height: 40px;
  82.             background: #f1f1f1;
  83.             border: none;
  84.             padding-left: 20px;
  85.         }
  86.         .main-top>.slider{
  87.             height: 300px;
  88.             background: slategrey;
  89.         }
  90.         /* 课程推荐图 */
  91.         .main-top>ul.course{
  92.             background: rgb(253, 203, 111);
  93.             display: grid;
  94.             grid-template-columns: repeat(4,1fr);
  95.             gap: 10px;
  96.             padding: 10px;
  97.             border-radius: 0 0 10px 0;
  98.             place-items: center center;
  99.         }
  100.         .main-top>ul.course>li{
  101.             background: magenta;
  102.             cursor: pointer;
  103.             height: 90px;
  104.         }
  106.         /* PHP入门精品课 */
  107.         .main-course{
  108.             width: 1200px;
  109.             height: 646px;
  110.             padding: 15px;
  111.             background: lightskyblue;
  112.             margin: 30px auto;
  113.             display: grid;
  114.             grid-template-rows: 50px 1fr;
  115.             gap: 10px;
  116.             border-radius: 10px;
  117.         }
  118.         .main-course h3{
  119.             background:white;
  120.             text-align: center;
  121.             margin-bottom: 30px;
  122.             height: 50px;
  123.             line-height: 50px;
  124.         }
  125.         .main-course .course-list{
  126.             display: grid;
  127.             gap: 20px;
  128.             grid-template-columns:repeat(5,1fr);
  129.             grid-template-rows: repeat(3,1fr);
  130.         }
  131.         .main-course .course-list>*{
  132.             background:white;
  133.             border-radius: 10px;
  134.         }
  135.         .main-course .course-list>li:first-of-type{
  136.             grid-area: span 2;
  137.         }
  138.         .main-course .course-list>li img{
  139.             width:100%;
  140.         }
  141.         .main-course .course-list li span{
  142.             display: inline-block;
  143.             padding: 5px  15px 0;
  144.             font-size: 13px;
  145.         }
HTML代码：
  1. <header>页眉</header>
  2.     <div class="main-top">
  3.         <!-- 侧边菜单 -->
  4.         <nav class="menus">
  5.             <ul>
  6.                 <li><a href="">PHP开发<span>&gt;</span></a></li>
  7.                 <li><a href="">前端开发<span>&gt;</span></a></li>
  8.                 <li><a href="">服务端开发<span>&gt;</span></a></li>
  9.                 <li><a href="">移动开发<span>&gt;</span></a></li>
  10.                 <li><a href="">数据库<span>&gt;</span></a></li>
  11.                 <li><a href="">服务器运维&下载<span>&gt;</span></a></li>
  12.                 <li><a href="">在线工具箱<span>&gt;</span></a></li>
  13.                 <li><a href="">常用类库<span>&gt;</span></a></li>
  14.             </ul>    
  15.         </nav>
  16.         <!-- 顶部菜单 -->
  17.         <ul class="navs">
  18.             <li><a href="">PHP头条</a><img src="img/1.png"/></li>
  19.             <li><a href="">独孤九剑</a></li>
  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><input type="text" placeholder="输入关键字搜索..."></li>
  27.         </ul>
  28.         <div class="slider"><img src="img/2.jpg" width="100%" alt="轮播图"/></div>
  29.         <!-- 底部的课程推荐 -->
  30.         <ul class="course">
  31.             <li><a href=""><img src="img/3.jpg" width="100%" alt=""></a></li>
  32.             <li><a href=""><img src="img/4.png" width="100%" alt=""></a></li>
  33.             <li><a href=""><img src="img/5.jpg" width="100%" alt=""></a></li>
  34.             <li><a href=""><img src="img/6.jpg" width="100%" alt=""></a></li>
  35.         </ul>  
  36.         <!-- 课程列表区 -->
  37.         <div class="main-course">
  38.             <h3>&lt;\&gt;PHP入门精品课程&lt;\&gt;</h3>
  39.             <ul class="course-list">
  40.                 <li><a href=""><img src="img/7.jpg" alt=""></a></li>
  41.                 <li>
  42.                     <a href="">
  43.                         <img src="img/8.png" height="124px" alt="">
  44.                         <span>初级：编程学习方法分享直播公益课</span>
  45.                     </a>
  46.                 </li>
  47.                 <li>
  48.                     <a href=""><img src="img/9.jpg" height="124px" alt="">
  49.                         <span>初级：编程学习方法分享直播公益课</span>
  50.                     </a>
  51.                 </li>
  52.                 <li>
  53.                     <a href=""><img src="img/10.jpg" height="124px" alt="">
  54.                         <span>初级：编程学习方法分享直播公益课</span>
  55.                     </a>
  56.                 </li>
  57.                 <li><a href=""><img src="img/11.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  58.                 <li><a href=""><img src="img/12.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  59.                 <li><a href=""><img src="img/13.jpeg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  60.                 <li><a href=""><img src="img/14.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  61.                 <li><a href=""><img src="img/15.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  62.                 <li><a href=""><img src="img/16.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  63.                 <li><a href=""><img src="img/17.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  64.                 <li><a href=""><img src="img/18.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  65.                 <li><a href=""><img src="img/19.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  66.                 <li><a href=""><img src="img/20.jpg" height="124px" alt=""><span>初级：编程学习方法分享直播公益课</span></a></li>
  67.             </ul>
  68.         </div>
  69.     </div>
  70.     <footer>页脚</footer>

grid的媒体查询

css代码：
  1. * {
  2.             margin: 0;
  3.             padding: 0;
  4.             box-sizing: border-box;
  5.         }
  6.         body {
  7.             background-color: rgb(250, 232, 66);
  8.         }
  9.         a {
  10.             text-decoration: none;
  11.             color:black;
  12.             padding-top: 10px;
  13.         }
  14.         h1 {
  15.             color: rgb(77, 29, 250);
  16.             text-align: center;
  17.             font-weight: bolder;
  18.             margin-top: 10px;
  19.         }
  20.         img {
  21.             width: 100%;
  22.         }
  23.         .cat-pic{
  24.             min-width: 100vw;
  25.             min-height: 100vh;
  26.             padding: 30px;
  27.             display: grid;
  28.             gap: 1.5em;
  30.             /* 自动填充,可以实现媒体查询的效果 */
  31.             grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
  32.             grid-template-rows: repeat(auto-fit, minmax(13em, 70%));
  33.         }
  34.         .cat-pic .cat {
  35.             background-color: #eee;
  36.             padding: 1em;
  37.             border-radius: 15px;  /*圆角*/
  38.             display: grid;
  39.             place-items: center; /*项目对齐方式*/
  40.         }
  41.         .cat-pic .cat:hover {
  42.             background:cyan;
  43.             cursor: pointer;
  44.             transition: 0.5s; /*延时*/
  45.         }
HTML代码：
  1. <h1>萌宠相册</h1>
  2.     <div class="cat-pic">
  3.         <div class="cat">
  4.             <img src="img/cat.jpg" alt="">
  5.             <a href="">萌宠1</a>
  6.         </div>
  7.         <div class="cat">
  8.             <img src="img/cat.jpg" alt="">
  9.             <a href="">萌宠2</a>
  10.         </div>
  11.         <div class="cat">
  12.             <img src="img/cat.jpg" alt="">
  13.             <a href="">萌宠3</a>
  14.         </div>
  15.         <div class="cat">
  16.             <img src="img/cat.jpg" alt="">
  17.             <a href="">萌宠4</a>
  18.         </div>
  19.         <div class="cat">
  20.             <img src="img/cat.jpg" alt="">
  21.             <a href="">萌宠5</a>
  22.         </div>
  23.         <div class="cat">
  24.             <img src="img/cat.jpg" alt="">
  25.             <a href="">萌宠6</a>
  26.         </div>
  27.         <div class="cat">
  28.             <img src="img/cat.jpg" alt="">
  29.             <a href="">萌宠7</a>
  30.         </div>
  31.         <div class="cat">
  32.             <img src="img/cat.jpg" alt="">
  33.             <a href="">萌宠8</a>
  34.         </div>
  35.         <div class="cat">
  36.             <img src="img/cat.jpg" alt="">
  37.             <a href="">萌宠9</a>
  38.         </div>
  39.     </div>


grid的媒体查询与专业的媒体查询有什么区别:
1.grid媒体查询主要通过auto-fit属性自动填充来实现类似媒体查询功能
2.专业的媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成。
语法：@media 媒体类型 and (媒体特性) { }

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！