Web前端-设计网站公共header

设计网站公共header

header元素是一个具有引导和导航作用的结构元素，很多企业网站中都有一个非常重要的header元素，一般位于网页的开头，用来显示企业名称、企业logo图片、整个网站的导航条，以及Flash形式的广告条等。

在本网站中，header元素中的内容包括网站的logo图片、网站的导航以及通过jQuery技术来循环显示的特色图片，同时还为这些图片添加了说明性关键字。header元素中的内容在浏览器中的显示结果如图23.9所示。

图23.9　旅游信息网header元素在浏览器中的显示

网站公共部分的header元素的结构示意图如图23.10所示。

图23.10　公共部分header元素的结构示意图

1．header元素中显示网站名称的代码分析

在div中存放网站的名称及logo图片，它在浏览器中的页面显示。

图23.11　网站logo及名称的显示

div元素主要是显示页面左边的logo图片，同时通过<h2></h2>显示网站的名称“我爱长春”，并通过<strong>属性对“长春”两个字进行了加粗。其实现的代码如下。

<div class="logo">

<h2>我爱<strong>长春</strong> </h2>

</div>

接下来看一下对网站logo实现CSS样式的设计，代码如下。

上述的CSS代码的主要作用如下。

　对header元素中logo整体样式的设计，其中包括添加logo的图片、设置补白像素值、设置logo显示的宽度。

　设置网站名称的字体大小、字体风格为斜体、字体加粗、字体颜色等。

https://www.bilibili.com/video/BV1754y1N776/?p=2&spm_id_from=pageDriver&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c