div+css制作简单导航菜单

 时间:2024-10-14 13:39:31

1、div+css制作简单导航菜单,首先看效果图:

div+css制作简单导航菜单

2、代码如下:首先建立 4个超链接

div+css制作简单导航菜单

3、预览效果:

div+css制作简单导航菜单

4、添加如下样式:

div+css制作简单导航菜单

5、预览效果:

div+css制作简单导航菜单

6、发现链接竟然是竖着排列的,这是因为display:block的属性决定的,现在把a标签这个行内元素变为了块级元素,而每个块级元素默认是占满整个一行的(无论多宽),后边的元艾绱书虻素会另起一行。那现在要让他们一行展示怎么办?很简单,加个属性float:left;

div+css制作简单导航菜单

7、预览效果:

div+css制作简单导航菜单

8、好吧,效果出来了,但这样式…… 美化一下,让每个链接都有个间距,而且文字居中。

div+css制作简单导航菜单

9、预览效果:

div+css制作简单导航菜单

10、再次美化,给它加个滑动的效果,而且去除下划线

div+css制作简单导航菜单

11、最终预览效果:

div+css制作简单导航菜单

12、简单吧,其实所有的链接效果的基本原理都是这个,更炫酷一点的无非是给它增加几个背景图片而已!

  • 如何利用DIV+CSS布局网站主页
  • css如何设置文字与div外边有一定的距离
  • Dreamweaver网页制作初级教程:表格的用法
  • Dreamweaver CS3设置文本区域含义说明
  • dreamweaver cs6表单中按钮
  • 热门搜索
    安全上网手抄报 伊索寓言手抄报 我爱阅读手抄报资料 手抄报内容大全 健康知识手抄报图片 岭南文化手抄报 走进童话世界手抄报 安全的手抄报内容 文明用语手抄报 手抄报装饰简笔画