一、css常用标签及页面布局

1、常用标签

　　position(定位)　z-index（定位多层顺序）　background（背景）　

　　text-align（针对字符自动左右居中）　　margin（外边距）　　padding（内边距）

　　font-size（字体大小）　　over-flow（修剪hidden，srcoll，auto）　　

　　:hover（设置对象在鼠标悬停时的样式）　　opacity（页面透明度）　　

　　float（让标签浮动起来）　　clear：both（让浮动标签沉下来）　　line-height(上下居中)

　　border（边框）　　color（字体颜色）　　display（设置或检索对象是否及如何显示）

2、两种页面布局

（1）主站

                <div class='pg-header'>

                       <div style='width:980px;margin:0 auto;'>

                           内容自动居中

                       </div>

                </div>

                <div  class='pg-content'></div>

                <div  class='pg-footer'></div>

（2）后台管理布局

　　position：

　　　　　　fiexd 　　　　--永远固定在窗口的某个位置

　　　　　　relative　　　--单独无意义

　　　　　　absolute　　--第一次定位，可以在指定的位置；滚轮滚动时，就变了

　　a、左侧菜单跟随滚动条

　　b、左侧及以上不动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet"  href="font-awesome-4.7.0/css/font-awesome.min.css"/>

    <style>

        body{

            margin: 0;

        }

        .left{

            float: left;

        }

        .right{

            float: right;

        }

        .pg-header{

            height: 48px;

            background-color: #2459a2;

            color: white;

            line-height: 48px;

        }

        .pg-header .logo{

            width: 200px;

            background-color: #204982;

            text-align: center;

        }

        .pg-header .icons{

            padding: 0 20px;

        }

        .pg-header .icons:hover{

            background-color: #204982;

        }

        .pg-header .user{

            margin-right: 60px;

            padding: 0 20px;

            color: white;

            height: 48px;

        }

        .pg-header .user:hover{

            background-color: #204982;

        }

        .pg-header .user .a img{

            height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;

        }

        .pg-header .user .b{

            z-index: 20;

            position: absolute;

            top: 48px;

            right: 0;

            background-color: white;

            color: black;

            width: 160px;

            display: none;

            font-size: 14px;

            line-height: 30px;

        }

        .pg-header .user .b a{

            padding: 5px;

            color: black;

            text-decoration: none;

        }

        .pg-header .user .b a:hover{

            background-color: #dddddd;

        }

        .pg-header .user:hover .b{

            display: block;

        }

        .pg-header .user .b a{

            display: block;

        }

        .pg-content .menu{

            position: absolute;

            top:48px;

            left: 0;

            bottom: 0;

            width: 200px;

            background-color: #dddddd;

        }

        .pg-content .content{

            position: absolute;

            top: 48px;

            right: 0;

            bottom: 0;

            left: 200px;

            overflow: auto;

            z-index: 9;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="logo left">

            老男孩

        </div>

        <div class="user right" style="position: relative">

            <a class="a" href="#">

                <img src="22.jpg">

            </a>

            <div class="b">

                <a href="#">我的资料</a>

                <a href="#">注销</a>

            </div>

        </div>

        <div class="icons right">

            <i class="fa fa-commenting-o" aria-hidden="true"></i>

            <span>5 </span>

        </div>

        <div class="icons right">

            <i class="fa fa-bell-o" aria-hidden="true"></i>

        </div>

    </div>

    <div class="pg-content">

        <div class="menu left">a</div>

        <div class="content left">

            <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->

            <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->

            <div style="background-color: purple">

            <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

                </div>

        </div>

    </div>

    <div class="pg-footer"></div>

</body>

</html>

二、js回顾及补充

1、for循环的两种写法

        for(var item in [11,22,33]){

            console.log(item);

            continue;

        }

item

        var arra = [11,22,32,3]

        for(var i=0;i<arra.lenght;i=i+1){

            break;

        }

        while(条件){

        }

for i

2、条件语句的写法

        if(){

        }else if(){

        }else{

        }
        name='3';

        switch(name){

            case '1':

                age = 123;

                break;

            case '2':

                age = 456;

                break;

            default :

                age = 777;

        }

3、函数

（1）普通函数

            function func(){

            }

（2）匿名函数

            function func(arg){

                return arg+1

            }

            setInterval("func()", 5000);

            setInterval(function(){

                console.log(123);

            },5000)

（3）自执行函数（创建函数并且自动执行）

            function func(arg){

                console.log(arg);

            }

            // func(1)

            (function(arg){

                console.log(arg);

            })(1)

4、序列化

　　JSON.stringify()　　将对象转换为字符串

　　JSON.parse()　　　 将字符串转换为对象类型　

5、转义

　　客户端（cookie）　　=》 服务器

　　将数据经过转义后，保存在cookie

　　

6、eval

　　python的eval：

　　　　　　　　val = eval（表达式）

　　　　　　　　val = exec（执行代码）

　　JavaScript：

　　　　　　　　eval包含上面的两种功能

7、时间

　　Date类

　　var d = new Date（）

　　d.getXXX　　获取时间

　　d.setXXX　　设置时间

8、作用域******

　　（1）函数作为作用域

　　a、其他语言：以代码块作为作用域　　　　　　　　

　　　　　　public void Func(){
　　　　　　　　if(1==1){
　　　　　　　　　　string name = 'Java';
　　　　　　　　　　}
　　　　　　　　console.writeline(name);
　　　　　　　}
　　　　　　　Func()
　// 报错 这里以{}为代码块，name在另一个{}，里外面的console.writeline(name)调用不了

　　　b、Python：以函数作为作用域

　　　　情况一：

　　　　　　　def func():
　　　　　　　　　　if 1==1:
　　　　　　　　　　　　name = 'alex'
　　　　　　　　　　print(name) #这个name是在func函数里的
　　　　　　　func()
　　　　　　　　// 成功

　　　　情况二：　　　　　　　　

　　　　　　　  def func():
　　　　　　　　　　if 1==1:
　　　　　　　　　　　　name = 'alex'
　　　　　　　　func()
　　　　　　　　print(name) #这里的name是拿不到函数func里的name的
　　　　　　　　// 报错

　　　　　c、JavaScript：默认是以函数作为作用域的　　　　　　　

　　　　　　　　function func(){
　　　　　　　　　　　if(1==1){
　　　　　　　　　　　　　　var name = 'alex';
　　　　　　　　　　　}
　　　　　　　　　　　　console.log(name);
　　　　　　　　}
　　　　　　　　func()

　　(2)函数的作用域在函数未被调用之前已经创建

        function func(){

            if(1==1){

                var name = 'alex';

            }

            console.log(name);

        }

　　(3)函数的作用域存在作用域链（函数嵌套关系），并且也是在未被调用前创建

示例一：

            xo = "alex";

            function func(){

                // var xo = 'eric';

                function inner(){

                    // var xo = 'tony';

                    console.log(xo);

                }

                inner()

            }

            func()

示例二：

            xo = "alex";

            function func(){

                var xo = 'eric';

                function inner(){

                    console.log(xo);

                }

                return inner;

            }

            var ret = func()

            ret()

示例三：

            xo = "alex";

            function func(){

                var xo = 'eric';

                function inner(){

                    console.log(xo);

                }

                var xo = 'tony';

                return inner;

            }

            var ret = func()

            ret()

　　(4)函数内局部变量 声明提前

        function func(){

            console.log(xxoo);

        }

        func();

        // 程序直接报错

        function func(){

            console.log(xxoo);

            var xxoo = 'alex';

        }

        解释过程中：var xxoo;

        func();

        // undefined

9、JavaScript面向对象

            function foo(){

                var xo = 'alex';

            }

            foo()

            function Foo(n){

                this.name = n;

                this.sayName = function(){

                    console.log(this.name);

                }

            }

            var obj1 = new Foo('we');

            obj1.name

            obj1.sayName()

            var obj2 = new Foo('wee');

            obj2.name

            obj2.sayName()

            ==============》

                a. this代指对象(python self)

                b. 创建对象时, new 函数()

原型：

            function Foo(n){

                this.name = n;

            }

            # Foo的原型

            Foo.prototype = {

                'sayName': function(){

                    console.log(this.name)

                }

            }

            obj1 = new Foo('we');

            obj1.sayName()

            obj2 = new Foo('wee');

三、DOM

1、查找

　　（1）直接查找

　　　　var obj = document.getElementById('i1')

　　（2）间接查找

　　　　文件内容操作：

　　　　　　A：innerText　　获取的仅文本（忽略标签）

　　　　　　如下图：

　　　　　　

　　　　　　B：innerHTML　　全内容（内部所用的东西）

　　　　　　　　如下图：

　　　　　　

　　　　　　C：value

　　　　　　　　　　input标签  value获取当前标签中的值

　　　　　　　　　　

　　　　　　　　　　select标签　　获取选中的value值（selectIndex）

　　　　　　　　　　

　　　　　　　　　　textarea标签　　value获取当前标签中的值

2、操作：

　（1）样式操作：

　　className

　　classList

　　　　　　　classList.add　　classList.remove

　(2)属性操作:

　　　　attributes　　getAttibute　　removeAttribute

　　

js+dom开发第十六天的更多相关文章

  1. python自动化开发-[第十六天]-bootstrap和django

    今日概要: 1.bootstrap使用 2.栅格系统 3.orm简介 4.路由系统 5.mvc和mtv模式 6.django框架 1.bootstrap的引用方式 1.Bootstrap 专门构建了免 ...

  2. arcgis api for js入门开发系列十叠加SHP图层

    上一篇实现了demo的热力图,本篇新增叠加SHP图层,截图如下: 叠加SHP图层效果实现的思路如下:利用封装的js文件,直接读取shp图层,然后转换geojson,最后通过arcgis api来解析转 ...

  3. arcgis api for js入门开发系列十六迁徙流动图

    最近公司有个arcgis api for js的项目,需要用到百度echarts迁徙图效果,而百度那个效果实现是结合百度地图的,怎么才能跟arcgis api结合呢,网上搜索,终于在github找到了 ...

  4. arcgis api for js入门开发系列十五台风轨迹

    上一篇实现了demo的地图最近设施点路径分析,本篇新增台风轨迹,截图如下: 下面简单介绍相关知识点: 警戒线 警戒线坐标集合: var lineArr24=[[127,34],[127,21],[11 ...

  5. arcgis api for js入门开发系列十九图层在线编辑

    本篇主要讲述的是利用arcgis api实现图层在线编辑功能模块,效果图如下: 实现思路: 1.arcgis server发布的FeatureServer服务提供的图层在线编辑能力: 2.实现的在线编 ...

  6. arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. arcgis api 3.x for js 入门开发系列十六迁徙流动图

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  8. arcgis api 3.x for js 入门开发系列十五台风轨迹

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api 3.x for js 入门开发系列十四最近设施点路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

随机推荐

  1. AWK调用SHELL，并将变量传递给SHELL

    在Shell脚本中调用awk是非常自然和简单的,以前还写过一个关于awk/shell相互传递变量的文章:awk与shell之间的变量传递方法在awk脚本中,如果需要调用shell脚本/命令,则需要使用 ...

  2. winform DataGridView双击修改单元格的值 分类： DataGridView 2014-08-04 19:39 150人阅读 评论(0) 收藏

    定义全局变量 string abcmycode = "";//当前行自编号 bool tf = false;//是否双击 //双击可编辑         private void ...

  3. [置顶] Array ArrayList LinkList的区别剖析

    这是一个面试中我们经常被问到的问题 Array.ArrayList.LinkList之间的区别:Array.ArrayList.LinkList均属于泛型的范畴,都用来存放元素,主要区别是Array是 ...

  4. JVM类载入过程及主动引用与被动引用

    了解类载入全过程,有助于了解JVM执行过程,以及更深入了解java动态性(解热部署,动态载入),提高程序灵活性. 类载入全过程: JVM将class文件字节码文件载入到内存中.并对数据进行校验解析和初 ...

  5. 基于xmpp openfire smack开发之smack类库介绍和使用[2]

    http://blog.csdn.net/shimiso/article/details/8816540 关于Smack编程库,前面我们提到,它是面向Java端的api,主要在PC上使用,利用它我们可 ...

  6. [RxJS] Combination operator: zip

    CombineLatest and withLatestFrom are both AND-style combination operators. In this lesson, we will l ...

  7. dump_stack的简单使用 +CALL TREE

    http://blog.chinaunix.net/uid-26403844-id-3361770.html http://blog.csdn.net/zifeng274059226/article/ ...

  8. 初步掌握Yarn的架构及原理

    1.YARN 是什么? 从业界使用分布式系统的变化趋势和 hadoop 框架的长远发展来看,MapReduce的 JobTracker/TaskTracker 机制需要大规模的调整来修复它在可扩展性, ...

  9. 自定义 textField 的清除 button

    UIButton *clearButton = [self.textField valueForKey:@"_clearButton"]; [clearButton setImag ...

  10. Java基础知识强化之集合框架笔记24：ArrayList存储自定义对象并遍历

    1. ArrayList存储自定义对象并遍历 2. 代码示例: Student.java,如下: package cn.itcast_01; public class Student { privat ...