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表单中按钮
  • 热门搜索
    苏轼生平简介 violet怎么读 酒后胃难受怎么办 深圳怎么摇号 包皮是怎么回事 怎么换浏览器 康乃馨花怎么养 余额调节表怎么做 春季减肥食谱 最有效的减肥方法