代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>导航条</title>

    <style type="text/css">

        .menu{

            list-style: none;

            padding:0;

            margin:0;

            width:960px;

            height:40px;

            background-color:#55a8ea;

            position:relative;

        }

        .menu li{

            width:100px;

            height:40px;

            float:left;

        }

        .menu li a{

            display:block;

            height:40px;

            width:100px;

            line-height:40px;

            text-align:center;

            font-size:14px;

            font-family:"Microsoft YaHei";

            text-decoration:none;

            color:#ffff;

        }

        .menu li a:hover{

            background-color:#00619f;

        }

        .menu .new{

            width:30px;

            height:20px;

            background:url("images/new3.png") no-repeat;

            position:absolute;

            left:433px;

            top:-10px;

        }

    </style>

</head>

<body>

<ul class="menu">

    <li><a href="#">首页</a></li>

    <li><a href="#">网站建设</a></li>

    <li><a href="#">程序开发</a></li>

    <li><a href="#">网络营销</a></li>

    <li><a href="#">企业VI</a></li>

    <li><a href="#">案例展示</a></li>

    <li><a href="#">联系我们</a></li>

    <li class="new"></li>

</ul>

</body>

</html>

页面效果：

css 制作导航条布局的更多相关文章

  1. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  2. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  3. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  4. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  5. css 导航条 布局

    导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...

  6. 纯CSS实现下拉菜单及下拉容器等（纯CSS实现导航条及导航下拉容器）

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  7. CSS水平导航条和纵向导航条

    问题描述:         使用CSS制作水平导航条和纵向导航条   问题解决:        (1)水平导航条            1.1 效果预览:                   1.2 ...

  8. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

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

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

随机推荐

  1. 读spring源码(一)-ClassPathXmlApplicationContext-初始化

    工作来几乎所有的项目都用到了spring,却一直没有系统的读下源码,从头开始系统的读下吧,分章也不那么明确,读到哪里记到哪里,仅仅作为个笔记吧. 先看ClassPathXmlApplicationCo ...

  2. static关键字特点

    目录 static关键字特点 静态代码块 static修饰与非static修饰的区别 static关键字特点 随着类的加载而加载 static修饰的变量和方法都会放在方法区中静态区,是属于类的. 静态 ...

  3. 【转】一文掌握 Linux 性能分析之 CPU 篇

    [转]一文掌握 Linux 性能分析之 CPU 篇 平常工作会涉及到一些 Linux 性能分析的问题,因此决定总结一下常用的一些性能分析手段,仅供参考. 说到性能分析,基本上就是 CPU.内存.磁盘 ...

  4. Access提示Insert Into 语法错误解决办法总结

    1.关键字:如果你的数据库的表的设计包含了Access包含的关键字,则在插入的时候会出现“Insert Into 语法错误” 例如: string sqlText = String.Format(&q ...

  5. HTTP协议详解（二）

    接着第一篇学习.... 5 头域(首部) 每个头域由一个域名,冒号(:)和域值三部分组成.域名是大小写无关的,域值前可以添加任何数量的空格符,头域可以被扩展为多行,在每行开始处,使用至少一个空格或制表 ...

  6. linux常用命令使用方法

    一.常用的分析服务器日志命令 1.查看有多少个IP访问: awk '{print $1}' log_file|sort|uniq|wc -l 2.查看某一个页面被访问的次数: grep "/ ...

  7. 饮冰三年-人工智能-Python-25 Django admin

    简介:一个关于后台数据库管理的工具 1:创建一个新的项目 2:设置models,并通过命令生成数据库表 from django.db import models class Book(models.M ...

  8. IntelliJ IDEA 创建 Java包

    一.创建包 1.在已有项目的"src"文件夹 -> 右键 -> New -> Package 2.命名包名,注意命名规范 二.创建类 1.新建包成功之后,在包上右 ...

  9. SpringBoot动态配置加载

    1.SpringBoot对配置文件集中化进行管理,方便进行管理,也可以使用HttpClient进行对远程的配置文件进行获取. 创建一个类实现EnvironmentPostProcessor 接口,然后 ...

  10. Tutorial for MI5 ! flash MI5 to Native Anriod 9

    First ,you should download all zips you need Anriod 9.0 rom link:https://drive.google.com/uc?id=1 .. ...