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. jQuery .attr() vs. .prop()

    Property vs. Attribute 在开始正式比较prop()和attr()两个jQuery方法之前,我们有必要先弄清一下Property和Attribute两个单词的意思.在中文里面,它们 ...

  2. NodeJS旅程 : module 不可忽略的重点

    modules 模块的简介 Module 是Node.js中最重要的一个部分也是进行深度开发前的必修课.掌握Module才能真正理解NodeJS的精髓,你会发现从思路上会有极大的扩展.  学会写mod ...

  3. python数据图形化—— matplotlib 基础应用

    matplotlib是python中常用的数据图形化工具,用法跟matlab有点相似.调用简单,功能强大.在Windows下可以通过命令行 pip install matplotlib 来进行安装. ...

  4. 关于Unity物理事件的执行顺序的最新理解

    物体A: public class A:{ B b; void FixedUpdate(){ if(input.GetKeyDow(Keycode.I)) { collider.enable=fals ...

  5. 现已告别五险一金？迎来社保商保时代保险INSURAUNCE

    现已告别五险一金?迎来社保商保时代保险INSURAUNCE 经济工作会议提出,中国要降低社会保险费,研究精简归并"五险一金",可以说是为社保变革指明了大方向.未来,生育保险将与基本 ...

  6. PAT甲题题解-1030. Travel Plan (30)-最短路+输出路径

    模板题最短路+输出路径如果最短路不唯一,输出cost最小的 #include <iostream> #include <cstdio> #include <algorit ...

  7. 【Beta阶段】第二次Scrum Meeting！

    每日任务内容: 本次会议为第二次Scrum Meeting会议~ 由于本次会议项目经理召开时间较晚,所以在公寓7层召开,所以女生没来…召开时间大家集会10分钟,经理与后端探讨20分钟. 队员 昨日完成 ...

  8. 冲刺Two之站立会议4

    在完成了对主界面的设计之后,我们对自己的聊天室界面进行了优化,添加了一些标签和图片按钮等组件让界面更加美观一些.然后还查询了一些关于改进视频和音频质量的资料,准备开展相关工作.

  9. 为什么java的main方法必须是静态的

    今天看类型信息时发现一个问题,不能再main方法中打印this关键字的信息,这时想起了之前的知识,不能再静态方法中调用this.理由很简单,this表示“这个对象”,也就是声明一个类的对象,然而静态方 ...

  10. Xmind 8 pro 软件破解版

    转载地址:https://blog.csdn.net/qq_16093323/article/details/80967867 Xmind是一款非常专业的思维导图软件,收费好几百元,不过还是很多用户, ...