一、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. Little Kings - SGU 223（状态压缩）

    题目大意:在一个N*N的棋盘上放置M个国王,已知国王会攻击与它相邻的8个格子,要求放置的额国王不能相互攻击,求放置的方式有多少种. 分析:用dp[row][state][nOne],表示本行状态sta ...

  2. C++ —— 时间与日期

    导读 在平时编程中有时需要获取当前的时间或者日期,然而不同的平台不同的场景下,有时使用的API也不尽相同.一般来说,C/C++中关于时间的标准库函数在不同的平台的都可以使用,可一些与平台相关的函数就只 ...

  3. 用Python实现常见排序算法

    最简单的排序有三种:插入排序,选择排序和冒泡排序.这三种排序比较简单,它们的平均时间复杂度均为O(n^2),在这里对原理就不加赘述了.贴出来源代码. 插入排序: def insertion_sort( ...

  4. mac with windows dirver

    S1: find your mac serial number on the back,like Serial No.C02Fn09GDDQW S2: baidu "苹果序列号查询" ...

  5. activeMQ数据消耗，但在该站的中间，但是没有理由删除数据

    connection.createSession(Boolean.FALSE, Session.AUTO_ACKNOWLEDGE); 第一参数改变时TRUE后,消费数据将出现在MQ中间站没有记录删除. ...

  6. Building Tomcat7 source step by step---官方文档

    Table of Contents Introduction Download a Java Development Kit (JDK) version 6 Install Apache Ant 1. ...

  7. 第二篇：从 GPU 的角度理解并行计算

    前言 本文从使用 GPU 编程技术的角度来了解计算中并行实现的方法思路. 并行计算中需要考虑的三个重要问题 1. 同步问题 在操作系统原理的相关课程中我们学习过进程间的死锁问题,以及由于资源共享带来的 ...

  8. iOS UIKit：App

    1.App生命周期 IOS架构是由许多设计模式实现,如model-view-controller 和 delegation模式. 1.1 main函数 与其它框架类似,IOS框架的入口也是从main函 ...

  9. typeerror $.ajax is not a function

    在web开发中使用jQuery进行前端开发遇到这么个问题,纠结了很久终于解决了,下面说一下解决方法. 大家可以参照下面几种排查的方法. 1.首先检查是否引用jQuery的库. 2.页面如果使用的ifr ...

  10. try｛｝catch（）｛｝//根据异常信息使用不同的方法要怎么实现

    try{ }catch(Exception e){ if(e.getMessage().contains("123456798")) //使用e.getMessage().cont ...