什么是网页页眉（头部）？
网页头部是指网页的顶部部分。在以前，人们对页眉的理解是网页顶部部分的窄条，里面有logo、品牌号召性标语和联系信息。但在现代设计中，主页的整个空间都被认为是页眉。
作为人们在加载网页的前几秒看到的页面的战略构成部分，页眉起到了一种邀请的作用。它应该提供一个网页的基本信息，让用户可以在几秒钟内了解它提供的信息。
有些设计师会为网页的各个部分分别制作头部。例如，你可以为主页做一个大头，为其他页面留一个小条。但要保持一致。内页的页眉设计应该是主页面页眉的简略版。这是一个很好的网页设计做法。
网页页眉包括哪些内容？
页眉的任务是给用户解答一些基本问题：代表什么品牌，提供什么商品和服务，如何与公司员工取得联系，是否有当前的优惠等等。
除此之外，它还代表了一个网页的质量甚至身份。如果页眉能引起良好的情感共鸣，让浏览者觉得它有价值，那么你就通过了初步的测试。
网页头部的主要元素通常有：
标志或品牌标识、品牌号召性标语、头部、导航元素、搜索等等。
你不必一下子把它们全部加进去。有必要在丰富的信息和和谐的安排之间找到一个平衡点。只使用你需要的数据，过重的头部也不好，无论所有的链接看起来多么重要。
让页眉太空也不是一个好主意。一个用户如果不能在几秒钟内搞清楚你的界面，很可能会离开，不再回来。一个糟糕的页眉会把访问者推到另一个内容较差的网页。
在简约型页眉的设计中，只呈现网页主要部分的链接和公司的标志。这种技术在设计登陆页面时特别有用。
下面是悦轩饼家头部代码展示：
html部分
<!-- 页眉 -->
<!-- 导航栏 -->
<nav class="container">
<a href="index.html">
<!-- logo logo受版权保护一般用背景图引用 -->
<div class="nav-a"></div>
</a>
<div class="nav-b">
<span class="iconfont icon-weizhi"></span>
<div>
武汉市
</div>
<div>
切换城市
</div>
</div>
<div class="nav-c">
<a href="javascript:void(0);">
<div>
全部
</div>
</a>
<a href="dangao.html">
<div>
蛋糕
</div>
</a>
<a href="javascript:void(0);">
<div>
下午茶
</div>
</a>
<a href="javascript:void(0);">
<div>
手信
</div>
</a>
<a href="javascript:void(0);">
<div>
团购预约
</div>
</a>
<a href="gywom.html">
<div>
关于我们
</div>
</a>
</div>
<div class="nav-d">
<a href="javascript:void(0);">
<div>
<!-- 字体图标 -->
<span class="iconfont icon-anquan"></span>
</div>
</a>
<a href="javascript:void(0);">
<div>
<!-- 字体图标 -->
<span class="iconfont icon-sousuo1"></span>
</div>
</a>
<a href="car.html">
<div>
<!-- 字体图标 -->
<span class="iconfont icon-goumaijilu"></span>
</div>
</a>
<a href="denglu.html">
<div>
<!-- 字体图标 -->
<span class="iconfont icon-yonghu1"></span>
</div>
</a>
<div>
<span>联系我们</span>
</div>
</div>
</nav>css部分
* {
margin: 0;
padding: 0;
}
.container {
overflow: auto;
width: 1200px;
margin: 0 auto;
/* min-width: 1200px; */
}
a {
color: white;
text-decoration: none;
}
nav {
width: 100%;
height: 60px;
padding: 15px 5px;
display: flex;
justify-content: space-around;
}
nav>div {
margin-top: 15px;
height: 30px;
line-height: 30px;
/* background-color: #3967FF; */
}
nav .nav-a {
width: 150px;
height: 60px;
margin-top: 0;
/* 背景图引用logo图 */
background-image: url(../img/logo.jpg);
background-repeat: no-repeat;
background-size: contain;
}
nav .nav-b {
width: 170px;
display: flex;
justify-content: space-between;
}
nav .nav-b span {
color: burlywood;
}
nav .nav-b div:nth-of-type(2) {
width: 80px;
text-align: center;
background-color: gainsboro;
color: white;
}
nav .nav-c {
width: 550px;
display: flex;
justify-content: space-around;
}
nav .nav-c a {
color: #333;
}
nav .nav-d {
width: 260px;
display: flex;
justify-content: space-between;
}
nav .nav-d a div {
width: 30px;
text-align: center;
border: 1px solid gray;
color: #333;
}
nav .nav-d a:nth-of-type(1) div {
color: pink;
border: 0px;
}
nav .nav-d a:nth-of-type(5) div {
width: 80px;
margin-right: 5px;
}效果图：
***字体图标可以到阿里矢量图标库进行下载！！
以上内容排版是多运用弹性布局！！
下面是最原始的排版：一个一个调
html部分
<!-- 公共头部 -->
<header>
<a href="index.html">
<img src="img/logo_big01.png" />
</a>
<div class="city">
<img src="img/icon-address.png" />
<span>武汉市</span>
<a href="#">切换城市</a>
</div>
<div class="nav">
<a href="#">全部</a>
<a href="list.html">蛋糕</a>
<a href="#">下午茶</a>
<a href="#">手信</a>
<a href="#">团购预约</a>
<a href="about.html">关于我们</a>
</div>
<div class="link">
<div class="love"></div>
<a href="#"> <img src="img/i-search.jpg" /></a>
<a href="#"><img src="img/i-cart.jpg" /></a>
<a href=login.html> <img src="img/i-user.jpg" /></a>
<a href="#">联系我们</a>
</div>
</header>
<!-- 公共头部 end-->css部分
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-family: "Microsoft Yahei";
font-size: 16px;
background-color: #eeeee;
}
.clear:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
overflow: hidden;
}
.clear {
zoom: 1;
}
li {
list-style: none;
}
a {
text-decoration: none;
cursor: pointer;
color: #737373;
}
img {
vertical-align: top;
border: 0;
}
.xf_header {
width: 100%;
height: 77px;
background: #fff;
border-bottom: 1px solid #9d9895;
position: fixed;
left: 0;
top: 0;
z-index: 10;
}
header {
width: 1251px;
height: 78px;
/*background: pink;*/
margin: 0 auto;
overflow: hidden;
}
header>a {
float: left;
}
header>a img {
width: 217px;
height: 76px;
}
header .city {
float: left;
margin-top: 29px;
font-size: 12px;
}
header .city>img {
width: 11px;
height: 17px;
margin-left: 31px;
margin-right: 7px;
}
header .city>a {
padding: 9px;
background: #cccccc;
color: #fff;
margin-left: 13px;
}
header .nav {
float: left;
height: 78px;
line-height: 77px;
margin-left: 66px;
}
header .nav a {
color: #220e03;
margin-right: 29px;
}
header .nav a:last-child {
margin-right: 0;
}
header .nav a:first-child {
margin-right: 36px;
}
header .link {
float: right;
margin-top: 29px;
}
header .link>img {
width: 23px;
height: 23px;
float: left;
margin-right: 23px;
}
header .link>a {
padding: 11px 8px 12px 8px;
border: 1px solid #989898;
color: #03000e;
}
header .love {
display: inline-block;
background: url(../img/icon.gif) no-repeat -125px 0;
width: 36px;
height: 22px;
}效果基本一样：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
