代码：

<!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. 函数语法：原生js判断某个元素是否有指定的class名的几种方法

    var aLi = document.querySelectorAll('#tabs li'); for(var i = 0;i <p.length;i++){ //第一种方法,用classLi ...

  2. 多个div实现随意拖拽功能

    鼠标事件 mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute.切记不可使用margin-top:10px;而应该使用top:10p ...

  3. Linux二进制安装apache2.4.25

    Linux二进制安装apache2.4.25 安装环境:CentOS 6.2 先检查是否安装了Apache 如通是通过rpm包安装的话直接用下面的命令:rpm -q httpd 也可以使用如下两种方法 ...

  4. Mac终端命令自动补全

    在这里我们首先说一下mac终端执行命令的时候,不会像在windows系统中安装的linux一样支持自动补全,需要自己去调试 步骤如下: (1)打开终端输入nano .inputrc(这里一定要注意na ...

  5. 软件测试面试必问--bug交互流程

    目前市场主要用的bug管理工具:禅道.jira.QC.bugfree等,当然也有自己公司开发的. 不过不管哪一种工具,核心交互流程都是差不多的,只是字段的名称不一样而已,参考如下两张示意图: 这是前几 ...

  6. php跨域问题记录

    记录跨域问题 一.问题 在控制层加了如下代码: header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN'] ); header('Ac ...

  7. MailKit系列之附件分离

    本文主要谈谈实现思路,不提供完整代码 一.分离基础 1.MIME邮件的multipart类型 引用文章:https://blog.csdn.net/wangyu13476969128/article/ ...

  8. node命令行工具—cf-cli

    音乐分享: 钢心 - <龙王> 初喜<冠军>后喜<龙王> (PS:听一次钢心乐队的演出后采访才知道 “龙王”隐喻的是一起喝酒的老铁....) ——————————— ...

  9. PHP常用方法整理

    最近开始写PHP项目,各种常用的方法简单整理一下,以备后用. 1.  Xml转Json json_decode(json_encode(simplexml_load_string($xml, 'Sim ...

  10. GitLab实战操作指南

    一.Git原理 1.Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). 2.Git有什么特点? 简单来说就是:高端大气上档次! 3.GIt与SVN区别 SVN管理: 属于集中式 ...