Python的平凡之路（16）

一、HTML+CSS补充

0、常用页面布局

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*设置body样式*/
        body{
            margin: 0;
        }
        /*设置left样式*/
        .left{
            float: left;
        }
        /*设置right样式*/
        .right{
            float: right;
        }
        /*设置header样式*/
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
            line-height: 48px;
        }
        .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: 44px;
                background-color: white;
            color: black;
            width: 160px;
            display: none;
        }
        .pg-header .user:hover .b{
            display: block;
        }
        .pg-header .user .b a{
            display: block;
        }
        .pg-header .logo{
            width: 200px;
            background-color: burlywood;
            text-align: center;
        }
        /*设置内容部分左边菜单样式*/
        .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;

        }
    </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="2.jpg">
            </a>
            <div class="b">
                <a>我的资料</a>
                <a>注销</a>
            </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>-->
            <!--设置右边content的背景色-->
            <div style="background-color: purple">
            <!--p标签有间距,要设置margin:0-->
            <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>

1、float,clear:both,margin,padding

float:定义元素在哪个方向上浮动

clear:both定义了元素的哪边上不允许出现浮动元素

<html>

<head>

img

{

float:left;

clear:both;

}

</style>

</head>

<body>

</body>

</html>

margin:简写属性在一个声明中设置所有外边距属性。四个值：上、右、下、左，两个值的时候：上下、左右<html>

<head>

p.margin {margin: 2cm 4cm 3cm 4cm}

</style>

</head>

<body>

<p>这个段落没有指定外边距。</p>

<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>

<p>这个段落没有指定外边距。</p>

</body>

</html>

padding:简写属性在一个声明中设置所有内边距属性。四个值：上、右、下、左，两个值的时候：上下、左右

<html>

<head>

td.test1 {padding: 1.5cm}

td.test2 {padding: 0.5cm 2.5cm}

</style>

</head>

<body>

<tr>

这个表格单元的每个边拥有相等的内边距。

</td>

</tr>

</table>

<br />

<tr>

这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。

</td>

</tr>

</table>

</body>

</html>

一个列子：

<html>

<head>

div

{

float:right;

width:120px;

margin:0 0 15px 20px;

padding:15px;

border:1px solid black;

text-align:center;

}

</style>

</head>

<body>

<div>

CSS is fun!

</div>

<p>

This is some text. This is some text. This is some text.

</p>

<p>

在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。

</p>

</body>

</html>

2、position：规定元素的定位类型

h2

  {

  position:absolute;

  left:100px;

  top:150px;

  }

可能的值

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

<html>

<head>

h2.pos_abs

{

/*决定定位，还以为是relative和fixed*/

position:absolute;

left:100px;

top:150px

}

</style>

</head>

<body>

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

</body>

</html>

3、left: 规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

<html>

<head>

img

{

position:absolute;

left:20%

}

</style>

</head>

<body>

</body>

</html>

4、background:简写属性在一个声明中设置所有的背景属性。

background-color
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
background-image

<html>

<head>

body

{

/*背景属性*/

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

}

</style>

</head>

<body>

<p>这是一些文本。</p>

</body>

</html>

5、text-align:属性规定元素中的文本的水平对齐方式。

<html>

<head>

<style type="text/css">

h1 {text-align: center}

h2 {text-align: left}

h3 {text-align: right}

</style>

</head>

<body>

</body>

</html>

6、font-size:属性可设置字体的尺寸。

<html>

<head>

h1 {font-size: 300%}

h2 {font-size: 200%}

p {font-size: 100%}

</style>

</head>

<body>

<h1>This is header 1</h1>

<h2>This is header 2</h2>

<p>This is a paragraph</p>

</body>

</html>

7、z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

<html>

<head>

img.x

{

position:absolute;

left:0px;

top:0px;

z-index:-1

}

</style>

</head>

<body>

<h1>这是一个标题</h1>

<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>

</body>

</html>

