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. CS100.1x-lab3_text_analysis_and_entity_resolution_student

    这次作业叫Text Analysis and Entity Resolution,比前几次作业难度要大很多.相关ipynb文件见我github. 实体解析在数据清洗和数据整合中是一个很重要,且有难度的 ...

  2. 设计模式 笔记 享元模式 Flyweight

    //---------------------------15/04/20---------------------------- //Flyweight 享元模式------对象结构型模式 /* 1 ...

  3. Python+Selenium+Unittest+Ddt+HTMLReport分布式数据驱动自动化测试框架结构

    1.Business:公共业务模块,如登录模块,可以把登录模块进行封装供调用 ------login_business.py from Page_Object.Common_Page.login_pa ...

  4. 测试开发：Python+Django实现接口测试工具

    Python+Django接口自动化 引言: 最近被几个公司实习生整自闭了,没有基础,想学自动化又不知道怎么去学,没有方向没有头绪,说白了其实就是学习过程中没有成就感,所以学不下去.出于各种花里胡哨的 ...

  5. kudu 存储引擎简析

    本文由  网易云发布. 1 概述 本文主要介绍kudu底层存储引擎的数据组织方式,先看整体结构如下: 一张表会分成若干个tablet , 每个tablet 包括MetaData 元信息及若干个RowS ...

  6. 小组成员的github地址

    袁颖https://github.com/joanyy/test 魏晓 https://github.com/weixiaohaobaobao/test 张晓磊 https://github.com/ ...

  7. Software-Defined Networking:A Comprehensive Survey--Day3

    (接Day2的内容 +2s) E. Layer V: Northbound Interfaces 南行接口已经得到广泛接受(OpenFlow),但现在就定义北向接口还为时尚早,开发不同的控制器经验一定 ...

  8. 功能WBS分解

    小组名称:飞天小女警 项目名称:礼物挑选小工具 小组成员:沈柏杉(组长).程媛媛.杨钰宁.谭力铭 代码地址:HTTPS: https://git.coding.net/shenbaishan/GIFT ...

  9. 轻松学JVM

    轻松学JVM(一)——基本原理 前言 JVM一直是java知识里面进阶阶段的重要部分,如果希望在java领域研究的更深入,则JVM则是如论如何也避开不了的话题,本系列试图通过简洁易读的方式,讲解JVM ...

  10. MT【171】共轭相随

    $\textbf{证明:}$对任意$a,b\in R^+$, $\dfrac{1}{\sqrt{a+2b}}+\dfrac{1}{\sqrt{a+4b}}+\dfrac{1}{\sqrt{a+6b}} ...