最终效果：

代码：

<!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. 前端Vue项目——购物车页面

    一.加入购物车的两种策略 1.加入购物车接口 在 src/restful/api.js 中写入添加购物车接口: // 加入购物车的接口 export const shopCart = (params) ...

  2. H5开发 连接蓝牙打印机 打印标签（斑马ZR628）

    1.连接蓝牙打印机(先用手机自带蓝牙进行配对),然后绑定出已配对的蓝牙设备(用来选择/切换打印机之用),代码如下 已配对蓝牙设备,中显示的就是已连接的,点击一下即可 代码: <!DOCTYPE ...

  3. 中秋快乐，分享福利脑图：入门spring cloud

  4. 使用VisualVM 进行性能分析及调优

    概述 开发大型 Java 应用程序的过程中难免遇到内存泄露.性能瓶颈等问题,比如文件.网络.数据库的连接未释放,未优化的算法等.随着应用程序的持续运行,可能会造成整个系统运行效率下降,严重的则会造成系 ...

  5. Java-100天知识进阶-GC算法-知识铺（五）

    知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停的来唤醒你记忆深处的知识点. GC算法 1.标记清除算法 优缺点:不需要额外空间,但是遍历空间花费大,而且会产生大量 ...

  6. Ubuntu 16.04上anaconda安装和使用教程，安装jupyter扩展等 | anaconda tutorial on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/23014ca5/,欢迎阅读最新内容! anaconda tutorial on ubuntu 16.04 Guide versio ...

  7. SpringBoot入门-SpringBoot性能优化

    SpringBoot启动优化 显示声明扫包范围: 即不使用@SpringBootApplication默认扫包,使用@ComponentScan(basePackages = { "com. ...

  8. 树莓派4B 更新wiringPi库到2.52的方法的wiringPi库2.5.2版本wiringpi-latest.deb下载

    树莓派4B 更新wiringPi库到2.52的方法 – 树莓派中文站 http://www.52pi.net/archives/1918 通过如上链接可知,需要通过如下命令下载wiringpi-lat ...

  9. 架构设计系列-前端模式的后端（BFF）翻译PhilCalçado

    本文翻译自PhilCalçado的官网:https://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html 对 ...

  10. 解锁云原生 AI 技能 - 开发你的机器学习工作流

    按照上篇文章<解锁云原生 AI 技能 | 在 Kubernetes 上构建机器学习系统>搭建了一套 Kubeflow Pipelines 之后,我们一起小试牛刀,用一个真实的案例,学习如何 ...