python走起之第十五话

时间 2019-11-16

标签 python 走起第十五栏目 Python 繁體版

原文原文链接

CSS Positioning(定位)

定位有时很棘手！html

决定显示在前面的元素！

元素能够重叠！

Positioning(定位)

CSS定位属性容许你为一个元素定位。它也能够将一个元素放在另外一个元素后面，并指定一个元素的内容太大时，应该发生什么。web

元素可使用的顶部，底部，左侧和右侧属性定位。然而，这些属性没法工做，除非是先设定position属性。他们也有不一样的工做方式，这取决于定位方法.编程

有四种不一样的定位方法。数组

Static 定位

HTML元素的默认值，即没有定位，元素出如今正常的流中。浏览器

静态定位的元素不会受到top, bottom, left, right影响。服务器

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。编程语言

即便窗口是滚动的它也不会移动：函数

实例

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative 定位

相对定位元素的定位是相对其正常位置。学习

实例

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，若是元素没有已定位的父元素，那么它的位置相对于<html>:测试

实例

h2
{
position:absolute;
left:100px;
top:150px;
}

重叠的元素

元素的定位与文档流无关，因此它们能够覆盖页面上的其它元素

z-index属性指定了一个元素的堆叠顺序（哪一个元素应该放在前面，或后面）

一个元素能够有正数或负数的堆叠顺序：

实例

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可普遍用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由全部的现代浏览器执行。

JavaScript 很容易学习。

JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用做不一样的类型：

实例

var x;               // x 为 undefined
var x = 5;           // 如今 x 为数字
var x = "John";      // 如今 x 为字符串

JavaScript 字符串

字符串是存储字符（好比 "Bill Gates"）的变量。

字符串能够是引号中的任意文本。您可使用单引号或双引号：

实例

var carname="Volvo XC60";
var carname='Volvo XC60';

您能够在字符串中使用引号，只要不匹配包围字符串的引号便可：

实例

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 数字

JavaScript 只有一种数字类型。数字能够带小数点，也能够不带：

实例

var x1=34.00; //使用小数点来写
var x2=34; // //不使用小数点来写

极大或极小的数字能够经过科学（指数）计数法来书写：

实例

var y=123e5; // 12300000
var z=123e-5; // 0.00123

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

布尔经常使用在条件测试中。您将在本教程稍后的章节中学到更多关于条件测试的知识。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会建立页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树

经过可编程的对象模型，JavaScript 得到了足够的能力来建立动态的 HTML。

JavaScript 可以改变页面中的全部 HTML 元素
JavaScript 可以改变页面中的全部 HTML 属性
JavaScript 可以改变页面中的全部 CSS 样式
JavaScript 可以对页面中的全部事件作出反应

查找 HTML 元素

一般，经过 JavaScript，您须要操做 HTML 元素。

为了作到这件事情，您必须首先找到该元素。有三种方法来作这件事：

经过 id 找到 HTML 元素
经过标签名找到 HTML 元素
经过类名找到 HTML 元素

经过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是经过使用元素的 id。

本例查找 id="intro" 元素：

实例

var x=document.getElementById("intro")

经过标签名查找 HTML 元素

本例查找 id="main" 的元素，而后查找 id="main" 元素中的全部 <p> 元素：

实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

经过类名找到 HTML 元素

本例经过 getElementsByClassName 函数来查找 class="intro" 的元素：

实例

var x=document.getElementsByClassName("intro");

改变 HTML 输出流

JavaScript 可以建立动态的 HTML 内容：

今天的日期是： Thu Nov 17 2016 16:55:04 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById( id).innerHTML= 新的 HTML

本例改变了 <p>元素的内容：

实例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById( id). attribute=新属性值

本例改变了 <img> 元素的 src 属性：

实例

<!DOCTYPE html> <html> <body> <img id="image" src="smiley.gif"> <script> document.getElementById("image").src="landscape.jpg"; </script> </body> </html>