Python的平凡之路（16）

首页 > 代码库 > Python的平凡之路（16）

2024-08-22 22:19:39 221人阅读

一、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="http://www.mamicode.com/#">
                <img src="http://www.mamicode.com/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="http://www.mamicode.com/index.html">这个链接改变颜色。</a></p>

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

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

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

<p><a class="ex5" href="http://www.mamicode.com/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.hrefhttp://www.mamicode.com/= ""  # 重定向，跳转
  location.reload()   # 页面刷新
  location.href = http://www.mamicode.com/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）

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Python的平凡之路（16）

Python的平凡之路（16）

可能的值

看完仍有疑问？有类似问题直接问程序猿