search

博客列表 >grid实战 快速实现php.cn首页主要组件

grid实战 快速实现php.cn首页主要组件

一米互联
一米互联原创
2021年01月03日 11:39:40649浏览

快速实现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 (媒体特性) { }

上一条：实例演示js常用数据类型，变量与常量的声明与赋值下一条：1216 选择器优先权、字体图标、盒模型属性缩写
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多