最终效果：

代码：

<!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. 使用system V实现读者写者问题

    #include <stdio.h> #include <sys/sem.h> #include <sys/ipc.h> #include <string.h ...

  2. Paper | Making a "Completely Blind" Image Quality Analyzer

    目录 1. 技术细节 1.1 NSS特征 1.2 选择锐利块来计算NSS 1.3 一张图像得到36个特征 1.4 用MVG建模这36个特征 1.5 NIQE指标 2. 实验 质量评估大佬AC Bovi ...

  3. Docker入门之安装与使用

    1. 安装(windows) win7.win8以及win10家庭版 等需要利用 docker toolbox 来安装,国内可以使用阿里云的镜像来下载,下载地址:http://mirrors.aliy ...

  4. JVM＆NIO＆HashMap简单问

    JVM&NIO&HashMap简单问 背景:前几天在网上看到关于JVM&NIO&HashMap的一些连环炮的面试题,整理下以备不时之需. 一.JVM Java的虚拟机的 ...

  5. Windows7运行python3，提示缺少api-ms-win-crt-runtime-l1-1.0.dll

    一.实验环境 1.Windows7x64_SP1 二.操作步骤 2.1 python官网下载python3.6后,安装.运行,提示如下错误: 2.2 解决方式 去微软官网下载安装:KB2999226补 ...

  6. pixijs shader 扫光加强版

    pixijs shader 扫光加强版 const app = new PIXI.Application({ transparent: true }); document.body.appendChi ...

  7. poj-2803 Defining Moment

    Defining Moment Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 1660   Accepted: 760 De ...

  8. Django学习笔记（11）——开发图书管理页面

    一,项目题目: 开发图书管理页面 该项目主要练习Django对多个数据库进行增删改查的操作. 二,项目需求: 基础需求:75% 1. 列出图书列表.出版社列表.作者列表 2. 点击作者,会列出其出版的 ...

  9. HTML教程详解

    HTML学习笔记 目录 一.html简介 1.html是什么? 2.html能做什么(html的作用)? 3.html书写规范 二.html基本标签 1.标签的语法 2.标签的分类 3.常用标签: 1 ...

  10. 2019-11-23-WPF-使用-RawInput-接收裸数据

    原文:2019-11-23-WPF-使用-RawInput-接收裸数据 title author date CreateTime categories WPF 使用 RawInput 接收裸数据 li ...