一、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. c#委托和事件(下) 分类： C# 2015-03-09 08:42 211人阅读 评论(0) 收藏

    C#中的委托和事件(下) 引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为 ...

  2. android 小例之两列菜单关联

    因为项目需要,做了个简单的菜单关联,其实很简单 左侧是个listview 选中的时候刷新右侧关联数据,类似网易新闻选择订阅页面 这里需要注意的是 在点击完左侧菜单列表的时候 直接右侧刷新会不一定出来数 ...

  3. jQuery之DOM

    jQuery之DOM 1.jQuery属性. 获取元素属性的语法: attr(name)                   例子:$("#img1").attr("sr ...

  4. 使用FileSystemWatcher监视文件变化

    本文转载:http://www.cnblogs.com/zanxiaofeng/archive/2011/01/08/1930583.html FileSystemWatcher基础 属性: Path ...

  5. 深入N皇后问题的两个最高效算法的详解 分类： C/C++ 2014-11-08 17:22 117人阅读 评论(0) 收藏

    N皇后问题是一个经典的问题,在一个N*N的棋盘上放置N个皇后,每行一个并使其不能互相攻击(同一行.同一列.同一斜线上的皇后都会自动攻击). 一. 求解N皇后问题是算法中回溯法应用的一个经典案例 回溯算 ...

  6. IntelliJ Idea 常用快捷键列表(精简版)

    查找快捷键: Ctrl+N 查找类 Ctrl+shift+N 查找文件 Ctrl+B 找变量来源 Ctrl+E 最近打开的文件 Ctrl+Alt+B 选中方法的实现 Ctrl+F7  选中方法(属性. ...

  7. xslt语法之---运算符号

      <xsl:param name="count">12</xsl:param > <xsl:template match="/" ...

  8. iOS UIKit：viewController之Segues (4)

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  9. DataTable用法

    在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...

  10. 利用DIV，实现简单的网页布局

    <html lang="en"><head> <meta charset="UTF-8"> <title>GIS ...