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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。