<!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>
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!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
