grid+flex布局仿 PHP 页头
效果图如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<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">
<title>仿PHP</title>
<link rel="stylesheet" href="./font/iconfont.css">
<link rel="stylesheet" href="/0713/static/css/reset.css">
<style>
.header {
height: 130px;
}
.header .top{
width: 100VW;
height: 40px;
background-color: #444546;
}
.header .top .content{
/* 定义居中: 内容区需要有宽度 */
width: 1200px;
margin: auto;
display: grid;
grid-template-columns: 400px 100px;
grid-auto-rows: 40px;
place-content: space-between space-between;
place-items: center start;
}
.header .top .content .title a{
color: #fff;
font-weight: lighter;
}
.header .top .content .top-r{
display: flex;
color: #fff;
}
.header .top .content .top-r span{
padding: 0 10px;
}
.header .top .content .top-r .icon-lingdang{
font-size: 22px;
}
.header .top .content .top-r img{
width: 80%;
border-radius: 50%;
}
.header .navs{
width: 100vw;
background-color: #fff;
height: 90px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.header .navs .content{
width: 1200px;
margin: auto;
display: grid;
/* 1fr=auto */
grid-template-columns: 140px 1fr 200px;
/* 格子间距 */
gap: 10px;
grid-auto-rows: 90px;
place-items: center start;
}
.header .navs .content img{
width: 100%;
}
.header .navs .content .menu{
display: flex;
}
.header .navs .content .menu a{
padding: 0 10px;
}
.header .navs .content .menu a:hover,
.header .navs .content .menu a.active{
color: red;
font-weight: bold;
}
.header .navs .content .right{
display: flex;
}
.header .navs .content .right input[type="search"]{
width: 200px;
height: 36px;
border-radius: 20px;
border: none;
outline: none;
background-color: #eee;
padding-left: 10px;
}
.header .navs .content .right .icon-sousuo{
font-size: 22px;
color: #ccc;
position: relative;
left: -30px;
top:5px
}
.header .navs .content .right .icon-sousuo:hover{
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 页眉 -->
<div class="header">
<!-- 头部 -->
<div class="top">
<div class="content">
<div class="title"> <a href="">PHP中文网-程序员梦开始的地方!</a></div>
<div class="top-r">
<span class="iconfont icon-lingdang"></span>
<span class="iconfont"><a href=""><img src="/0713/static/images/user-pic.jpeg" alt=""></a></span>
</div>
</div>
</div>
<!-- 导航 -->
<div class="navs">
<div class="content">
<a href=""><img src="../0713/static/images/logo.png" alt=""></a>
<nav class="menu">
<a href="" class="active">首页</a>
<a href="">视频教程</a>
<a href="">学习路径</a>
<a href="">PHP培训</a>
<a href="">资源下载</a>
<a href="">技术文章</a>
</nav>
<div class="right">
<input type="search" placeholder="请输入关键字">
<a><span class="iconfont icon-sousuo"></span></a>
</div>
</div>
</div>
</div>
</body>
</html>