HTML&CSS基础-导航条

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>导航条</title>

        <style type="text/css">

            /**

             *     清除默认样式

             */

            *{

                margin: 0;

                padding: 0;

            }

            /**

             *     设置ul

             */

            .nav{

                /*去除项目符号*/

                list-style: none;

                /*未ul设置一个背景颜色*/

                background-color: blue;

                /**

                 *     设置宽度

                 *     在IE6中，如果未元素指定了一个宽度，这会默认开启haslayout

                 */

                width: 1000px;

                /*设置元素居中*/

                margin: 50px auto;

                /*解决子元素浮动后高度塌陷问题*/

                overflow: hidden;

            }

            .nav li{

                /*设置li元素向左浮动*/

                float: left;

                /*未li元素指定宽度*/

                width: 12.5%;

            }

            .nav a{

                /*将内联元素转换为块元素*/

                display: block;

                /*未a指定一个宽度是父元素li的100%*/

                width: 100%;

                /*设置文字居中*/

                text-align: center;

                /*设置一个上下内边距*/

                padding: 5px 0;

                /*去除下划线*/

                text-decoration: none;

                /*设置字体*/

                font-family: "curlz mt","华文彩云","arial", "微软雅黑";

                /*设置字体颜色*/

                color: white;

                /*设置加粗*/

                font-weight: bold;

            }

            .nav a:hover{

                background-color: red;

            }

        </style>

    </head>

    <body>

        <!--

            创建导航条结构

        -->

        <ul class="nav">

            <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>

            <li><a href="#">博客</a></li>

            <li><a href="#">联系我们</a></li>

        </ul>

    </body>

</html>

二.浏览器打开以上代码渲染结果

javascript函数以及作用域简介的更多相关文章

  1. [译]JavaScript:函数的作用域链

    原文:http://blogs.msdn.com/b/jscript/archive/2007/07/26/scope-chain-of-jscript-functions.aspx 在JavaScr ...

  2. javascript 函数和作用域（闭包、作用域）（七）

    一.闭包 JavaScript中允许嵌套函数,允许函数用作数据(可以把函数赋值给变量,存储在对象属性中,存储在数组元素中),并且使用词法作用域,这些因素相互交互,创造了惊人的,强大的闭包效果.[upd ...

  3. JavaScript函数之作用域 / 作用链域 / 预解析

    关于作用域和作用链域的问题,很多文章讲的都很详细,本文属于摘录自己觉得对自己有价值的部分,留由后用,仅供参考,需要查看详细信息请点击我给出的原文链接查看原文件 做一个有爱的搬运工~~ -------- ...

  4. JavaScript函数及作用域

    知识内容: 1.JavaScript函数 2.JavaScript全局函数及特殊函数 3.JavaScript作用域 4.本节练习 参考资料:<JavaScript高级程序设计> 一.Ja ...

  5. JavaScript函数变量作用域

    变量作用域 在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量. 如果两个不同的函数各自申明了同一变 ...

  6. javascript 函数和作用域（函数，this）（六）

    重点. 一.函数 1.函数介绍 函数是一块JavaScript代码,被定义一次,但可执行和调用多次.JS中的函数也是对象,所以JS函数可以像其他对象那样操作和传递,所以我们也常叫JS中的函数为函数对象 ...

  7. javascript 函数及作用域总结介绍

    在js中使用函数注意三点: 1.函数被调用时,它是运行在他被声明时的语法环境中的: 2.函数自己无法运行,它总是被对象调用的,函数运行时,函数体内的this指针指向调用该函数的对象,如果调用函数时没有 ...

  8. JavaScript基础学习-函数及作用域

    函数和作用域是JavaScript的重要组成部分,我们在使用JavaScript编写程序的过程中经常要用到这两部分内容,作为初学者,我经常有困惑,借助写此博文来巩固下之前学习的内容. (一)JavaS ...

  9. JavaScript函数表达式、闭包、模仿块级作用域、私有变量

    函数表达式是一种非常有用的技术,使用函数表达式可以无需对函数命名,从而实现动态编程.匿名函数,是一种强大的方式,一下总结了函数表达式的特点: 1.函数表达式不同于函数声明,函数声明要求有名字,但函数表 ...

随机推荐

  1. mongodb安装教程

    MongoDB 下载及安装 MongoDB 提供了可用于 32 位和 64 位系统的预编译二进制包,你可以从MongoDB官网下载安装,MongoDB 预编译二进制包下载地址:https://www. ...

  2. ASYNC_IO_COMPLETION

    项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...

  3. REST-framework快速构建API--初体验

    一.快速上手 1.环境准备 安装restframework,注册app pip install djangorestframework INSTALLED_APPS = [ 'django.contr ...

  4. JavaScript 为什么不要使用 eval

    本文内容 eval 隐藏的 eval 安全问题 结论 参考资料   eval eval 函数是一个高等级的函数,它与任何对象都无关.其参数,如果是一个字符串表达式,那么该函数计算表达式的值:如果是一个 ...

  5. Linux Mint安装Docker踩坑指南

    我家的服务器选用的Linux Mint系统,最近安装Docker的时候踩了一些小坑,但是总体还算顺利. 我们都知道Linux Mint系统是基于Ubuntu的,说实话用起来感觉还是很不错的,安装Doc ...

  6. spring cloud资料汇总

    https://www.cnblogs.com/Java3y/p/9540386.html#commentform --非常好的文章,里面还有海量学习资料

  7. fabric-sdk-container v1.0-beta 新增支持多服务节点

    HyperLedger/Fabric SDK Docker Image 该项目在github上的地址是:https://github.com/aberic/fabric-sdk-container ( ...

  8. PAT甲题题解-1121. Damn Single (25)-水题

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789787.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  9. Daily Scrum NO.8

    工作概况 今天是周六,虽然由于工作紧张要求这一日也定为工作日,但是也许是因为昨日大家工作做得较多或者周末的缘故,今天的进展状况并不理想.线程池和异常清理器的后端已经完成,而清理器的界面和动态爬取仍旧没 ...

  10. PAT----1001. A+B Format (20)解题过程

    1001. A+B Format (20) github链接 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B Calculate a + b and output t ...