导航条

迈不过友情╰ 2022-05-03 02:30 282阅读 0赞

**用无序列表编写的简单一级导航条**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>列表应用</title>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;
    }**//清除默认样式**
    .nav{
    	list-style-type:none;
    	background-color:#6FF;
    	width:500px;
    	overflow:hidden;
         margin:100px auto;
    }
    .nav li{
    	float:left;
    }
    
    .nav li a{
    	display:block;
    	width:100px;
    	text-align:center;
    	text-decoration:none;
    }
    .nav li a:hover{
    	background-color:#C00;
    }
    </style>
    
    
    </head>
    
    <body>
    <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">娱乐</a></li>
    <li><a href="#">体育</a></li>
    <li><a href="#">财经</a></li>
    </ul>
    </body>
    </html>
    效果如下图

![导航条][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70]: /images/20220503/0c8e5ebdfeb3487f8dfeb815a99c9a05.png

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关【Bootstrap】013-组件：导航、导航条、路径导航

目录一、导航 1、概述 2、标签页代码演示：运行结果： 3、胶囊式标签页代码演示：运行结果： 4、两端对齐的标签页代码演示：运行结果：

Dear 丶/ 2023年10月05日 11:08/ 0 赞/ 10 阅读

相关导航条动态居中

导航条动态居中效果： ![在这里插入图片描述][20200907172208399.gif_pic_center] 备注都在代码里了，各位看官请自便。代码

落日映苍穹つ/ 2022年12月04日 09:17/ 0 赞/ 203 阅读

相关简单通用的导航条

1、下划线效果 ![20160707175136947][] <!doctype html> <html> <head> <

谁践踏了优雅/ 2022年09月23日 08:27/ 0 赞/ 176 阅读

相关 Bootstrap导航条

一、默认的导航条在制作一个基础导航条时，主要分以下几步： 1、在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”；

川长思鸟来/ 2022年06月17日 10:17/ 0 赞/ 303 阅读

相关导航条的制作

要点： 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上

川长思鸟来/ 2022年06月14日 06:24/ 0 赞/ 267 阅读

相关新版导航条stacknavigator

项目目录 ![20180611141828354][] index.js是入口文件这是index。js里的内容： import { AppRegistr

川长思鸟来/ 2022年05月23日 12:25/ 0 赞/ 252 阅读

相关 js、jquery菜单导航条

漂亮的导航条 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

怼烎@/ 2022年05月09日 10:33/ 0 赞/ 297 阅读

相关导航条

用无序列表编写的简单一级导航条  <!doctype html> <html> <head>

迈不过友情╰/ 2022年05月03日 02:30/ 0 赞/ 283 阅读

相关 Bootstrap3-导航条

1. 定义导航条  <div class="navbar nav-bar-default"> <ul c

╰+攻爆jí腚メ/ 2021年09月19日 02:34/ 0 赞/ 414 阅读

相关导航条样式代码

参考博文:[这里写链接内容][Link 1] <!DOCTYPE html> <html lang="zh-CN"> <head> <

绝地灬酷狼/ 2021年09月17日 07:06/ 0 赞/ 415 阅读