<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="demo1.css">
<style>
html,body,ul,li,p,h3,h4{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: rgba(0, 0, 0, 0.9);
}
a:hover{
color: rgba(0, 0, 0, 0.6);
}
body{
background-color: #F2F4F6;
}
input{
outline: none;
}
img{
display: block;
}
/*头部导航*/
header{
height: 60px;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.9);
color: white;
display: grid;
grid-template-columns: 200px 900px 1fr;
align-items: center;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
}
header>.logo{
margin-left: 10px;
}
header>.logo img{
height: 56px;
width: 130px;
}
header>nav>ul{
display: grid;
grid-template-columns: repeat(8, 1fr);
}
header>nav>ul a{
color: rgba(255, 255, 255, .8);
font-size: smaller;
}
header>.header-right{
justify-self: flex-end;
display: flex;
align-items: center;
}
header>.header-right>a{
margin-right: 20px;
color: white;
}
header>.header-right img{
width: 40px;
border-radius: 50%;
}
main{
width: 1200px;
margin: 30px auto;
}
/*顶部banner模块区*/
main>article:first-of-type{
display: grid;
height: 500px;
grid-template-columns: 200px 1fr;
box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.4);
border-radius: 10px;
}
main>article:first-of-type>aside{
background-color: #2B333B;
border-radius: 10px 0 0 10px;
}
main>article:first-of-type>aside>ul{
margin-top: 12%;
height: 90%;
display: grid;
grid-template-rows: repeat(8, 1fr);
}
main>article:first-of-type>aside>ul>li{
display: grid;
grid-template-columns: 1fr 10px;
padding: 0 10%;
}
main>article:first-of-type>aside>ul>li>a,main>article:first-of-type>aside>ul>li>i{
color: rgba(255, 255, 255, .7);
align-self: center;
}
main>article:first-of-type>aside>ul>li:hover{
background-color: rgba(255, 255, 255, .2);
}
main>article:first-of-type>section{
background-color: white;
border-radius: 10px;
display: grid;
grid-template-rows: 50px 1fr 108px;
}
main>article:first-of-type>section>ul{
display: grid;
grid-template-columns: repeat(9,1fr);
place-items: center;
}
main>article:first-of-type>section>ul>li>a{
font-size: 14px;
color: #333;
}
main>article:first-of-type>section>ul>li span{
font-size: 12px;
color: white;
padding: 1px 6px;
margin-left: 5px;
background-color: salmon;
}
main>article:first-of-type>section>ul>li:nth-of-type(3)>span{
background-color: lightgreen;
}
main>article:first-of-type>section>ul>li:nth-of-type(5)>span{
background-color: lightseagreen;
}
main>article:first-of-type>section>ul>li:last-of-type{
grid-column: 8/span 2;
}
main>article:first-of-type>section>ul>li:last-of-type input{
height: 30px;
width: 100%;
background-color: rgba(153, 153, 153, .2);
border: none;
}
main>article:first-of-type>section>aside{
display: grid;
grid-template-columns: repeat(4, 1fr);
place-items: center;
}
main>article:first-of-type>section>aside img{
border-radius: 10px;
}
/*ad1*/
main>aside{
margin:25px auto
}
/*头条区间*/
main>article:nth-of-type(2){
height: 500px;
display: grid;
grid-template-columns: 290px 635px 1fr;
gap: 10px;
}
main>article:nth-of-type(2)>aside:first-of-type,
main>article:nth-of-type(2)>section,
main>article:nth-of-type(2)>aside:last-of-type{
background-color: white;
box-sizing: border-box;
padding: 15px;
border-radius: 10px;
font-size: 14px;
height: 500px;
}
main>article:nth-of-type(2) h4{
border-bottom: 1px solid #dedede;
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 16px;
display: grid;
grid-template-columns: 3fr 1fr;
}
main>article:nth-of-type(2)>aside:last-of-type>h4>a{
justify-self: end;
align-self: center;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
}
main>article:nth-of-type(2)>aside:first-of-type>ul{
height: 92%;
display: grid;
grid-template-rows: repeat(12, 1fr);
align-items: center;
}
main>article:nth-of-type(2)>aside:first-of-type>ul>li{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
main>article:nth-of-type(2)>section>ul>li img{
width: 170px;
}
main>article:nth-of-type(2)>section>ul{
display: grid;
grid-template-rows: repeat(2, 1f);
grid-template-columns: repeat(3, 1fr);
/* grid-template: 1fr 1fr/1fr 1fr 1fr; */
place-items: center;
height: 90%;
column-gap: 10px;
}
main>article:nth-of-type(2)>section>ul>li{
box-shadow:0 0 8px rgba(0, 0, 0, 0.2);
padding: 10px 10px 50px;
position: relative;
}
main>article:nth-of-type(2)>section>ul>li p{
line-height: 25px;
background-color: white;
position: absolute;
top: 103px;
padding: 7px 8px 0;
margin-right: 10px;
border-radius: 10px 10px 0 0;
}
main>article:nth-of-type(2)>section>ul>li i{
font-style: normal;
background-color: coral;
padding: 0 5px;
margin-right: 5px;
color: white;
}
main>article:nth-of-type(2)>aside:last-of-type>ul{
height: 90%;
display: grid;
grid-template-rows: repeat(6, 1fr);
align-items: center;
}
main>article:nth-of-type(2)>aside:last-of-type>ul img{
width: 40px;
}
main>article:nth-of-type(2)>aside:last-of-type>ul>li{
display: grid;
grid-template-columns: 50px 1fr;
}
main>article:nth-of-type(2)>aside:last-of-type>ul>li a{
font-size: 13px;
padding-right: 6px;
}
main>article:nth-of-type(2)>aside:last-of-type>ul>li a:last-of-type{
padding-right: 0;
}
main>article:nth-of-type(3){
margin-top: 30px;
background-color: white;
height: 630px;
padding: 15px 15px 0;
}
main>article:nth-of-type(3)>h3{
text-align: center;
margin-bottom: 20px;
}
main>article:nth-of-type(3)>ul{
display: grid;
grid-template: repeat(3, 1fr)/repeat(5, 217px);
gap: 28px 20px;
}
main>article:nth-of-type(3)>ul>li:first-of-type{
grid-row: 1 / span 2;
/* grid-area: 1 / 1 / 3 / 2; */
/*或者 grid-row: 1 / 3;
grid-column: 1 / 2; */
}
main>article:nth-of-type(3)>ul img{
border-radius: 10px 10px 0 0 ;
width: 217px;
justify-self: center;
}
main>article:nth-of-type(3)>ul>li:first-of-type>img{
border-radius:0;
}
main>article:nth-of-type(3)>ul>li>a{
display: grid;
grid-template-rows: 120px 1fr;
place-content: center;
border-radius: 10px;
box-shadow: 0 0 10px rgba(153, 153, 153, 0.9);
}
main>article:nth-of-type(3)>ul>li p{
font-size: 14px;
padding: 5px 10px 5px;
}
main>article:nth-of-type(3)>ul>li p i{
font-style: normal;
background-color: lightpink;
color: white;
padding: 0 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<header>
<a href="" class="logo"><img src="https://www.php.cn/static/images/logo.png" alt=""></a>
<nav>
<ul>
<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>
</nav>
<div class="header-right">
<a href="">##</a>
<a href=""><img src="https://img.php.cn/upload/avatar/000/000/001/66dc81b343aeeae65130d56e2f75ae42.jpg" alt=""></a>
</div>
</header>
<main>
<article>
<aside>
<ul>
<li><a href="">php开发</a><i>></i></li>
<li><a href="">前端开发</a><i>></i></li>
<li><a href="">服务器开发</a><i>></i></li>
<li><a href="">移动开发</a><i>></i></li>
<li><a href="">数据库</a><i>></i></li>
<li><a href="">服务器运维&下载</a><i>></i></li>
<li><a href="">在线工具箱</a><i>></i></li>
<li><a href="">常用类库</a><i>></i></li>
</ul>
</aside>
<section>
<ul>
<li><a href="">php头条</a><span>新</span></li>
<li><a href="">独孤九贱</a></li>
<li><a href="">学习路线</a><span>新</span></li>
<li><a href="">在线工具</a></li>
<li><a href="">趣味课堂</a><span>新</span></li>
<li><a href="">社区问答</a></li>
<li><a href="">课程直播</a></li>
<li><input type="search" name="" id=""></li>
</ul>
<div class="banner"><img src="https://www.php.cn/static/images/index_banner7.jpg" alt=""></div>
<aside>
<a href=""><img src="https://www.php.cn/static/images/index_yunv.jpg" alt=""></a>
<a href=""><img src="https://www.php.cn/static/images/index_php_item2.jpg?1" alt=""></a>
<a href=""><img src="https://www.php.cn/static/images/index_php_item3.jpg?1" alt=""></a>
<a href=""><img src="https://www.php.cn/static/images/index_php_new4.jpg?1" alt=""></a>
</aside>
</section>
</article>
<aside><a href=""><img src="https://www.php.cn/static/images/index_ad222.jpg" alt=""></a></aside>
<article>
<aside>
<h4>头条</h4>
<ul>
<li><a href="">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a></li>
<li><a href="">php中文网《玉女心经》公益***系列课程汇总</a></li>
<li><a href="">php中文网线上班前端（HTML5/CSS3）测试题</a></li>
<li><a href="">PHP成立25周年：看看大佬们对PHP都有哪些评价</a></li>
<li><a href="">同为动态语言，PHP为何比Python快那么多？原因解析</a></li>
<li><a href="">2019年最新最全面的CMS开发视频教程（收藏）</a></li>
<li><a href="">ThinkPHP6.0今天正式发布</a></li>
<li><a href="">预警！！！PHP 远程代码执行漏洞</a></li>
<li><a href="">优化CSS并加速网站的21种方法</a></li>
<li><a href="">Web 性能优化：图片优化让网站大小减少 62%</a></li>
<li><a href="">四大常见PHP开源CMS网站系统安装视频教程</a></li>
<li><a href="">金九银十，学习正当时！ php中文网新课不断上线中！</a></li>
</ul>
</aside>
<section>
<h4>最新课程</h4>
<ul>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频</p></a></li>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
<li><a href=""><img src="https://img.php.cn/upload/course/000/000/014/5db2b53c67bca626.jpg" alt=""><p><i>初级</i>2019python自学视频自学视频</p></a></li>
</ul>
</section>
<aside>
<h4>常见手册<a href="">更多</a></h4>
<ul>
<li>
<img src="https://www.php.cn/upload/system/000/000/001/57d55fe881432245.jpg" alt="">
<span>
<a href="">php手册</a>
<a href="">Linux手册</a>
<a href="">ThinkPHP6.0</a>
<a href="">CI手册大全</a>
</span>
</li>
<li>
<img src="https://www.php.cn/upload/system/000/000/001/57d55f537896d439.jpg" alt="">
<span>
<a href="">JavaScript中文参考手册</a>
<a href="">ThinkPHP6.0</a>
<a href="">CI手册大全</a>
</span>
</li>
<li>
<img src="https://www.php.cn/upload/system/000/000/001/57d560a2c0e5f831.jpg" alt="">
<span>
<a href="">MySQL参考手册大全</a>
<a href="">ThinkPHP6.0</a>
<a href="">CI手册大全</a>
</span>
</li>
<li>
<img src="https://www.php.cn/upload/system/000/000/001/57d56222bfab2642.jpg" alt="">
<span>
<a href="">Python参考手册大全</a>
<a href="">ThinkPHP6.0</a>
<a href="">CI手册大全</a>
</span>
</li>
<li>
<img src="https://www.php.cn/upload/system/000/000/001/57d55f07ccfb6991.jpg" alt="">
<span>
<a href="">php手册</a>
<a href="">Linux手册</a>
<a href="">ThinkPHP6.0</a>
<a href="">CI手册大全</a>
</span>
</li>
<li>
<img src="https://www.php.cn/upload/system/000/000/000/5a911102396d0195.jpg" alt="">
<span>
<a href="">ASP参考手册大全</a>
<a href="">ThinkPHP6.0</a>
<a href="">CI手册大全</a>
</span>
</li>
</ul>
</aside>
</article>
<article>
<h3>PHP学习</h3>
<ul>
<li>
<img src="https://www.php.cn/static/images/index_learn_middel.jpg" alt="">
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d24010108e3d268.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a372b552a2c4233.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a3728258bf9f213.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a373991d9cd9819.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a530c9c6c775990.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a5322a085219472.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/003/5a53090b27254106.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d22b615e56bf130.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5d2402695ce37351.jpg" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p></a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p>
</a>
</li>
<li>
<a href=""><img src="https://img.php.cn/upload/course/000/000/001/5b63c72c61569244.png" alt="">
<p><i>初级</i>初级编程学习方法分享直播公益课<span>1W+次播放</span></p>
</a>
</li>
</ul>
</article>
</main>
</body>
</html>
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
