导航条

迈不过友情╰ 2022-05-03 02:30 234阅读 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 条评论，234人围观）

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

相关阅读

相关导航条动态居中

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

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

相关简单通用的导航条

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

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

相关水平导航条实现总结

首先最终实现的图如下: ![Center][] html代码如下： <span style="font-size:14px; font-family:

分手后的思念是犯贱/ 2022年08月05日 13:27/ 0 赞/ 163 阅读

相关 Bootstrap导航条

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

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

相关导航条的制作

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

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

相关新版导航条stacknavigator

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

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

相关导航条

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

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

相关 jquery、div+css导航条

<style type="text/css"> content{width:980px;margin:0 auto;} nva

r囧r小猫/ 2022年04月05日 04:15/ 0 赞/ 244 阅读

相关 Bootstrap3-导航条

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

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

相关导航条样式代码

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

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