python走起之第十五话

CSS Positioning(定位)


定位有时很棘手!

决定显示在前面的元素!

元素可以重叠!


Positioning(定位)

CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定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 树

DOM HTML tree

通过可编程的对象模型,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>

 

posted @ 2016-11-17 16:55  J.M.Guo  阅读(102)  评论(0编辑  收藏  举报