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表单中按钮
  • 热门搜索
    小学四年级数学手抄报 清明手抄报资料大全 电影手抄报 安全伴我成长手抄报 语言的魅力手抄报资料 和读书有关的手抄报 文明交通我先行手抄报 海洋的手抄报 美丽的春天手抄报图片 春天的手抄报大全