怎样使用CSS设计水平导航条

导航条是我们设计网页时必须要掌握的方法。经典的方法是使用“列表+CSS”的方法创建,下面开始讲解如何使用CSS方法创建出好看的导航条先看一下最终效果图:

步骤/方法

  • 01

    需要两个小小的图片,分别用来填充背景与分隔条。

  • 02

    编写html代码,很简单,用ul、li列表就可以了。下面是原代码:(包含效果图)

  • 03

    然后开始CSS部分。首先:加背景;其次:将竖直列表变成水平,用float:left就可以实现。 相应的CSS代码如下(附效果图):

  • 04

    最后再美化一下,给a标签左右2em的间距,同时加上竖线背景(mainNavBorder.jpg),并弄上:hover时的变化(这里只是让颜色变化) 在上面的CSS基础上,添加如下代码:

(0)

相关推荐

  • HTML和css怎样制作横排导航条,菜单

    很多小伙伴学习了一段时间的HTML和css,就想自己动手试试制作导航条菜单,不过却没有思路,今天小编我就来分享一下HTML和css制作导航条的实例,大家可以参考参考. 操作方法 01 如图,制作导航条 ...

  • HTML+CSS制作导航条

    今天无意中看到一个网站的导航条,觉得效果还不错,而且制作也很简单,就自己试着用HTML+CSS做了个一模一样的,下面就把导航条的制作方法及步骤分享给大家! 操作方法 01 首先在<body> ...

  • 淘宝店铺导航条怎么设置

    在淘宝创建店铺后设置店铺主页的导航条时是很重要的步骤,设置好首页导航条可以为你的店铺快速设置分类,让用户可一目了然的手动选择直达相应类目,如果懂CSS代码编写更能为店铺增光添彩 操作方法 01 进入我 ...

  • 硕思闪客菜单制作flash导航条图文教程

     如何利用硕思闪客菜单制作flash导航条?具体步骤是怎样的呢? 一:创建完全自定义的flash导航条。 1、打开硕思闪客菜单软件,新建“水平菜单”或者“垂直菜单”, 菜单编辑界面将会出现原始菜单按钮 ...

  • 如何用div制作导航条

    我们在开发网页的时候经常使用到导航条,那么如何利用div制作导航条呢?今天本人就利用div制作一个导航条,同时把制作过程和截图分享给大家,希望对你有所帮助和启发. 操作方法 01 双击打开dreamw ...

  • 如何在淘宝店铺导航条加入自定义页面

    如何在淘宝店铺导航条加入自定义页面呢?比如公司介绍.这个很简单,大家跟我一起来. 操作方法 01 输入账号及密码登陆淘宝店铺. 02 点击卖家中心,在左侧店铺管理下有个店铺装修,点击进去. 03 鼠标 ...

  • 如何利用html制作网页水平导航菜单?

    我们在利用html进行网站制作时,网站头部的水平导航菜单通常是必不可少的,许多初识html的小伙伴对于如何创建水平菜单可能有些疑惑,诸如:如何设置CSS样式达到自己想要的效果.接下来,我就为大家简单介 ...

  • 【DW教程】如何制作水平导航

    水平导航是网站导航最常见的形式,其制作方法比较简单. 我现在详细教你如何制作水平导航. 操作方法 01 打开Adobe Dreamweaver CC 2015. 02 执行菜单栏中的"文件& ...

  • PS制作简洁漂亮的网站导航条方法步骤

    导航栏是网页设计的核心,今天让我们学习如何制作简洁而漂亮的网页导航条的制作方法.效果图如下: 操作方法 01 新建一个520×300的白色背景图 02 改变背景颜色为黑色,在"视图" ...