8、over-flow:(略）
9、:hover:选择器用于选择鼠标指针浮动在上面的元素。

<!DOCTYPE html>

<html>

<head>

<style>

/*悬浮hover和活动链接active的结合*/

a.ex1:hover,a.ex1:active {color:red;}

a.ex2:hover,a.ex2:active {font-size:150%;}

a.ex3:hover,a.ex3:active {background:red;}

a.ex4:hover,a.ex4:active {font-family:'微软雅黑';}

a.ex5:visited,a.ex5:link {text-decoration:none;}

a.ex5:hover,a.ex5:active {text-decoration:underline;}

</style>

</head>

<body>

<p>请把鼠标指针移动到这些链接上。</p>

<p><a class="ex1" href="/index.html">这个链接改变颜色。</a></p>

<p><a class="ex2" href="/index.html">这个链接改变字体大小。</a></p>

<p><a class="ex3" href="/index.html">这个链接改变背景色。</a></p>

<p><a class="ex4" href="/index.html">这个链接改变字体。</a></p>

<p><a class="ex5" href="/index.html">这个链接会出现下划线。</a></p>

</body>

</html>

10、opacity:设置元素的不透明级别。

div

{

opacity:0.5;

}

<!DOCTYPE html>

<html>

<head>

function ChangeOpacity(x)

{

// 返回被选选项的文本

var opacity=x.options[x.selectedIndex].text;

var el=document.getElementById("p1");

if (el.style.opacity!==undefined)

{el.style.opacity=opacity;}

else

{alert("Your browser doesn't support this example!");}

}

</script>

</head>

<body>

<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>

<option />0

<option />0.2

<option />0.5

<option />0.8

<option selected="selected" />1

</select>

</body>

</html>

11、line-height:设置行间的距离（行高）。

12、border:简写属性在一个声明设置所有的边框属性。

<html>

<head>

{

/*border属性*/

border: medium double rgb(250,0,255)

}

</style>

</head>

<body>

</body>

</html>

13、color:规定文本的颜色。

<html>

<head>

body {color:red}

h1 {color:#00ff00}

p.ex {color:rgb(0,0,255)}

</style>

</head>

<body>

<h1>这是 heading 1</h1>

<p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>

<p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>

</body>

</html>

14、display:规定元素应该生成的框的类型

<html>

<head>

span

{

display: block

}

</style>

</head>

<body>

<span>本例中的样式表把 span 元素设置为块级元素。</span>

<span>两个 span 元素之间产生了一个换行行为。</span>

</body>

</html>

<html>

<head>

p {display: inline}

div {display: none}

</style>

</head>

<body>

<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>

</body>

</html>

15、页面布局
主站—
  <div class='pg-header'>
  <div style='width:980px;margin:0 auto;'>
            内容自动居中
  </div>

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

后台管理布局：
  position:
     fiexd    -- 永远固定在窗口的某个位置
     relative -- 单独无意义
     absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。

 a. 
     左侧菜单跟随滚动条
 b. 
     左侧以及上不不动   ******

二、JavaScript补充
1、for循环

        for(var item in [11,22,33]){
            console.log(item);
            continue;
        }

        var arra = [11,22,32,3]
        for(var i=0;i<arra.lenght;i=i+1){
            break;
        }

        while(条件){

        }

2、条件语句

        if(){

        }else if(){

        }else{

        }

        ==
        ===

        name='3';

        switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }

3. 函数
        function func(arg){

            return arg+1
        }
        var result = func(1)
        console.log(result);

        普通函数：
            function func(){

            }
        匿名函数：

            function func(arg){

                return arg+1
            }

            setInterval("func()", 5000);

            setInterval(function(){
                console.log(123);

            },5000)

        自执行函数(创建函数并且自动执行)：
            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:
            val = eval(表达式)
                  exec(执行代码)
        JavaScript:
            eval

7、时间
     Date类 
        var d = new Date()

        d.getXXX  获取
        d.setXXX  设置

8、作用域
 (1). 以函数作为作用域 （let）

        其他语言： 以代码块作为作用域
                    public void Func(){
                        if(1==1){
                            string name = 'Java';

                        }
                        console.writeline(name);

                    }
                    Func()
                    // 报错

        Python：   以函数作为作用域
                    情况一：
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)

                        func()
                        // 成功
                    情况二：
                        def func():
                            if 1==1:
                                name = 'alex'
                            print(name)

                        func()
                        print(name)
                        // 报错

        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面向对象

        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 函数()

        Python的面向对象：
            class Foo:
                def __init__(self,name):
                    self.name = name

                def sayName(self):
                    print(self.name)

            obj1 = Foo('we')

            obj2 = Foo('wee')

        原型：

            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、查找

直接查找
 var obj = document.getElementById('i1')
间接查找
文件内容操作：
 innerText    仅文本
 innerHTML    全内容
 value
 input    value获取当前标签中的值
 select   获取选中的value值（selectedIndex）
 textarea value获取当前标签中的值             
搜索框的示例

2、操作：      
样式操作：
  className
  classList
  classList.add
  classList.remove
  obj.style.fontSize = '16px';
  obj.style.backgroundColor = 'red';
  obj.style.color = "red"
属性操作：
  attributes
  getAttribute

  removeAttribute

创建标签，并添加到HTML中：
a. 字符串形式
b. 对象的方式
   document.createElement('div')

提交表单
  任何标签通过DOM都可提交表单
  document.geElementById('form').submit()

其他：
  console.log()
  alert
  var v = confirm(信息)  v:true false
  location.href
  location.href = ""  # 重定向，跳转
  location.reload()   # 页面刷新
  location.href = location.href   < === > location.reload()
  var o1 = setInterval(function(){}, 5000)
  clearInterval(o1);
  var o2 = setTimeout(function(){}, 50000);
  clearTimeout(o2);
  var obj = setInterval(function(){
   }, 5000)
  clearInterval(obj);

