div+css制作简单导航菜单

 时间:2026-02-14 21:06:25

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

div+css制作简单导航菜单

2、2.代码如下:

首先建立 4个超链接

div+css制作简单导航菜单

3、3.预览效果:

div+css制作简单导航菜单

4、4.添加如下样式:

div+css制作简单导航菜单

5、5.预览效果:

div+css制作简单导航菜单

6、6.发现链接竟然是竖着排列的,这是因为display:block的属性决定的,现在把a标签这个行内元素变为了块级元素,而每个块级元素默认是占满整个一行的(无论多宽),后边的元素会另起一行。

那现在要让他们一行展示怎么办?很简单,加个属性float:left;

div+css制作简单导航菜单

7、7.预览效果:

div+css制作简单导航菜单

8、8.好吧,效果出来了,但这样式……

   美化一下,让每个链接都有个间距,而且文字居中。

div+css制作简单导航菜单

9、9.预览效果:

div+css制作简单导航菜单

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

div+css制作简单导航菜单

11、11.最终预览效果:

div+css制作简单导航菜单

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

  • 如何利用DIV+CSS布局网站主页
  • css如何设置文字与div外边有一定的距离
  • Dreamweaver网页制作初级教程:表格的用法
  • Dreamweaver CS3设置文本区域含义说明
  • dreamweaver cs6表单中按钮
  • 热门搜索
    嘉峪关旅游 西宁旅游景点 乌镇旅游景点 河南旅游年票 旅游感想 沙坡头旅游攻略 南岳衡山旅游攻略 云南 旅游 澳门旅游学院 德天瀑布旅游攻略