代码：

<!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. Ubuntu 划词翻译

    在 Windows 下用 QTranslate 可以划词翻译,调用谷歌或百度翻译引擎,不需要本地词典. 在 Ubuntu 下可以自己写脚本实现一个简陋的版本. 步骤如下: 安装 xsel,sudo a ...

  2. C# 学习之路--百度网盘爬虫设计与实现（一）

    百度网盘爬虫 现在市面上出现了很多网盘搜索引擎,写这系列博文及爬虫程序的初衷: 更方面的查找资源 学习C# 学习爬虫的设计与实现 记录学习历程 自我监督 能力有限,如有不妥之处,还请各位看官点评.同在 ...

  3. pandas基础用法

    首先生成一维数组 data = pd.Series([1,2,3,4,5,6,7,8,9])data运行结果 data.head()#默认取前五条,当然也可以加参数 data.tail()#默认取前五 ...

  4. DBA_TABLES ALL_TABLES USER_TABLES

    DBA_TABLES >= ALL_TABLES >= USER_TABLES DBA_TABLES意为DBA拥有的或可以访问的所有的关系表. ALL_TABLES意为某一用户拥有的或可以 ...

  5. HDU - 1050

    wa了5遍?!! (1)前4遍,思路没简化,企图模拟整个过程,但是调用sort函数时由于没有把奇数的屋子和偶数的屋子统一,排序出了问题. 思路:遍历n段,每次只扫未被标记过的一段,ans++并且从该段 ...

  6. Maven - pom中的<repository> <pluginRepositories>

    总结: <repository> 允许我们可以在POM中配置其它的远程仓库.这样做的原因有很多,比如你有一个局域网的远程仓库,使用该仓库能大大提高下载速度,继而提高构建速度,也有可能你依赖 ...

  7. RocketMq发送消息出现com.alibaba.rocketmq.client.exception.MQBrokerException: CODE: 2 DESC: [TIMEOUT_CLEAN_QUEUE]broker busy, start flow control for a while, period in queue: 201ms, size of queue: 1

    最近对系统进行压测,发现发送消息到消息队列的时候出现如下错误: com.alibaba.rocketmq.client.exception.MQBrokerException: CODE: 2  DE ...

  8. oracle insert into 插入多组数据方法总结

    网上好多oracle 的文章,多是以oracle开头,内容确实其他sql,一幅气死人不偿命的嘴脸着实让人难受. 今天就更新点oracle 使用insert into插入数据的方式: 1.oracle ...

  9. java学习笔记08-switch case语句

    switch是一种选择语句,可以通过匹配某个条件,来执行某块代码 switch(expression){ case value: break;//可选 default://可选 //语句 } swit ...

  10. Python 正则表达式 flags 参数

    flags参数 re.I IGNORECASE 忽略字母大小写 re.L LOCALE 影响 “w, “W, “b, 和 “B,这取决于当前的本地化设置. re.M MULTILINE 使用本标志后, ...