任务目标

通过CSS浮动属性完成通用头部部分的水平两端左右布局

任务要求

（1）按照下图所示效果在6.2任务美化后的页面通用头部的HTML文件基础上实现浮动左右布局。

（2）页面通用头部内容通过浮动进行左右布局。

（3）通过清除浮动解决浮动带来的父元素高度崩塌问题。

（4）给header元素增加内边距，产生四周8像素的留白空间。

效果图如下：

任务实施

（1）对已完成美化的页面通用头部内容进行备份并修改。

（2）设定header元素的class为clear-fix，匹配common.css文件中的清除浮动样式内容。

（3）设定header元素中使用div元素将内容分为两部分，左侧部分包含网站Logo与导航，右侧部分包含“登录”“注册”按钮，并分别进行左浮动、右浮动。

（4）设定头部左侧部分class为clear-fix，匹配common.css文件中的清除浮动样式内容。

（5）设定头部左侧部分的网站Logo与导航分别进行左浮动。

教学微课

教学课件

经验分享

CSS属性visibility: hidden和display: none都可以实现让元素在页面中隐藏的结果。

但是两者的区别如下：

display: none的方式处理的元素，相当于元素内容被隐藏掉，不会占用空间，并且所绑定的点击事件，也由于没有进行渲染显示而无法触发。

visibility: hidden的方式处理的元素，相当于将修饰元素进行全透明化显示，依然会占用自身的宽高空间；如果有类似的单击事件，在所在区域点击仍可触发。通常的动态显示与隐藏功能，均是通过该属性进行实现的。

能量贴士

好学近乎知，力行近乎仁，知耻近乎勇。语出《中庸》。