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. 搭建 Guacamole 并解决各种坑和创建不了虚拟驱动器导致无法实现文件传输的方法

    系统类型版本:centos7 64位 结果:最终跑通了项目并且实现了虚拟驱动器的文件传输功能,添加了中文支持 反思总结: 先查看官方文档的Q&A,找找有没有类似的错误,然后如果有错误日志或者现 ...

  2. SSIS 事件的向上传递

    在SSIS中,Package是Task组件的有序组合,具有层次结构,Package处于层次结构的顶层(Root Level),对于父子包结构,父包(Parent Package)通过Execute P ...

  3. Java 多线程(三）之线程状态及其验证

    目录 线程状态 Thread.State 状态类型 定义 说明 状态转换 状态验证 「NEW」-> 「RUNNABLE」 -> 「TERMINATED」 「RUNNABLE」 -> ...

  4. 1、Docker概述与安装

    1.Docker概述 原文地址:https://docs.docker-cn.com/engine/docker-overview/#docker-engine Docker是一个开发,集装,运行应用 ...

  5. let和const----你所不知道的JavaScript系列（2）

    let 众所周知,在ES6之前,声明变量的关键字就只有var.var 声明变量要么是全局的,要么是函数级的,而无法是块级的. var a=1; console.log(a); console.log( ...

  6. C#_Winfrom将浏览器生成Image

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. centos6 和centos7 安装git 的区别

    centos6 和centos7 安装git 的区别 centos6安装git yum install curl-devel expat-devel gettext-devel openssl-dev ...

  8. PHP学习 类型 变量 常数 运算符

    PHP支持下列8种类型 标量类型 scalar type整数 integer浮点数 float double布尔 boolean字符串 string 特殊类型 special typeNULL资源 r ...

  9. Final互评------《弹球学成语》---- 杨老师粉丝群

    一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题;  N(Need,需求):本产品面相青少年及小学生,基于这些用户数量再加上一些休闲玩家,需求量还是比较大的.   A ...

  10. 【Alpha】第四次Scrum meeting

    今天任务一览: 姓名 今日完成任务 所耗时间 刘乾 配置好了所有物理实验的通配模板,为服务器配置了latex中文环境,设置了一些常用字体. Issue链接:https://github.com/bua ...