最终效果：

代码：

<!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. Linux环境变量配置方法

    Linux上环境变量配置分为设置永久变量和临时变量两种.环境变量设置方法同时要考虑环境Shell类型,不同类型的SHELL设置临时变量方法和设置永久变量对应的配置文件不同.Linux环境变量本身配置过 ...

  2. MySQL实战45讲学习笔记：第三十八讲

    一.本节内容 我在上一篇文章末尾留给你的问题是:两个 group by 语句都用了 order by null,为什么使用内存临时表得到的语句结果里,0 这个值在最后一行:而使用磁盘临时表得到的结果里 ...

  3. Spring框架spring-web模块中的RestTemplate类详解

    RestTemplate类是spring-web模块中进行HTTP访问的REST客户端核心类.RestTemplate请求使用阻塞式IO,适合低并发的应用场景. 1. RestTemplate类提供了 ...

  4. umi+dva+antd新建项目

    首先全局安装dva+umiumi:npm install -g umidva:npm install -g dva-cli 通过脚手架创建项目 一: mkdir myapp && cd ...

  5. Docker 下开发安装hyperf

    Docker 下开发hyperf # 下载并运行 hyperf/hyperf 镜像,并将镜像内的项目目录绑定到宿主机的 /tmp/skeleton 目录 docker run -v /tmp/skel ...

  6. 「ASCII 流程图」工具——Graph Easy

    https://juejin.im/post/5a09c43451882535c56c6bbf 「ASCII 流程图」工具——Graph Easy // 1. brew install graphvi ...

  7. 【UOJ#390】【UNR#3】百鸽笼（动态规划，容斥）

    [UOJ#390][UNR#3]百鸽笼(动态规划,容斥) 题面 UOJ 题解 发现这就是题解里说的:"火山喷发概率问题"(大雾 考虑如果是暴力的话,你需要记录下当前每一个位置的鸽笼 ...

  8. mysql error 1364 Field doesn't have a default values

    https://stackoverflow.com/questions/15438840/mysql-error-1364-field-doesnt-have-a-default-values. us ...

  9. ASP.NET Core 进程外(out-of-process)托管

    ASP.NET Core 进程外(out-of-process)托管 在本节中,我们将讨论 ASP.NET Core 中的Out Of Process Hosting. ASP.NET Core 进程 ...

  10. PIE SDK水深提取算法

    1.算法功能简介 水深提取算法就是根据输入的水位设为d,dem设为h 这两个数据做一个差值运算,则水深计算公式为d-h;本示例中的是基于洞庭湖提取的水体矢量文件的范围来计算dem和水位25米的差值. ...