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 树

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

python走起之第十五话的更多相关文章

  1. python走起之第十四话

    HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. 实例 <h1>这是一个标题</h1> <h2> ...

  2. Python之路【第十五篇】：Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  3. Android简易实战教程--第十五话《在外部存储中读写文件》

    第七话里面介绍了在内部存储读写文件 点击打开链接. 这样有一个比较打的问题,假设系统内存不够用,杀本应用无法执行,或者本应用被用户卸载重新安装后.以前保存的用户名和密码都不会得到回显.所以,有必要注意 ...

  4. Python学习笔记【第十五篇】：Python网络编程三ftp案例练习--断点续传

    开发一个支持多用户在线的FTP程序-------------------主要是学习思路 实现功能点 1:用户登陆验证(用户名.密码) 2:实现多用户登陆 3:实现简单的cmd命令操作 4:文件的上传( ...

  5. python走起之第十二话

    1. ORM介绍 orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型 ...

  6. python走起之第十一话

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  7. Python之路【第十五篇】WEB框架

    WEB框架本质 Python的WEB框架分为两类: 1.自己写socket,自己处理请求 2.基于wsgi(Web Server Gateway Interface WEB服务网关接口),自己处理请求 ...

  8. 流畅python学习笔记：第十五章：上下文管理器

    在开始本章之前,我们首先来谈谈try-excep..final模块.在Python中,进行异常保护的最多就是用try..except..final.首先来看下下面的代码.进行一个简单的除法运算.为了防 ...

  9. Python之路(第三十五篇) 并发编程：操作系统的发展史、操作系统的作用

    一.操作系统发展史 第一阶段:手工操作 —— 真空管和穿孔卡片 ​ 第一代之前人类是想用机械取代人力,第一代计算机的产生是计算机由机械时代进入电子时代的标志,从Babbage失败之后一直到第二次世界大 ...

随机推荐

  1. Spark on Yarn:java.sql.SQLException: No suitable driver found for jdbc:microsoft:sqlserver://localhost\\db_instance_name:1433;databaseName=db_name

    本文只是针对当前特定环境下,出现的问题找不到sqljdbc驱动的案例.具体出现原因,可能是spark版本问题,也可能是集群配置问题. yarn-client方式下: 通过--jars参数指定驱动文件位 ...

  2. sdk、jdk、jre、jvm、jdt、cdt分别都是什么东西

    1.sdk是什么 sdk,全称是 software development kit 中文译为软件开发工具包.kit 在英文中有工具箱,设备包,成套工具的意思. 从名字就可以看出sdk作为一个工具箱,其 ...

  3. Magento-找出没有图片的产品

    最近维护网站,发现网站的产品很多都没有图片显示,看了一下是因为没有在后台勾选图片,就是 image small_image  thumbnail 这三项,就算有图片如果没有勾选的话也不会显示出来,产品 ...

  4. python中的argparse模块学习

    该模块是python用于解析命令行和参数的标准模块 好文推荐:http://blog.ixxoo.me/argparse.html,不仅域名个性,文章翻译的也很好.推荐

  5. C#中Timer使用及解决重入问题

    C#中Timer使用及解决重入问题 ★介绍 首先简单介绍一下timer,这里所说的timer是指的System.Timers.timer,顾名思义,就是可以在指定的间隔是引发事件.官方介绍在这里,摘抄 ...

  6. Silverlight动态生成控件实例

    刚学习Silverlight,做了一个动态创建控件的实例 实现结果:根据已有的控件类名称,得到控件的实例化对象 实现思路1:就是定义一个模板文件,将类名做为参数,在silverlight中使用Srea ...

  7. 霍尼韦尔FC400A与FC400B的区别

    给霍尼韦尔官方打电话咨询了下,发现两者区别不大,唯一的区别是400B可以和主机联动,也就是主机关的时候,400B也可以自动关闭,不需要手动去关闭电源,这样非常方便. 本来官方是只有400A的时候,但是 ...

  8. linux 中压缩记得压缩用c,解压用x

    tar -c: 建立压缩档案-x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个.下面的 ...

  9. spring " expected single matching bean but found 2" 问题一例。

    初入java,使用spring时遇到一个问题,左边是一个接口和实现.右边是service和实现. @Service@Transactional(rollbackFor = Exception.clas ...

  10. linux6.*无法正常启动has进程解决方案

    1. 数据库安装成功之后:发现ohasd进程存在异常:[root@oracle234 ~]# su - grid[grid@oracle234 ~]$ ps -ef| grep ohasdgrid   ...