养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

html+css怎么实现横向导航

时间:2024-11-10 22:33:52

在网站制作中,我们经常会用到横向导航条,既美观大方,又容易操作,但是怎么实现横向导肾禀嚼隳航条效果呢,我们一起来看一下

工具/原料

新建一个记事本文档或者用Dreamweaver新建一个HTML文件

方法/步骤

1、用Dreamweaver新建一个HTML文件

html+css怎么实现横向导航

2、按ctrl+s先保存,以防突然断电数据丢失

3、修改title为html+css实现横向导航

html+css怎么实现横向导航

4、新建一个divid为“a”,添加ulli标签

html+css怎么实现横向导航

5、在li中添加自己想要的文字并调整好文字间距,按F12预览,如下图所示

html+css怎么实现横向导航

6、首先去掉字体前面的小黑点,代码如下:

html+css怎么实现横向导航

7、预览,如图所示

html+css怎么实现横向导航

8、接下来,使文字横向排列,设置代码如下,给li设置左浮动效果

html+css怎么实现横向导航

9、按F12预览,效果如下

html+css怎么实现横向导航

© 一点知识