Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="static/csstext/headertext.css">
<link rel="stylesheet" href="static/csstext/resettext.css">
<link rel="stylesheet" href="static/csstext/maintext.css">
<title>仿PHP中文网首页头部</title>
</head>
<body>
<!-- 页眉 -->
<header>
<!-- 1 顶部 -->
<div class="top">
<div class="content1">
<div class="dream">欢迎光临-梦开始的地方!</div>
<div class="topright">
<div class="ding">提醒</div>
<div class="denglu">登录</div>
</div>
</div>
</div>
<!-- 2 导航 -->
<div class="navigations">
<div class="content2">
<a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
<nav>
<a href="" class="shouye">首页</a>
<a href="">视频教学</a>
<a href="">学习路径</a>
<a href="">PHP培训</a>
<a href="">资源下载</a>
</nav>
<div class="search">
<input type="search" placeholder="输入关键字搜索"/>
<span class=""></span>
</div>
</div>
</div>
</header>
<!-- 主体 -->
<main>
<div class="navigation2">
<!-- 2行3列 -->
<div class="left">
<a href="">PHP开发</a>
<a href="">大前端</a>
<a href="">PHP开发</a>
<a href="">PHP开发</a>
<a href="">PHP开发</a>
<a href="">PHP开发</a>
<a href="">PHP开发</a>
<a href="">PHP开发</a>
</div>
<div class="slider">
<a href="">
<img src="static/images/slider.jpeg" alt="" />
</a>
</div>
<div class="right">
<div class="user">
<div class="userID">
<img src="static/images/touxiang.jpeg" alt="">
<div class="userID-desc">
<a href="">手机用户01</a>
<span>P豆 12</span>
</div>
</div>
<div class="study">
<button>我的学习</button>
</div>
</div>
<ul class="wenda">
<li class="cont1">
<span>问答社区</span>
<a href="">答疑</a>
</li>
<li class="cont2">
<span>头条</span>
<a href="">520专属浪漫表白方式!</a>
</li>
<li class="cont3">
<span>福利</span>
<a href="">编程书籍>></a>
</li>
<li class="cont4">
<span>新班</span>
<a href="">大前端上线</a>
</li>
<li class="cont5">
<span>招募</span>
<a href="">课程合作计划</a>
</li>
<li class="cont6">
<span>公告</span>
<a href="">APP上线啦</a>
</li>
</ul>
</div>
<div class="bottom-left">
<!-- 学习路径 -->
<div class="desc">
<div class="title">学习路径</div>
<span>全部7个</span>
</div>
<ul class="detail">
<li>
<img src="static/images/dgjj.png" alt="">
<a href="">独孤九贱</a>
<span>9门课程<span>
</li>
<li>
<img src="static/images/dgjj.png" alt="">
<a href="">玉女心经</a>
<span>5门课程<span>
</li>
<li>
<img src="static/images/dgjj.png" alt="">
<a href="">天龙八部</a>
<span>3门课程<span>
</li>
<li>
<img src="static/images/dgjj.png" alt="">
<a href="">自学指南</a>
<span>19门课程<span>
</li>
<li>
<img src="static/images/dgjj.png" alt="">
<a href="">趣味闯关</a>
<span>22门课程<span>
</li>
</ul>
</div>
<div class="bottom-right">
<ul>
<li class="tubiao1">
<a href="">
<img src="static/images/weixin.png" alt=""></img>
<h5>官方公众号</h5>
</a>
</li>
<li class="tubiao1">
<a href="">
<img src="static/images/qq.png" alt=""></img>
<h5>官方QQ群</h5>
</a>
</li>
</ul>
</div>
</div>
</main>
</body>
/* 页面元素样式初始化 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color:#555;
}
body {
background-color: rgb(243,245,247);
}
li {
list-style: none;
}
header .top{
width: 100vw;
height: 40px;
background-color: rgb(52,52,52) ;
color: #aaa;
}
header .top .content1 img {
width: 50%;
border-radius: 50%;
}
header .top .content1 {
width: 1200px;
display: grid;
grid-template-columns:400px 100px;
grid-auto-rows: 40px;
place-content: space-between;
place-items: center start;
margin: auto;
}
header .top .content1 .topright {
display:grid;
grid-template-columns:repeat(2,1fr);
place-items: center;
}
/* 导航 */
header .navigations {
width: 100vw;
height: 90px;
background-color:#fff;
}
header .navigations .content2 {
width: 1200px;
display: grid;
grid-template-columns: 140px 1fr 200px;
grid-auto-rows:90px;
gap:10px;
margin: auto;
place-items: center start;
}
header .navigations .content2 img {
width:100%;
}
header .navigations .content2 nav a.shouye,
header .navigations .content2 nav a:hover {
color:red;
font-weight:bold;
}
header .navigations .content2 nav a {
padding: 0 10px;
}
header .navigations .content2 .search {
display: flex;
}
header .navigations .content2 .search input[type='search'] {
width: 200px;
height: 36px;
border: none;
outline: none;
background-color: #f7f8fa;
border-radius: 20px;
padding-left: 10px;
}
main {
font-size: 14px;
}
main .navigation2 {
/* 2行3列 */
display:grid;
grid-template-columns: 160px 810px 190px;
grid-template-rows: 400px 80px;
gap:20px;
place-content:center;
margin:30px 0;
}
main .navigation2>*{
background-color:#fff;
border-radius: 20px;
}
/* 底部左侧占2列 */
main .navigation2 .bottom-left {
grid-column:span 2;
}
main .navigation2 .slider img {
width:100%;
border-radius: 20px;
}
/* 左侧导航 */
main .navigation2 .left {
display:grid;
place-items:center;
padding:20px 0;
}
main .navigation2 .left a:hover{
color:red;
background-color:rgb(230, 230, 250);
}
main .navigation2 .left a {
border-radius: 20px;
padding:10px 20px;
}
/* 底部左侧 */
main .navigation2 .bottom-left {
display:grid;
grid-template-columns: 100px 1fr;
gap:30px;
}
main .navigation2 .bottom-left .desc {
display:grid;
place-items:center;
padding:16px;
}
main .navigation2 .bottom-left .detail img{
width: 100%;
grid-row: span 2;
}
main .navigation2 .bottom-left .detail {
display: flex;
place-items: center;
place-content: space-between;
}
/* main .navigation2 .bottom-left .detail{
display: grid;
grid-template-columns: repeat(5, 1fr);
place-content: center;
} */
main .navigation2 .bottom-left .detail li {
display:grid;
grid-template-columns: 36px 85px;
gap:0 10px;
place-items:center start;
}
main .navigation2 .bottom-left .detal li a{
font-size:14px;
}
main .navigation2 .bottom-left .detal li a:hover{
color:red;
}
main .navs .bottom-left .detal li span,
main .navs .bottom-left .desc span {
font-size: 12px;
color:#999;
}
/* 右侧导航 */
main .right {
display:grid;
grid-template-rows:142px 1fr;
}
main .right .user{
display:grid;
grid-template-rows: 70px 1fr;
border-bottom:rgb(230, 230, 250) solid 1px;
place-items:center;
}
main .right .user .userID{
display:grid;
grid-template-columns: 40px 75px;
gap:0 20px;
}
button{
background-color:red;
width:150px;
height:34px;
border-radius:20px;
border-width:0;
color:white;
}
main .right .wenda{
display:grid;
grid-template-rows: repeat(6,1fr);
place-items:center start;
padding:0 20px;
}
main .right .wenda .cont1 a{
background-color:red;
color:white;
font-size: smaller;
}
/* 底部右侧 */
main .navigation2 .bottom-right ul{
display:flex;
place-content:center;
gap:20px;
padding:10px;
}
main .navigation2 .bottom-right li{
display:grid;
grid-template-rows: 36px 36px;
}