最终效果：

代码：

<!DOCTYPE html>

<html>

<head>

    <title>#练习册二</title>

    <style type="text/css">

        ul{

            list-style-type: none;

            margin: 0;

            padding: 0;

            width: 20%;

            background-color: #f1f1f1;

            border: 1px solid #555;  /*添加边框*/

        }

        li{

            text-align: center;

            border-bottom: 1px solid #555;

        }

        li:last-child{

            border-bottom: none;    /*去掉最后一个格子的重复*/

        }

        li a.green{

             background-color: #4CAF50;

              color: white;

        }

        li a{

            display: block;

            color: #000;

            padding: 8px 16px;

            text-decoration: none;

        }

        li a:hover{

            background-color: #555;

            color: white;

        }

    </style>

</head>

<body>

<ul>

    <li><a class="green" href="#home">主页</a></li>

    <li><a href="#news">新闻</a></li>

    <li><a href="#contact">联系</a></li>

    <li><a href="#about">关于</a></li>

</ul>

</body>

</html>

参考链接：https://www.runoob.com/css/css-navbar.html

CSS制作导航栏的更多相关文章

  1. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  2. css制作导航栏的上下三角

    1)先完成一个导航条 <style type="text/css"> .nav-ul{ list-style: none; } .nav-ul li{ width: 1 ...

  3. 巧妙使用checkbox制作纯css动态导航栏

    前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

  4. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  6. css3制作导航栏

    <!doctype html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. C3制作导航栏分割线及立体风格

    //首先写一个导航栏样式 .nav{    width:560px;    height: 50px;    font:bold 0/50px Arial;    text-align:center; ...

  8. Css之导航栏学习

    Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...

  9. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

随机推荐

  1. python数据分析教程大全

    第一篇:Anaconda安装和使用 第二篇:Jupyter norebook使用 第三篇:pandas教程 第四篇:numpy教程 第五篇:Matplotlib教程 第六篇:实战项目 期待吗?(微笑脸 ...

  2. VMware 自动开多台虚拟机脚本

    d:cd "D:\WinInstall\VMware\VMware Workstation"ECHO "start vm1"vmrun -T ws start ...

  3. Mac操作：Mac系统移动鼠标显示桌面（移动鼠标到角落）

    很多朋友都发现,有的人在用Mac的时候,鼠标一划就可以显示桌面,或者显示Launchpad.其实很简单,下面就介绍这个方法. 首先打开系统偏好设置: 然后点击红色圈中的图标:MissionContro ...

  4. Flume笔记

    flume自定义拦截器:实现Interceptor接口flume自定义source:继承AbstractSourceflume自定义sink:继承AbstractSink azkaban:任务调度工具 ...

  5. eclipse激活jrebel

    1.原本jrebel已经激活了,某天突然失效了.报错如下: JRebel: ERROR Failed to obtain seat. Unable to connect to license serv ...

  6. linux 链接mysql并覆盖数据

    --链接mysql 命令格式: mysql -h 主机地址 -u 用户名 -p --按回车输入密码 --在服务器里登录到数据库里 ,使用某个库,gtmc 代表数据库名称 use gtmc --覆盖数据 ...

  7. linux (centos)增删改查用户命令

    1,查看用户 cat /etc/passwd 2,删除用户 userdel 用户名 3,查看组 cat /etc/group 4,删除组 groupdel 组名 5.查看系统中有哪些用户: cut - ...

  8. WPF 通过EventTrigger修改鼠标样式

    难倒是不难. 除去eventtrigger之外还有别的触发器可以实现. 这个主要是难在对xaml的数据理解上. 代码实现 <Button Content=" > <Butt ...

  9. Ext.NET-WebForm之TreePanel组件

    开启VS2017创建WebForm项目 打开NuGet搜索Ext.NET并安装 安装后可见 还自动帮我们创建了一个页面和文件夹项 打开自动添加的页面Ext.NET.Default.aspx,运行项目出 ...

  10. windows 下安装MongoDB

    一:下载mongodb安装包 下载地址:https://www.mongodb.com/download-center/community 这里推荐下载msi的安装包 二:安装mongodb 双击下载 ...