一般来讲，我们的网页导航栏
是这么个模式来构建
在结构上：
1.首先我们需要给导航栏的div 给个类名 一般为nav
2.然后就是一个无序表格 
3.由于导航栏的文字一般都是链接用来跳转页面 要在li里面包含一个a

<div class="nav">

            <ul>

                <li><a href="#">首页</a></li>

                <li><a href="#">云云商城</a></li>

                <li><a href="#">智慧门店</a></li>

                <li><a href="#">营销平台</a></li>

                <li><a href="#">媒体联盟</a></li>

                <li><a href="#">关于云道</a></li>

            </ul>

        </div>

在样式上： 目前我见过的分为两种
导航栏的文字 裸露 也就是没有滑动门的那种
比如这种

1.首先写网页之前就要取消 网页默认的边距，不然不管你写什么都跟别人的不一样。但是后期就不能这么写了。

* {

        margin: 0;  // *是通配选择器  选择所有的标签

        padding: 0;

    }

2.对于表格中的样式 也就是li中的小点点 要进行初始化
因为不同浏览器对小点点的兼容不支持 而且 小点点也没有那么美观好看 显得很鸡肋

ul {

        list-style: none;

    }

3.对于链接 我们一般都取消下划线的写法 因为不够美观处理如下

a {

        text-decoration: none;

}

1.2.3 三点都是写导航栏之前的初始化问题
接下来就是让表格里面的li 排列在一行，并且使得li垂直居中，而且要控制之间的距离，我们一般用浮动来做比较好，浮动的最大的作用就是让多个div在一行显示 并且脱标 不再占有位置。

 .nav li {

        float: left;

        margin: 0 10px;

    }

4.由于文字长度不能确定 又因为是纯文字没有必要转换为块级元素 所以不能够给a转换成块级元素 赋予宽 和 高（高根据字体大小会自动确定） 把a当作文字一样用的好处是 容易居中对齐 
一般垂直居中对齐用的就是行高 等于高 也就是 line-height == height
5.接下来再给li之间设置间距
有两种写法 在这里使用起来基本没有什么效果的差距
接着复习一下margin 和 padding的区别把 
padding 会撑开盒子 内边距 如图

、

margin会真正意义上的隔开距离 外边距  如图

由于写博客的人是个菜逼 分不清楚用这两个哪个好 大家就问一下大佬们把 问到的也给我说一下哈哈哈哈哈

好了接下来是另一种导航栏的写法 有推拉门的那种
这种写法跟我上述中讲的不太一样 因为在这里面的 a标签 需要转换成块级元素
转换成块级元素的目的呢 就是滑动门的原理了
滑动门的原理简单来讲 是这么个结构

<a>

    <span> </span>

 </a>

通过给 标签a 一个背景图片定位到左端
给标签span 一个背景图片定位到右端
如图

左端绿色部分 作为a的背景 右端绿色部分 作为 span 的背景 （左a 右s）
这样实现起来的话 无论文字有多长都可以滑动刚好是这个样子 大概如微信官网 如图

由于字体不一样长而背景又需要相同的样式 也就是滑动门原理
跟上述纯文字 导航栏不同的是 不能够再利用行高=高来垂直居中这些个a了 
我们在垂直居中的时候就可以利用padding-top 这个属性来操作（我查了微信的代码 也是这么做的）
不再赘述 代码如下

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>微信，是一种生活方式</title>

    <style>

       /*标题导航栏开始*/

       * {

           margin: 0;

           padding: 0;

       }

       body {

           background: url(wx.jpg) repeat-x;

       }

       li {

           list-style: none ;

       }

       a {

           text-decoration: none;

       }

        .nav li {

            float: left;

            margin: 0 40px;

            padding-top:21px;

        }

        .nav a{

            height: 33px;

            background: url("to.png")  no-repeat  left;

            padding-left: 10px;

            color: #fff;

            display: block;

            line-height: 33px;

            font-weight: 700;

            font-size:14px;

        }

        .nav span {

            height: 33px;

            display: block;

            background: url("to.png") no-repeat right;

            padding-right: 10px;

        }

       .nav a:hover {

           background: url("ao.png") no-repeat left;

       }

        .nav a:hover span {

            background: url("ao.png") no-repeat right;

        }

    </style>

