《CSS+DIV网页样式与布局案例教程》 徐琴
目录
- 任务一 制作简单纵向导航栏
- 支撑知识点
- 1.合理利用display:block属性
- 2.利用margin-bottom设置间隔效果
- 3.利用border设置特殊边框
- 任务二 制作简单横向导航栏
- 任务三 制作带图片效果的横向导航栏
- 任务四 制作带下拉菜单的横向导航栏
- 支撑知识点
- 1.用*号设置全局样式
- 2.对特定标签下的子标签设置样式
任务一 制作简单纵向导航栏
导航栏包括纵向导航栏、横向导航栏、带下拉菜单的导航栏等。在制作导航栏的过程中,一般会应用CSS样式表来对导航栏进行设置和美化。本任务中,我们从最基础的纵向导航栏开始学习。
支撑知识点
1.合理利用display:block属性
display属性规定元素的显示类型,其具有多个不同的属性值,其中display:block表示将元素转换为块级元素。
2.利用margin-bottom设置间隔效果
在制作纵向导航栏或者列表一类的纵向HTML结构时,如果设计要求导航栏的每一项之间有一定间隔的时候,可以使用margin-bottom属性来实现这个效果。
对于单个的元素来讲,margin-bottom属性是设置此元素和它下面的元素的间隔,当此属性被设置在纵向菜单或者列表结构里面时,就可以产生均匀的间隔效果。
3.利用border设置特殊边框
特殊边框的设置并不困难,在项目四中,我们已经知道border可以对4个方向的边框分别进行设置。那么在设置边框的时候,可以单独设置一个方向的边框,也可以对多个方向的边框分别进行不同的样式设置。
任务二 制作简单横向导航栏
在本任务中,我们将通过制作简单横向导航栏,来继续学习制作导航栏的方法及一些CSS样式的使用。本任务将会使用到前一个任务中的一些步骤,同时会涉及到浮动、块元素等知识。
任务三 制作带图片效果的横向导航栏
通过前面2个任务的练习,大家已经对导航栏有了初步的了解,现在我们需要在前面2个例子的基础上,对导航栏进行更深入的学习,制作一个带有背景图片变换效果的横向导航栏,当将鼠标指针移动到导航栏的菜单项时背景会发生变化。
任务四 制作带下拉菜单的横向导航栏
本任务将要制作带下拉菜单的横向导航栏。该导航栏的制作比前面3个任务制作都要复杂一些。要在不使用javascript的情况下制作带下拉菜单的导航栏,需要合理利用CSS的display属性,通过设置display属性的值来完成菜单的显示和隐藏。
支撑知识点
1.用*号设置全局样式
对网页进行样式设置时,有时会遇到需要设置全局样式的情况,也就是设置页面上所有标签、类、id都使用的共有样式。CSS为我们提供了一种解决方法,就是使用*{}选择器。由该选择器定义的样式,浏览器会视作页面上所有的内容都采用这个样式。
2.对特定标签下的子标签设置样式
一个网页中,通常会在不同的地方有相同的标签,比如2个不同class的<div>
下面都可能会有超链接标签、列表标签等。要给这些不同位置的标签添加样式,一种方法是为这些不同位置的标签设置对应的class或id,但这样会使页面上有大量的class或id,不利于样式的处理;另外一种方法就是使用父标签加子标签的形式,也就是利用在项目二学习的嵌套选择器。其语法格式为:
父标签 子标签 孙标签 曾孙标签 …{}