代码：

<!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. ssm多数据源配置

    1.在.properties配置文件中 添加第二个数据源信息(type2,driver2, url2,username2,pawwword2) 2.修改spring-context.xml(src/m ...

  2. LOJ #6539 奇妙数论题

    不想咕太久..就随便找个题更一下 LOJ#6539 题意 求题面里那个式子 题解 有一个常用的小式子 $$\sum_{x|a,x|b}\varphi(x)=\gcd(a,b)$$ 用这个式子直接对题面 ...

  3. 基于范围的for循环(C++11)

    C++11新增了一种循环:基于范围的for循环.这简化了一种常见的循环任务:对数组(或容器类,如vector和array)的每个元素执行相同的操作,如下例所示 for语句允许简单的范围迭代:(只遍历, ...

  4. pythonのdjango 缓存

    由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...

  5. HTML和XHTML区别

    HTML和XHTML 可扩展超文本标记语言XHTML(eXtensible HyperText Markup Language)是将超文本标记语言HTML(HyperText Markup Langu ...

  6. Pycharm问题：module 'pip' has no attribute 'main'

    更新pip之后(pip 10 版本之后),Pycharm安装package出现报错:module 'pip' has no attribute 'main' 解决办法如下: 找到Pycharm安装目录 ...

  7. 题解-UOJ 455雪灾与外卖

    Problem \(\mathrm{UOJ~455}\) 题意概要:一根数轴上有 \(n\) 只老鼠与 \(m\) 个洞,每个洞有费用与容量限制,要求每只老鼠要进一个洞且每个洞的老鼠不超过自身的容量限 ...

  8. Google 以 Flutter 作为原生突破口，移动端即将统一了

    Android 的前生今世 Android 系统 Android系统作为全球第一大系统,基于 Java 开发的移动端有着诸多的性能优势. 2018年前 H5 的性能瓶颈和 RN 的停更 导致业界对跨平 ...

  9. python——Pycharm的简单介绍

    一.什么是Pycharm? Pycharm是一种python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提示.自 ...

  10. insert into

    1. INSERT INTO t1(field1,field2) VALUE(v001,v002);            // 明确只插入一条Value 2. INSERT INTO t1(fiel ...