导航菜单nav:
1.使用列表标签<ul>
2.使用浮动布局float
3.使用超链接标签<a>:要使用<a>标签的margin外边距,需要让<a>标签成为一个块级元素,添加display:block属性

标签代码

<div class="header">
           
                <div class="logo">
                logo
                </div>

                <div class="nav">
                    <ul>
                        <li><a href="#">one</a></li>
                        <li><a href="#">two</a></li>
                        <li><a href="#">three</a></li>
                        <li><a href="#">foue</a></li>
                        <li><a href="#">siuew</a></li>
                        <li><a href="#">fiev</a></li>
                    </ul>
                </div>

        </div>

样式代码

nav{
    float:right;
    height: 100px;
    width: 80%;
    margin: auto;
}
.nav ul{
    padding: 0px;
}
.nav ul li{
    float: right;
}
.nav ul li a{
    display: block;
    padding:20px;
    background-color: red;
    margin-right: 10px;
    margin-top: 10px;
}
.nav ul li a:hover{
    background-color: rgba(100,100,100,0.2);
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius: 5px;
}

html-制作导航菜单的更多相关文章

  1. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  2. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  3. 制作导航菜单分隔线的总结:用css3

    经过百度统计中国中使用谷歌浏览器比较多,我很奇怪,我身边的同事很少用谷歌,唯一我用谷歌的原因就是看上它调试能力和模拟手机. 下面是我个人制作的 预览用谷歌浏览器. <!doctype html& ...

  4. ul制作导航菜单

    首先上图,最终效果: HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  5. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

  6. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

  7. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  8. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  9. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. 分类导航菜单的制作(附源码)--HTML

    不多说,直接贴代码哈!有疑问,可追加评论哈! demo.html: <!DOCTYPE html><html> <head> <title>分类导航菜单 ...

随机推荐

  1. 关于Python的web框架

    uliwebhttp://git.oschina.net/limodou/uliweb uliweb 吸取了其他框架的经验,集成了orm.总的来说一般.这个安装后有个exe文件,命令行工具.不绿色.个 ...

  2. cocos2dx 帧动画的两种创建方式

    看了好几天cocos2dx的帧动画,现在才有点眉目,为了高效期间我们一般会用到 精灵帧缓存(CCSpriteFrameCache) 和动画缓存(CCAnimationCache) .大体的操作步骤: ...

  3. java---Swing界面开发总结

    一.java的图形界面 1.awt    java.awt jdk1.4之前推出的图形界面,用c/c++编写,跨平台性不好 2.swing  javax.swing jdk1.4时推出的图形界面,跨平 ...

  4. Android UI 优化——使用HierarchyViewer工具

    先说些题外话,希望路过的各位支持,博主有幸成为2013年度博客之星的候选人,期待你的一票,谢谢. 投票猛击: http://vote.blog.csdn.net/blogstaritem/blogst ...

  5. MVC3.0学习笔记之元模型元数据ModelMetaData以及模型元数据提供系统

    模型元数据ModelMetaData是MVC中很重要的概念,它包括但不仅限于 模型的类型,模型包含了哪些属性,属性都是什么类型的,属性上都有什么特性. ASP.NET MVC3.0 提供了默认的模型元 ...

  6. 谈PHP中信息加密技术

    同样是一道面试答错的问题,面试官问我非对称加密算法中有哪些经典的算法? 当时我愣了一下,因为我把非对称加密与单项散列加密的概念弄混淆了,所以更不用说什么非对称加密算法中有什么经典算法,结果当然也让面试 ...

  7. MyBatis知多少(13)MyBatis如何解决数据库的常见问题

    在现代软件项目中数据库通常被认为是遗留组件.它们一直以来都被认为难以使用,不论是出于技术的还是非技术的原因.大多数软件开发人员宁可从头开始完完全全地重建一个数据库. 如果数据库是遗留下来的,相信一些开 ...

  8. IOS APP上下黑边问题

    网上的一种是一个问题, 更换launchImage 后 APP在iPhone5下出现黑边. 原因是:我将Jpg(640*1136)的图片 强制改为Png(640*1136),导致APP出现黑边.

  9. 爆料喽!!!开源日志库Logger的使用秘籍

    日志对于开发来说是非常重要的,不管是调试数据查看.bug问题追踪定位.数据信息收集统计,日常工作运行维护等等,都大量的使用到.今天介绍著名开源日志库Logger的使用,库的地址:https://git ...

  10. andorid jni入门教程一之helloworld

    开发环境:windows2007, eclipse 做anroid越深发现用到底层开发的时候越多,但是我以前也没有搞过,因此现在打算好好学习学习.先从最简单的做起.正所谓万事开头难啊. 搞了近一天终于 ...