代码：

<!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. element-ui多选框模糊搜索输入文字闪动问题

    .el-select__tags { .el-select__input { width: 50px !important; } } 添加这段代码即可 <el-select v-model=&q ...

  2. jira7.3.6的安装步骤

    准备环境:jira7.3需要jdk1.8 1.下载jira需要的版本 https://www.atlassian.com/software/jira/download 2.上传atlassian-ji ...

  3. NB群友

    链接:https://ac.nowcoder.com/acm/contest/625/A来源:牛客网 时间限制:C/C++ 2秒,其他语言4秒 空间限制:C/C++ 131072K,其他语言26214 ...

  4. 记录一个EF连接查询的异常：the entity or complex type 'x' cannot be constructed in a linq to entities query

    问题解决连接:https://stackoverflow.com/questions/5325797/the-entity-cannot-be-constructed-in-a-linq-to-ent ...

  5. No grammar constraints (DTD or XML Schema) referenced in the document.

    问题描述 web.xml 使用 Servlet4.0 版本,No grammar constraints (DTD or XML Schema) referenced in the document. ...

  6. 【python】使用flask制作小型页面的关键点总结

    目录结构 app.py web代码 store.db 存储信息的轻量数据库,用的sqlite3 schema.sql 数据库的初始化建表语句 settings.cfg 配置信息 static/styl ...

  7. 生产宕机dunp配置

    修改线程数 <self-tuning-thread-pool-size-min>100</self-tuning-thread-pool-size-min> <self- ...

  8. 2018-2019-2 网络对抗技术 20165323 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165323 Exp2 后门原理与实践 一.实验要求 (3.5分) (1)使用netcat获取主机操作Shell,cron启动 (0.5分) (2)使用soc ...

  9. solution for python can not import local module

    blog 这次遇到的问题是sys.path的输出不包含'',导致无法import当前文件和文件夹 When no ._pth file is found, this is how sys.path i ...

  10. rpm和yum软件管理

    rpm简介 数据库管理工具,通过读取数据库,判断软件是否安装,如已安装可读取出来所有文件的所在位置等,并可以实现删除这些文件. rpm:RPM is Redhat Package Manager(递归 ...