css如何制作横向导航

制作html页面，导航菜单是必不可少的，那如何制作横向导航菜单呢？
思路：创建<ul>标签，然后在<ul>标签里面创建<li>标签，最后设置<li>标签为浮动。

操作方法

  • 01

    新建html页面 打开html编辑软件，新建一个html页面。如图：

  • 02

    添加导航标签 在<body>标签里新建一个<ul></ul>标签，然后在<ul>标签里添加几个<li></li>标签。如图：

  • 03

    在<li>标签内添加文字。 在新建的<li>添加要显示的内容。如图：

  • 04

    创建样式标签 在<title>标签后新建一个<style type="text/css"></style>标签。

  • 05

    创建横向导航的样式 在<style>标签里添加一个样式类为：.nav li{}，然后再.nav li类中设置样式背景颜色为红色，浮动为左浮动，内边框上下为8px左右为15px，列表属性为none，字体颜色为白色。 样式代码为： .nav li{   background-color: red;   padding: 8px 15px;    float: left;   list-style: none;   color:#fff;  }

  • 06

    引用样式类。 在<ul>标签内添加 class="nav"，就可以让nav下的<li>标签引用到设置好的样式类。如图：

  • 07

    查看效果。 把html文件保存后，使用浏览器打开即可看到横向导航菜单效果。如图：

  • 08

    所有代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向导航菜单</title> <style type="text/css"> .nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; } </style> </head> <body> <ul class="nav"> <li>首页</li> <li>新闻</li> <li>公司产品</li> <li>关于我们</li> <li>公司介绍</li> </ul> </body> </html>

赞 (0)

相关推荐

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

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

  • 用UL+LI+CSS制作横排导航

    操作软件:Adobe Dreamweave CS6,通用其他版本.目的:掌握无序列制作横向导航. 操作方法 01 第一步,打开软件Adobe Dreamweave CS6,创建一个新的HTML,如图, ...

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

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

  • css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师, 学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的 ...

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

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

  • PPT怎么制作横向滚动的字幕?

    ppt中想要制作动态字幕,该怎么制作横向滚动的字母呢?下面我们就来看看详细的教程. 1.打开PPT2010,在PPT中插入两个文本框,输入连续的文字,设置好文字格式,然后调整文本框与PPT页面等宽. ...

  • 利用excel制作横向条形图的方法

    图表来显示数据是我们最常用的一种图形化,比较直观,那么如何利用excel制作横向条形图呢?现在就把制作的步骤和截图分享给大家,希望对你有所帮助. 方法: 1.首先双击桌面上的excel2010,启动该 ...

  • 电脑word文档怎么制作横向竖向混排文字

    电脑word文档怎么制作横向竖向混排文字

    想要制作横向竖向混排的文字内容.我们就需要使用到文本框这个功能了,今天小编就告诉大家电脑word文档怎么制作横向竖向混排文字.具体如下:1. 首先我们需要在电脑中打开word文档.2. 进入主界面之后 ...

  • 如何在PPT中制作横向滚动的字幕

    如何在PPT中制作横向滚动的字幕

    我们经常会在电视上看到屏幕下方从右到左不停滚动的字幕,在PPT中即可实现,今天就跟大家介绍一下如何在PPT中制作横向滚动的字幕的具体操作步骤.1. 首先打开电脑上的PPT2010软件,然后先插入两个文 ...