悦轩饼家-公共样式页眉

面相进程，面相对象

已于 2022-07-08 10:36:36 修改

阅读量182

点赞数 2

分类专栏：悦轩饼家思路共享文章标签： html5 html css3 css

于 2022-07-07 10:40:52 首次发布

本文链接：https://blog.csdn.net/weixin_57575133/article/details/125653251

版权

思路共享同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

悦轩饼家

8 篇文章 2 订阅

订阅专栏

什么是网页页眉（头部）？

网页头部是指网页的顶部部分。在以前，人们对页眉的理解是网页顶部部分的窄条，里面有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;
}

效果基本一样：