3、事件：
 onclick，onblur，onfocus

 行为  样式  结构 相分离的页面？
 js    css   html  

 绑定事件两种方式：
   a. 直接标签绑定 onclick='xxx()'  onfocus
   b. 先获取Dom对象，然后进行绑定
       document.getElementById('xx').onclick
       document.getElementById('xx').onfocus

  this，当前触发事件的标签
   a. 第一种绑定方式
                <input id='i1' type='button' onclick='ClickOn(this)'>

                function ClickOn(self){
                    // self 当前点击的标签

                }
  b. 第二种绑定方式
                <input id='i1' type='button' >
                document.getElementById('i1').onclick = function(){

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

 作用域示例：
                var myTrs = document.getElementsByTagName("tr");
                var len = myTrs.length;
                for(var i=0;i<len;i++){
                    // i=0,i=1,i=2
                    myTrs[i].onmouseover = function(){
                         this.style.backgroundColor = "red";
                    };

                }

Python的平凡之路（16）的更多相关文章

Python的平凡之路（8）
(本文是对平凡之路(7)的补充等) 一.动态导入模块 import importlib __import__('import_lib.metaclass') #这是解释器自己内部用的 #importl ...
Python的平凡之路（18）
一.JS 正则部分 test - 判断字符串是否符合规定的正则rep = /\d+/;rep.test("asdfoiklfasdf89asdfasdf")# truerep ...
Python的平凡之路（13）
一.Python的paramiko模块介绍 Python 的paramiko模块,该模块和SSH用于连接远程服务器并执行相关操作 SSH client 用于连接远程服务器并执行基本命令基于用户名和密 ...
Python的平凡之路（12）
一.数据库介绍数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同的API用于创建,访问,管理,搜索和复制所保存的数据.我们也可以将数据存储在文件中,但 ...
Python的平凡之路（11）
一. rabbitmq 1 进程Queue: 父进程与子进程进行交互,或者同属于同一父进程下多个子进程进行交互 2 队列通信: send1.py #!/usr/bin/env python#Au ...
Python的平凡之路（9)
一.Paramiko模块练习 1. Paramiko模块介绍 Paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接 2 .SSHclie ...
Python的平凡之路（5）
一.模块介绍定义: 模块--用来从逻辑上组织python代码(变量,函数,类,逻辑:实现一个功能),本质就是.py结尾的python文件(文件名test.py,模块名test) 包—用来从逻辑上组织 ...
Python的平凡之路（3）
一.函数基本语法及特性面向对象:(华山派)—类 —class 面向过程:(少林派)—过程 —df 函数式编程:逍遥派 —函数— df 一般的,在一个变化过程中,如果有两个变量x和y,并且对于 ...
Python的平凡之路（20）
(提问复习为主) 一.Django请求的生命周期武彦涛: 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户二.路由 ...

随机推荐

PBOC金融IC卡，卡片与终端交互的13个步骤，简介-第二组(转)
四:脱机数据认证-可选终端进行脱机数据认证来,认证卡片.记住:对于某个事情,终端与卡片谁单独也说了不算,要二者都能干才能干. 终端依据卡片(AIP)和终端(终端性能)的支持情况,决定是否使用及使用哪种 ...
虚拟centos7 用ssh登录
在虚拟机(Vmware Workstation)下,安装了CentOS7,现在想通过SSH工具连接虚拟机中的CentOS7 1. 首先,要确保CentOS7安装了 openssh-server,在 ...
【c#】对象转json字符串/字符串转Json对象
using Newtonsoft.Json; 一.Hashtable => Json Hashtable hash = new Hashtable(); hash.Add("key1& ...
USR-BLE101配置
新买来的模块,默认为slave模式,波特率57600,8位数据位,无检验位,1位停止位. 发送+++a,进入命令模式. 1.设置模块名称 AT+NAME=BT_Shining 2.设置发射功率(最大功 ...
使用Kylin构建企业大数据分析平台的4种部署方式
本篇博客重点介绍如何使用Kylin来构建大数据分析平台.根据官网介绍,其实部署Kylin非常简单,称为非侵入式安装,也就是不需要去修改已有的 Hadoop大数据平台.你只需要根据的环境下载适合的Kyl ...
vertical-align
http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
关于Application.Lock和Lock(obj) 转 http://www.cnblogs.com/yeagen/archive/2012/03/01/2375610.html
关于Application.Lock和Lock(obj) Posted on 2012-03-01 15:28 billpeng 阅读(3498) 评论(3) 编辑收藏 1.Application. ...
使用cocos2d-x c++ Android静态库
在用cocos2d-x做Android开发时,每次clean后都会需要再次编译coco2d-x的库,十分耗时. 这里给出一个直接使用静态库而不用每次都编译源码的方法: 1\ 首先找到一个cocos2d ...
nginx、Apache、IIS服务器解决 413 Request Entity Too Large问题方法汇总
一.nginx服务器 nginx出现这个问题的原因是请求实体太长了.一般出现种情况是Post请求时Body内容Post的数据太大了,如上传大文件过大.POST数据比较多. 处理方法在nginx.co ...
【IE6双倍边距】-IE6双倍边距的bug
效果代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...

Python的平凡之路（16）

可能的值

Python的平凡之路（16）的更多相关文章

随机推荐

热门专题