最终效果：

代码：

<!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. 【ECNU620】数学题（结论题）

    点此看题面 大致题意: 求\((n-1)!\ mod\ n\)的值. 大力猜结论 首先,看到样例,我们可以猜测: 当\(n\)为质数时,答案为\(n-1\). 当\(n\)为合数时,答案为\(0\). ...

  2. 洛谷P3157 [CQOI2011]动态逆序对

    题目大意: 给定\(1\)到\(n\)的一个排列,按照给定顺序依次删除\(m\)个元素,计算每个元素删除之前整个序列的逆序对数量 基本套路:删边变加边 那么我们不就是求满足\(pos_i<pos ...

  3. Sharding-JDBC:查询量大如何优化？

    主人公小王入职了一家刚起步的创业公司,公司正在研发一款App.为了快速开发出能够投入市场进行宣传的版本,小王可是天天加班到很晚,忙了一段时间后终于把第一个版本赶出来了. 初期功能不多,表也不多,用的M ...

  4. 学习linux开发需要的基础

    1.常见的通信协议I2C和SPI,熟悉. 还有时钟. 中断等概念也都了解了. 所以你现在应该先学一下Linux常用的一些命令,网上搜一下,有很多总结的文章,大概看一下用法,想深入学习的话,可以看鸟哥的 ...

  5. GC原理---对象可达判断

    对象可达判断 引用计数算法(Reference Counting) 给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值加1:当引用失效时,计数器减1:任何时刻计数器都为0的对象就是不可能再被 ...

  6. .net core session部分浏览器或移动客户端不可用

    .net core session使用有很多文章,这里不再赘述. 问题现象为大部分浏览器或者移动客户端(例如微信.支付宝.钉钉)等都可以正常使用.但部分支付宝用户及钉钉用户确无法使用. 写入后读取不到 ...

  7. spring boot 开启https

    1.生成证书 keytool -genkey -alias tomcat -keyalg RSA -keystore E:/https.keystore 将生成好的证书放在项目根目录即可 2 修改配置 ...

  8. mybatis的参数传递

    mybatis的参数传递分为两种:1.单参数传递  2.多参数传递 单参数 mybatis会直接取出参数值给Mapper文件赋值 例子如下: 1.Mapper文件内容如下: public void d ...

  9. 混合 App 打开 H5 调试开关

    背景 随着现在移动端设备的硬件性能的提高,现在web页面的体验逐渐变得可以接受,现在很多的应用都采用的Hybrid开发模式,一方面有利用了原生设备的API的优势(性能好.用户体验好),另一方面利用了w ...

  10. C#编辑xml文件

    string path = @"C:\Users\Administrator\Desktop\无人智能便利店\install\收银端\XMLRFI.xml"; XmlDocumen ...