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. JavaScript实现选项卡（三种方法）

    本文实例讲述了js选项卡的实现方法. 一.html代码: <div id="div1"> <input class="active" type ...

  2. [SDOI2010]地精部落[计数dp]

    题意 求有多少长度为 \(n\) 的排列满足 \(a_1< a_2> a_3 < a_4 \cdots\) 或者 $a_1> a_2 < a_3 > a_4\cdo ...

  3. Django高并发负载均衡

    1 什么是负载均衡? 当一台服务器的性能达到极限时,我们可以使用服务器集群来提高网站的整体性能.那么,在服务器集群中,需要有一台服务器充当调度者的角色,用户的所有请求都会首先由它接收,调度者再根据每台 ...

  4. 12、利用docker快速搭建Wordpress网站

    一.准备工作 结构图: 用户访问页面,Nginx将请求进行转发,如果请求的是php页面,则通过FastCGI转发给后端php进行处理:如果非php页面,则直接返回静态页面. 关键点: mysql.ph ...

  5. FME Cloud 账号申请流程

    第一步,访问SAFE的FME Cloud注册页,官网明确表态,如果你是一个新的FME Cloud用户,你可以免费获得一个初级版.地址:https://console.fmecloud.safe.com ...

  6. Linux下安装maven(mvn命令)

    Maven(mvn)是基于项目对象模型(POM project object model),可以通过一小段描述信息(配置)来管理项目的构建,报告和文档的软件项目管理工具(百度百科) 简单理解为一个打包 ...

  7. M1事后分析报告--We have power to change the origin state

    M1事后分析报告 设计与实现 我们发的软件解决的问题?是否满足后面小组的要求?是否能够完全拟合前期目标? 答: 前期我们的软件完成量并不是特别让人满意,我们组在完成这些任务量之后,发现有很多地方是在做 ...

  8. 实验 六：分析linux内核创建一个新进程的过程

    实验六:分析Linux内核创建一个新进程的过程 作者:王朝宪  <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029 ...

  9. java调用不了你本以为有的方法的问题

    大部分是因为你的jar版本不对引起的,我就试过

  10. PAT 甲级 1085 Perfect Sequence

    https://pintia.cn/problem-sets/994805342720868352/problems/994805381845336064 Given a sequence of po ...