• CSS补充之--页面布局、js补充,dom补充


    CSS补充之--页面布局

    主站一:(下面是一个大致的模板)

     <div class="pg-header">
            <div style=" 1200px;margin: 0 auto;">
                    这里的内容会自动居中
            </div>
        </div>
        <div class="pg-content"></div>
        <div class="pg-footer"></div>

    这样是把网站分为了上中下三部分,最上面是头部,中间是主要内容,下面是底部的信息

    后台管理布局

    布局一:效果图如下:

    当滑动右边滚动条的时候其他区域保持不变只有aaa占的部分会发生滚动

    实现代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: auto;
            }
            .pg-header{
                height: 48px;
                background-color: #2459a2;
                color: white;
            }
            .left{
                float: left;
            }
            .right{
                float: right;
            }
            .pg-content .menu{
                position: fixed;
                top: 48px;
                left: 0;
                bottom: 0;
                width: 200px;
                background-color: #dddddd;
            }
            .pg-content .content{
                position: fixed;
                top: 48px;
                bottom: 0;
                right: 0;
                left: 200px;
                background-color:green;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            <div class="menu left">a</div>
            <div class="content left">
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
    
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
    </html>

    布局二:效果图如下(这种是必须会的,后台布局经常用)

    这种情况是当滑动滚轮的时候,左边菜单不会跟着走,即:

    因为滑动,左边已经没有菜单,实现代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                margin: auto;
            }
            .pg-header{
                height: 48px;
                background-color: #2459a2;
                color: white;
            }
            .left{
                float: left;
            }
            .right{
                float: right;
            }
            .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;
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-content">
            <div class="menu left">a</div>
            <div class="content left">
                <div style="background: green;">
                    <p style="margin: 0">aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
    
                </div>
    
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
    </html>

    其实这里如果想要和布局一有相同的效果只需要更改一个地方就可以实现:(这种设置用的也是最多的

         .pg-content .content{
                position: absolute;
                top: 48px;
                right: 0;
                bottom: 0;
                left:200px;
                overflow: auto;
            }

    做一个简单的后台管理页面

    这里需要记住一个地址:

    http://fontawesome.io/

    这个地址中存放了我们需要的各种图标

    如下所示

    将文件下载下来

    通过在头部导入:

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

    做出的效果如下:

     

    当把鼠标放在头像的时候显示资料和注销信息,图片中的图标就是从下载的图标中直接引用的

    实现代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
        <style>
            body{
                margin: auto;
            }
            .pg-header{
                height: 48px;
                background-color: #2459a2;
                color: white;
                min-width: 500px;
                line-height: 48px;
            }
            .pg-header .icons{
                padding: 0 20px;
            }
            .pg-header .icons:hover{
                background-color: blue;
            }
            .pg-header .logo{
                width: 200px;
                background-color: deepskyblue;
                text-align: center;
    
            }
            .pg-header .user{
                width: 200px;
                background-color:deepskyblue ;
                text-align: center;
                height: 48px;
            }
            .pg-header .user:hover{
                background-color: blue;
            }
            .pg-header .user .b{
                z-index: 10;
                position: absolute;
                top: 48px;
                right: 0px;
                background-color: white;
                color: black;
                width: 200px;
                display: none;
            }
            .pg-header .user:hover .b{
                display: block;
            }
            .pg-header .user .b a{
                display: block;
            }
            .left{
                float: left;
            }
            .right{
                float: right;
            }
            .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;
                min-width: 500px;
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <div class="pg-header">
            <div class="logo left">
                赵凡
            </div>
    
            <div class="user right">
                <a>
                    <img src="logo.png" style="height: 40px; 40px;margin-top: 4px;border-radius: 50%">
                </a>
                <div class="b">
                    <a>我的资料</a>
                    <a>注销</a>
                </div>
            </div>
            <div class="icons right">
                <i class="fa fa-bell-o" aria-hidden="true"></i>
            </div>
            <div class="icons right">
                <i class="fa fa-envelope-o" aria-hidden="true"></i>
            </div>
        </div>
        <div class="pg-content">
            <div class="menu left">a</div>
            <div class="content left">
                <div style="background: green;">
                    <p style="margin: 0">aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
                    <p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
    
                </div>
    
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
    </html>

    JavaScript补充

    函数补充

    匿名函数

    通常情况下我写函数是如下所示:

        function func(){
            return 1
        }
        setInterval("func()",5000)

    如果写成匿名函数如下所示:

        setInterval(function(){
            console.log(123)
        },5000)

    自执行函数(函数创建并自动执行)

        function func(arg){
            console.log(arg);
        }
        func(1)
        --------------------
        (function(arg){
            console.log(arg);
        })(1)

    上面的为普通函数,下面的为自执行函数

    序列化

    JSON.stringify(obj)  序列化即将对象转换为字符串

    JSON.parse(str)      反序列化即将字符串转换为对象类型

    转义

    decodeURI()           URI中未转义的字符

    decodeURIComponent()  URI组件中的未转义字符

    encodeURI()           URI中的转义字符

    encodeURIComponent()  转义URI组件中的字符

    escape()              对字符串转义

    unescape()            给转义字符串解码

    URIError              由URI的编码和解码方法抛出

    演示例子如下:

    所以转义的一个应用就是:将数据转义后保存在cookie

    eval

    python:

       val=eval(表达式)

          =exec(执行代码)

    JavaScript

       eval是python中eval和exec的集合

    时间

    Date类

    var d = new Date()

    d.getXXX 表示获取

    d.setXXX 表示设置

    作用域(非常重要)

    其他语言大部分是以代码块为作用域

    C#中:

     public void Func(){

            if(1==1){

                string name = "C#"

            }

            console.writeline(name)

        }

        如果按照上面的执行Func()调用函数就会报错,因为这里是以代码块为作用域

        即if后面的{}为作用域,name是在if的代码块里定义的所以当出了这个代码块就无法

        找到定义的name

        所以代码需要改为如下:

            public void Func(){

            if(1==1){

                string name = "C#"

                console.writeline(name)

            }

        }

    python中:

    def func():

            if 1==1:

                name = "python"

            print(name)

        func()

        python的作用域和C#中就不相同了,python的这种调用方式就不会报错

        因为在python中是以函数作为作用域

    JavaScript中:

    作用域也是以函数作为作用域

        function func(){

            if(1==1){

                var name = "js"

            }

            console.log(name)

        }

        func()

    关于js的作用域的一个总结:

    以函数作为作用域

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

    函数的作用域存在作用域链,并且也是在被调用之前创建

    函数内部变量提前声明

    JavaScript面向对象

    function Foo(n){

        this.name=n;

    }

    var obj = new Foo('ww');

    this代指对象(类似python 中的self)

    创建对象时,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('ss')

    obj2.sayName()

    DOM

    查找

    直接查找:

    var obj = document.getElementById(‘i1’)

    间接查找:

    文本内容操作:

    innerText   仅文本

    innerHTM    全部内容

    value

       input  value获取当前标签中的值

       select value获取选中的value值(selectedIndex)

       textarea value获取当前变迁中的值

    下面可以通过上述的内容实现一个小功能

    <body>
        <input id="i1" onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />
        <script>
            function Focus() {
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val=="请输入关键字"){
                    tag.value=""
                }
            }
            function Blur() {
                var tag = document.getElementById('i1');
                var val = tag.value;
                if(val.length==0){
                    tag.value="请输入关键字"
                }
            }
        </script>
    </body>

    当输入框获得焦点的时候输入框中内容清空,离开恢复

    在最新的浏览器上可以通过如下实现:

    <input type="text" placeholder="请输入关键字" >

    属性操作:

    obj.attributes    获取所有的属性

    obj.getAttribute  设置属性

    obj.removeAttribute 删除属性

    创建标签

    代码例子:

    第一种方式:以字符串形式创建

    <body>
        <input type="button" onclick="AddEle()" value="添加">
        <div id="i1">
            <p><input type="text" /></p>
    
        </div>
        <script>
            function AddEle() {
                var tag = "<p><input type='text' /></p>"
                document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)
            }
        </script>
    
    </body>

    这样就实现了点击添加,依次添加一个输入框

    document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)

    这里有三个参数:beforeBegin、afterBegin、beforeEnd、afterEnd

    分别表示在不同的位置插入

    第二种方式:(以对象方式创建)

    <body>
        <input type="button" onclick="AddEle2()" value="添加">
        <div id="i1">
            <p><input type="text" /></p>
        </div>
        <script>
            function AddEle2() {
                var tag = document.createElement('input');
                tag.setAttribute('type','text')
                var p = document.createElement('p');
                p.appendChild(tag)
                document.getElementById('i1').appendChild(p);
            }
        </script>
    
    </body>

    和方式一实现相同的效果

    其他操作:

     

    console.log  输出框

    alert        弹出框

    confirm     确认框

    //url刷新

    location.href       获取url

    location.href       重定向,跳转

    locatioin.reload    重新加载,刷新

    //定时器

    setInterval         多次定时器

    clearInterval       清除多次定时器

    setTimeout          单次定时器

    clearTimeout        清除单次定时器

    事件

    注意:

    我们之前写html代码都是最普通的Dom0的写法,这种不建议工作中这样写,工作中要实现行为,样式,结构相分离的页面,即js、css、html相分离

    代码例子如下:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #i1{
                background-color: red;
                width: 300px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="i1">
            aaaa
        </div>
        
        <script>
            var mydiv=document.getElementById('i1')
            mydiv.onclick=function () {
                console.log('aaaaa')
            }
        </script>
    
    </body>

    这样就实现了三部分的分离,而不用和之前之前,将js的调用还放在html语言中

    再写一个例子:

    <body>
        <table border="1" width="300px">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </table>
    
    
        <script>
            var myTrs = document.getElementsByTagName('tr');
            var len = myTrs.length;
            for(var i =0;i<len;i++){
                myTrs[i].onmousemove=function () {
                    //这里的this不能换成myTrs[i],并且谁调用这个函数这个this就指向谁
                    this.style.backgroundColor = "red";
                }
                myTrs[i].onmouseout=function () {
                    //这里的this不能换成myTrs[i],并且谁调用这个函数这个this就指向谁
                    this.style.backgroundColor = "";
                }
            }
        </script>
    </body>

    实现的效果就是如下:

    鼠标放在那一行,机会有红色的背景色

    离开的时候红色机会消失

    小结:

    这里可以看出绑定事件两种方式:

    直接绑定:onclick=“xx()”

    先获取dom对象,然后在绑定

    document.getElementById(‘xx’).onclick

    this 当前触发事件的标签

    第一种绑定方式:

    <input id="i1" type="button" onclick="ClickOn(this)">

    function ClickOn(self){

        //self 当前点击的标签

    }

    第二种绑定方式

    <input id="i1" type="button">

    document.getElementById("i1").onclick=function(){

        //this 代指当前点击的标签

    }

    第三种绑定方式(dom2)

    下面先通过一个例子理解:

    <body>
        <div id="test">
            aaa
        </div>
        <script>
            var mydiv = document.getElementById('test')
            mydiv.addEventListener("click",function () {
                console.log("aaa")
            },false)
            mydiv.addEventListener("click",function () {
                console.log("bbb")
            },false)
        </script>
    </body>

    这样就实现了点击同时执行两个事件

    最后的一个参数需要注意:

    false:冒泡模型

    true:捕捉模型

    通过下面例子理解冒泡和捕捉模型

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #main{
                background-color: red;
                width: 300px;
                height: 400px;
            }
            #content{
                background-color: pink;
                width: 150px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div id="content"></div>
        </div>
        <script>
            var mymain=document.getElementById('main')
            var mycontent=document.getElementById('content')
            mymain.addEventListener("click",function () {
                console.log("main")
            },false)
            mycontent.addEventListener("click",function () {
                console.log("content")
            },false)
    
        </script>
    </body>

    当点击粉色区域的时候先出的是content后出现main

    因为参数设置的是flase,所以采用的是冒泡

    如果参数设置为true

    当点击粉色区域的时候先出的是main后出现content

  • 相关阅读:
    [leetcode]Palindrome Partitioning II
    [wikioi]传纸条
    [leetcode]Palindrome Partitioning
    [leetcode]Convert Sorted List to Binary Search Tree
    [topcoder]ActivateGame
    [topcoder]NinePuzzle
    [topcoder]BestRoads
    [topcoder]IncreasingSubsequences
    [leetcode]Surrounded Regions
    CF 432B :Football Kit
  • 原文地址:https://www.cnblogs.com/zhaof/p/6100422.html
Copyright © 2020-2023  润新知