天津网站建设哪个好,爱深圳小程序,手表网站制作模板,网站架构推荐《CSSDIV网页样式与布局案例教程》 徐琴 目录 任务一 制作简单纵向导航栏支撑知识点1#xff0e;合理利用display:block属性2#xff0e;利用margin-bottom设置间隔效果3#xff0e;利用border设置特殊边框 任务二 制作简单横向导航栏任务三 制作带图片效果的横向导航栏任务… 《CSSDIV网页样式与布局案例教程》 徐琴 目录 任务一 制作简单纵向导航栏支撑知识点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不利于样式的处理另外一种方法就是使用父标签加子标签的形式也就是利用在项目二学习的嵌套选择器。其语法格式为 父标签 子标签 孙标签 曾孙标签 …{}
