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请求的生命周期武彦涛: 路由系统 -> 视图函数(获取模板+数据=>渲染) -> 字符串返回给用户二.路由 ...

随机推荐

js控制 input框中输入数字时，累计求和
$('.cc input').bind('input propertychange', function(){ var total = 0; $("input").each(fun ...
项目公共js(vue.js)
var urlHead = "http://hm.runorout.com/";// var urlHead = "/";/*加入跑班相关*/var urlGe ...
JAVA 线程中的异常捕获
在java多线程程序中,所有线程都不允许抛出未捕获的checked exception(比如sleep时的InterruptedException),也就是说各个线程需要自己把自己的checked e ...
WebStorm和sublime上使用git连接github（转）
WebStorm使用git连接github的方法: 用webstorm上传代码时,首先要先下载git,网址一搜就可以搜到,安装git,并且把ssh配置到github上.然后开始配置webstorm,打 ...
XUtils3 的环境搭建
XUtils3 的环境搭建环境搭建三部曲 ----------------------- 说明 : author 修雨轩陈使用andorid Studio 已经创建了一个项目并且自己需要使用 ...
Tomcat（免安装版）的安装与配置
一.下载Tomcat Tomcat可以从http://tomcat.apache.org/网站下载,选择任意版本,在 Binary Distributions 下的zip包既是. 二.配置Tomcat ...
Java IO教程
1 Java IO 教程 2 Java IO 概述 3 Java IO: 文件 4 Java IO: 管道 5 Java IO: 网络 6 Java IO: 字节和字符数组 7 Java IO: S ...
WordPress网站搭建
. 1.进入 var/www/html中放入里的文件 2.. 安装http php php-sql [root@jw38 yum.repos.d]# systemctl restart httpd.s ...
【转】【翻译】对响应式SVG的再思考
来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...
MDI窗体容器、权限设置
一.MDI窗体容器: 1.功能: 它可以让其它窗体在它的内部打开,无法超出它的范围将某个窗体的属性:IsMdiContainer设置为true - 窗口样式 2.问题: (1)如何将其它窗体在它的内 ...

Python的平凡之路（16）

可能的值

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

随机推荐

热门专题