实现
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<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/css/reset.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_3269118_mgnsjoz5gtp.css" />
<link rel="stylesheet" href="static/css/header.css" />
<link rel="stylesheet" href="static/css/main-nav.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_3280782_t7zyuayyde.css" />
<title>仿php.cn中文网首页差头部</title>
</head>
<body>
<!-- 页眉 -->
<header>
<!-- 1 顶部 -->
<div class="top">
<div class="content">
<div class="title">php中文网,程序员梦开始的地方!</div>
<div class="right">
<a href="" class="iconfont icon-tixing"></a>
<a href=""><img src="static/images/user_avatar.jpg" alt="" /></a>
</div>
</div>
</div>
<!-- 2 导航 -->
<div class="navs">
<div class="content">
<a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
<nav>
<a href="" class="active">首页</a>
<a href="">视频教程</a>
<a href="">学习路径</a>
<a href="">php培训</a>
<a href="">资源下载</a>
<a href="">技术文章</a>
<a href="">社区</a>
<a href="" class="active">APP下载</a>
</nav>
<div class="search">
<input type="search" placeholder="输入关键字搜索" />
<span class="iconfont icon-fangdajing fdj"></span>
</div>
</div>
</div>
</header>
<!-- 主体 -->
<main>
<div class="navs">
<!-- 2行3列 -->
<div class="left">
<a href="">php开发</a>
<a href="">大前端</a>
<a href="">后端开发</a>
<a href="">数据库</a>
<a href="">移动端</a>
<a href="">运维开发</a>
<a href="">UI设计</a>
<a href="">计算机基础</a>
</div>
<div class="slider">
<a href="">
<img src="static/images/slider.jpeg" alt="" />
</a>
</div>
<div class="right">
<ul class="shiyan">
<li>
<img src="static/images/user_avatar.jpg" alt="" />
</li>
</ul>
<ul class="shiyan1">
<li><a href="">新手1314</a></li>
</ul>
<ul class="shiyan2">
<li>P豆:14</li>
</ul>
<ul class="shiyan3">
<li><a href="">我的学习</a></li>
</ul>
<ul class="shiyan4">
<li>问答社区</li>
</ul>
<ul class="shiyan5">
<li><a href="">答疑</a></li>
</ul>
<ul class="shiyan6">
<li>头条</li>
</ul>
<ul class="shiyan7">
<li><a href="">“程序员做饭指南”</a></li>
</ul>
<ul class="shiyan6">
<li>新课</li>
</ul>
<ul class="shiyan8">
<li><a href="">3.9号公益直播课</a></li>
</ul>
<ul class="shiyan6">
<li>新班</li>
</ul>
<ul class="shiyan8">
<li><a href="">19期PHP直播班</a></li>
</ul>
<ul class="shiyan6">
<li>招募</li>
</ul>
<ul class="shiyan8">
<li><a href="">课程合作计划</a></li>
</ul>
<ul class="shiyan6">
<li>公告</li>
</ul>
<ul class="shiyan8">
<li><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 onclick="">
<img src="static/images//dgjj.png" alt="" />
<a href="">独孤九贱</a>
<span>9门课程</span>
</li>
<li onclick="">
<img src="static/images//ynxj.png" alt="" />
<a href="">玉女心经</a>
<span>5门课程</span>
</li>
<li onclick="">
<img src="static/images//tlbb.png" alt="" />
<a href="">天龙八部</a>
<span>3门课程</span>
</li>
<li onclick="">
<img src="static/images//phpkjkf.png" alt="" />
<a href="">自学指南</a>
<span>19门课程</span>
</li>
<li onclick="">
<img src="static/images//phpksrm.png" alt="" />
<a href="">趣味闯关</a>
<span>22门课程</span>
</li>
</ul>
</div>
<div class="bottom-right">
<ul class="tubiao">
<li>
<a href=""><span class="iconfont icon-logo-wechat"></span></a>
</li>
</ul>
<ul class="tubiao">
<li>
<a href=""><span class="iconfont icon-QQ-circle-fill"></span></a>
</li>
</ul>
<ul class="font">
<li><a href="">官方公众号</a></li>
</ul>
<ul class="font">
<li><a href="">官方QQ群</a></li>
</ul>
</div>
</div>
</main>
</body>
</html>
css
reset.css:
/* 页面元素样式初始化 */
* {
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.css:
header .top {
width: 100vw;
height: 40px;
background-color: rgb(52, 52, 52);
color: #aaa;
}
header .top .content img {
width: 50%;
border-radius: 50%;
}
header .top .content {
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 .content .right .iconfont {
color: #eee;
font-size: larger;
}
header .top .content .right {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
/* 导航 */
header .navs {
width: 100vw;
height: 90px;
background-color: #fff;
}
header .navs .content {
width: 1200px;
/* border: 1px solid #000; */
display: grid;
grid-template-columns: 140px 1fr 200px;
grid-auto-rows: 90px;
gap: 10px;
margin: auto;
place-items: center start;
}
header .navs .content img {
width: 100%;
}
header .navs .content nav a.active,
header .navs .content nav a:hover {
color: red;
font-weight: bold;
}
header .navs .content nav a {
color: #555;
}
header .navs .content .search {
display: flex;
}
header .navs .content nav {
display: grid;
grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px;
place-items: center center;
}
header .navs .content nav a {
padding: 0 10px;
}
header .navs .content .search input[type="search"] {
width: 200px;
height: 36px;
border: none;
outline: none;
background-color: #f7f8fa;
border-radius: 20px;
padding-left: 10px;
}
header .navs .content .search .fdj {
font-size: 22px;
color: #ccc;
position: relative;
left: -40px;
top: 5px;
}
main-nav.css:
main {
font-size: 14px;
}
main .navs {
/* 2行3列 */
display: grid;
grid-template-columns: 160px 810px 190px;
grid-template-rows: 400px 80px;
gap: 20px;
place-content: center;
margin: 30px 0;
}
main .navs > * {
background-color: #fff;
border-radius: 20px;
/* outline: 1px solid red; */
}
/* 底部左侧占2列 */
main .navs .bottom-left {
grid-column: span 2;
}
main .navs .slider img {
width: 100%;
border-radius: 20px;
}
/* 左侧导航 */
main .navs .left {
display: grid;
place-items: center;
padding: 20px 0;
}
main .navs .left a:hover {
color: red;
background-color: rgb(250, 223, 227);
}
main .navs .left a {
border-radius: 20px;
padding: 10px 20px;
color: #555;
}
/* 底部左侧 */
main .navs .bottom-left {
display: grid;
grid-template-columns: 100px 1fr;
}
main .navs .bottom-left .desc {
display: grid;
place-items: center;
padding: 16px;
}
main .navs .bottom-left .detail img {
width: 100%;
grid-row: span 2;
}
main .navs .bottom-left .detail {
display: flex;
place-items: center;
place-content: space-between;
}
main .navs .bottom-left .detail li {
display: grid;
grid-template-columns: 36px 85px;
gap: 0 10px;
place-items: center start;
}
main .navs .bottom-left .detail li a {
font-size: 14px;
}
main .navs .bottom-left .detail li a:hover {
color: red;
}
main .navs .bottom-left .detail li span,
main .navs .bottom-left .desc span {
font-size: 12px;
color: #999;
}
main .navs .right {
display: grid;
grid-template-columns: 70px 100px;
grid-template-rows: 40px 40px 80px 40px 40px 40px 40px 40px 40px;
gap: 0 20px;
}
main .navs .right .shiyan img {
width: 100%;
border-radius: 30px;
margin-left: 30px;
margin-top: 20px;
}
main .navs .right .shiyan {
display: grid;
grid-template-columns: 50px;
grid-template-rows: 80px;
grid-row: span 2;
place-items: center center;
}
main .navs .right .shiyan1 {
display: grid;
place-items: end start;
}
main .navs .right .shiyan2 {
display: grid;
place-items: center start;
}
main .navs .right .shiyan3 {
display: grid;
grid-column: span 2;
place-items: center center;
border-bottom: 1px solid rgb(207, 204, 204);
}
main .navs .right .shiyan3 li {
height: 40px;
width: 150px;
border: 0;
background-color: red;
border-radius: 20px;
line-height: 3;
margin-top: -20px;
}
main .navs .right .shiyan3 li a {
margin-left: 50px;
color: #fff;
}
main .navs .right .shiyan4 {
display: grid;
place-items: center end;
font-weight: bolder;
}
main .navs .right .shiyan5 {
display: grid;
place-items: center start;
}
main .navs .right .shiyan5 li a {
color: #fff;
margin-left: 5px;
}
main .navs .right .shiyan5 li {
border: 0;
background-color: red;
font-size: 14px;
width: 40px;
}
main .navs .right .shiyan6 {
display: grid;
place-items: center center;
font-weight: bolder;
}
main .navs .right .shiyan7 {
margin-left: -30px;
color: #999;
margin-top: 10px;
}
main .navs .right .shiyan7 li a:hover,
main .navs .right .shiyan8 li a:hover {
color: red;
}
main .navs .right .shiyan7 li a,
main .navs .right .shiyan8 li a {
color: #999;
}
main .navs .right .shiyan8 {
display: grid;
place-items: center center;
margin-left: -30px;
color: #999;
}
main .navs .bottom-right {
display: grid;
grid-template-columns: 95px 95px;
grid-template-rows: 50px 30px;
}
main .navs .bottom-right .icon-logo-wechat,
main .navs .bottom-right .icon-QQ-circle-fill {
font-size: 40px;
color: #999;
}
main .navs .bottom-right .tubiao {
display: grid;
place-items: center center;
}
main .navs .bottom-right .font {
display: grid;
place-items: center center;
font-size: 10px;
margin-top: -10px;
color: #999;
}
main .navs .bottom-right .font li a {
color: #000;
}
main .navs .bottom-right .font li a:hover {
color: red;
}