<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>php中文网</title></head><body><style type="text/css"></style><body> <header> <div class="logo"> <a href=""><img src="https://www.php.cn/static/images/logo.png" alt=""></a> </div> <ul class="navs"> <li> <a href="">首页</a> </li> <li> <a href="">视频教程</a> </li> <li> <a href="">入门教程</a> </li> <li> <a href="">社区问答</a> </li> <li> <a href="">技术文章</a></li> <li> <a href="">资源下载</a></li> <li> <a href="">编程词典</a></li> <li> <a href="">工具下载</a></li> </ul> <div class="reg"> <a href="">注册</a> <a href="">登录</a> </div> </header> <div class="main-top"> <ul class="menus"> <li> <a href="">php开发</a> </li> <li> <a href="">前端开发</a> </li> <li> <a href="">服务端开发</a> </li> <li> <a href="">移动开发</a> </li> <li> <a href="">数据库</a> </li> <li> <a href="">服务器运维&下载</a> </li> <li> <a href="">在线工具箱</a> </li> <li> <a href="">常用类库</a> </li> </ul> <ul class="tuijian"> <li> <a href="">php头条</a> </li> <li> <a href="">独孤九剑</a> </li> <li> <a href="">学习路线</a> </li> <li> <a href="">在线工具</a> </li> <li> <a href="">趣味课堂</a> </li> <li> <a href="">社区问答</a> </li> <li> <a href="">课程直播</a> </li> <li> <input type="text" placeholder="输入关键词搜索"> </li> </ul> <div class="slider"><img src="https://img.php.cn/upload/article/000/000/001/5fabba9a8557c153.jpg" alt=""></div> <ul class="course"> <li> <a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a> </li> <li> <a href=""><img src="https://www.php.cn/static/images/index_php_item2_.png?1" alt=""></a> </li> <li> <a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a> </li> <li> <a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a> </li> </ul> </div> <!-- 课程列表 --> <div class="main-coures"> <h3><\>PHP入门精品课程<\></h3> <ul class="course-list"> <li> <a href=""><img src="https://www.php.cn/static/images/index_learn_first.jpg" alt=""></a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> </ul> </div> <div class="main-coures"> <h3><\>PHP进阶课程<\></h3> <ul class="course-list"> <li> <a href=""><img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt=""></a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> <li> <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt=""> <div class="desc"> <h4><i>初级</i>编程学习方法分享直播公益课</h4> </div> <div class="desc-bottom"> <span>1w次播放</span> </div> </a> </li> </ul> </div> <footer></footer></body><style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f3f5f7; } li { list-style: none; } a { color: #444; text-decoration: none; } header { height: 60px; background-color: #000; margin-bottom: 30px; } footer { height: 8em; background-color: darkgray; } .main-top { height: 510px; width: 1200px; background-color: #fff; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 60px 1fr 120px; margin: auto; border-radius: .5em; } .main-top ul.menus { /*设置跨3行*/ grid-area: span 3; display: grid; grid-template-rows: repeat(8, 1fr); background-color: #2b333b; border-top-left-radius: .5em; border-bottom-left-radius: .5em; place-content: center; padding: 2em; } .main-top ul.menus li a { color: rgba(255, 255, 255, .6); } .main-top .tuijian { display: grid; grid-template-columns: repeat(7, 100px) 1fr; place-items: center; } .main-top .tuijian li:last-of-type { place-self: center start; margin-left: 30px; } .main-top .tuijian li:last-of-type input { outline: none; background-color: #f1f0f0; height: 2.5em; border-radius: .3em; border: none; padding: 1em; } .main-top .slider { height: 330px; } .main-top .slider img { width: 100%; } .course li img { width: 100%; border-radius: .5em; } .course { display: grid; padding: 10px; grid-template-columns: repeat(4, 1fr); gap: 10px; place-content: center; margin-top: 10px; } header { overflow: hidden; } header .logo { height: 60px; float: left; } header .navs { float: left; } header .navs li { float: left; height: 60px; line-height: 60px; padding: 0 20px; margin: 0 10px; } header a { color: rgba(255, 255, 255, .7) } header .reg { float: right; height: 60px; line-height: 60px; } /* 课程列表 */ .main-coures { width: 1200px; height: 646px; padding: 15px; background-color: #FFF; border-radius: 10px; margin: 30px auto; display: grid; grid-template-rows: 50px 1fr; } .main-coures h3 { text-align: center; color: #444; } .main-coures .course-list { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 10px; } .main-coures .course-list img { width: 100%; } .main-coures .course-list li:first-of-type { grid-area: span 2; } .main-coures .course-list li { position: relative; border-radius: 10px; } .main-coures .course-list li img { border-radius: 10px; } .desc { background-color: #fff; height: 38px; width: 100%; position: absolute; bottom: 45px; left: 0; right: 0; border-top-right-radius: 10px; border-top-left-radius: 10px; transition: .5s; } .main-coures .course-list a:hover .desc { height: 100px; right: 0; left: 0; } .desc-bottom { position: absolute; left: 0; right: 0; background-color: #fff; padding: 10px 0; width: 100%; height: 42px; background-color: #fff; color: #93999f; font-size: 12px; line-height: 36px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}.desc i { padding: 2px; font-style: normal; font-size: 12px; color: #fff; line-height: 12px; border-radius: 5px; background-color:#93999f; margin-left: 5px; } </style></body></html>