</head>

<body>

<div class="top">

    <div class="nav">

    <ul>

        <li><a href="#"><span>首页</span></a></li>

        <li><a href="#"><span>联系电话</span></a></li>

        <li><a href="#"><span>活动中心</span></a></li>

        <li><a href="#"><span>用户指导</span></a></li>

        <li><a href="#"><span>关于我们</span></a></li>

    </ul>

    </div>

</div>

</body>

</html>

网页导航栏 html + css的代码实现的更多相关文章

  1. sencha touch 模仿tabpanel导航栏TabBar的实现代码

    这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpan ...

  2. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  3. iOS开发之 -- 判断tableview/scrollview的滑动方法,及导航栏渐变的实现代码

    开发的过程中,肯定会用到在视图想上滑动的时候,在导航处做一些操作,比如向上滑动的时候,做个动画,出现一个搜索框,或者其他的操作,那么我们怎么来判断它的滑动方向呢? 首先我们应该知道tableview继 ...

  4. <iOS 导航栏>第一节：导航栏透明方法实现代码

      说下导航栏的透明方法:   很多应用需要导航栏随着向上滑动,逐渐从透明变成不透明,很炫酷,大部分应用都在使用导航栏渐变效果,现附上代码然后直接将实现,一会讲下如何来实现,这一部分直接上代码.   ...

  5. 通栏导航栏的制作，综合使用CSS属性，代码不超过30行

    这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...

  6. 如何使用css、布局横向导航栏

    使用css布局横向导航栏,css应用给网页样式的方式,就相当于,给人怎么去穿上衣服,不同的衣服有不同的穿法,这里我们使用的是内联式.在这里 我们可以适当的把值调的大一点,这样我们就可以很容易的对比. ...

  7. 第8天：CSS制作导航栏

    今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...

  8. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  9. CSS 导航栏

    实例: 导航栏 Home News Articles Forum Contact About 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...

随机推荐

  1. 第70节:Java中xml和tomcat

    第70节:Java中xml和tomcat 前言: 哭着也要看完,字数: jdbc crud - statement dao java.sql.Driver The interface that eve ...

  2. 使用本地缓存快还是使用redis缓存好？

    使用本地缓存快还是使用redis缓存好? Redis早已家喻户晓,其性能自不必多说. 但是总有些时候,我们想把性能再提升一点,想着redis是个远程服务,性能也许不够,于是想用本地缓存试试!想法是不错 ...

  3. Winginx nginx 启动提示80端口被占用

    第一步:查看80端口占用信息 win键+R运行命令:cmd-->netstat -aon|findstr "80" 2.结束任务 找到  pin=4272这个进程,将进程结束 ...

  4. springboot打jar包，调用webservice出错

    错误提示 Caused by: java.lang.ClassNotFoundException: com/sun/tools/internal/xjc/api/XJC 在idea中没有问题,但是打成 ...

  5. 深入分析Java I/O的工作机制 （一）

    此篇博客看至许令波的深入分析javaWeb内幕书籍, 此篇博客写的是自己看完之后理解的重点内容,加一些理解,希望对你有帮助. 1.Java的I/O类库的基本架构 先说一下什么是类库:可以说是类的集合, ...

  6. 快速熟悉Matlab

    一 获取数组长度: d = size(X) [m,n] = size(X) m = size(X,dim) [d1,d2,d3,...,dn] = size(X) 二  注释和取消注释. 点击ctrl ...

  7. 阿里巴巴是如何打通 CMDB，实现就近访问的？

    CMDB在企业中,一般用于存放与机器设备.应用.服务等相关的元数据.当企业的机器及应用达到一定规模后就需要这样一个系统来存储和管理它们的元数据.有一些广泛使用的属性,例如机器的IP.主机名.机房.应用 ...

  8. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  9. git版本管理规范

    一.基本开发流程: 二.分支命名 2.1主分支 ① master :随时可供在生产环境中部署的代码 ② dev: 保存当前稳定并且最新的开发分支(多人开发同一分支) 2.2辅助分支 主要用于新功能的并 ...

  10. HBuilder的安装及用法

    一,简介HBuilder 1.1,什么是Hbuilder? HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ru ...