python走起之第十五话
CSS Positioning(定位)
定位有时很棘手!
决定显示在前面的元素!
元素可以重叠!
Positioning(定位)
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法.
有四种不同的定位方法。
Static 定位
HTML元素的默认值,即没有定位,元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
实例
{
position:fixed;
top:30px;
right:5px;
}
Relative 定位
相对定位元素的定位是相对其正常位置。
实例
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:
实例
{
position:absolute;
left:100px;
top:150px;
}
重叠的元素
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序:
实例
{
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 = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
JavaScript 字符串
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
实例
var carname='Volvo XC60';
您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
实例
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
实例
var x2=34; // //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
实例
var z=123e-5; // 0.00123
JavaScript 布尔
布尔(逻辑)只能有两个值:true 或 false。
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" 元素:
实例
通过标签名查找 HTML 元素
本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
实例
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:
实例
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容:
今天的日期是: Thu Nov 17 2016 16:55:04 GMT+0800 (中国标准时间)
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
实例
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
本例改变了 <p>元素的内容:
实例
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:
本例改变了 <img> 元素的 src 属性:
实例
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
python走起之第十五话的更多相关文章
- python走起之第十四话
HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. 实例 <h1>这是一个标题</h1> <h2> ...
- Python之路【第十五篇】:Web框架
Python之路[第十五篇]:Web框架 Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...
- Android简易实战教程--第十五话《在外部存储中读写文件》
第七话里面介绍了在内部存储读写文件 点击打开链接. 这样有一个比较打的问题,假设系统内存不够用,杀本应用无法执行,或者本应用被用户卸载重新安装后.以前保存的用户名和密码都不会得到回显.所以,有必要注意 ...
- Python学习笔记【第十五篇】:Python网络编程三ftp案例练习--断点续传
开发一个支持多用户在线的FTP程序-------------------主要是学习思路 实现功能点 1:用户登陆验证(用户名.密码) 2:实现多用户登陆 3:实现简单的cmd命令操作 4:文件的上传( ...
- python走起之第十二话
1. ORM介绍 orm英文全称object relational mapping,就是对象映射关系程序,简单来说我们类似python这种面向对象的程序来说一切皆对象,但是我们使用的数据库却都是关系型 ...
- python走起之第十一话
Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...
- Python之路【第十五篇】WEB框架
WEB框架本质 Python的WEB框架分为两类: 1.自己写socket,自己处理请求 2.基于wsgi(Web Server Gateway Interface WEB服务网关接口),自己处理请求 ...
- 流畅python学习笔记:第十五章:上下文管理器
在开始本章之前,我们首先来谈谈try-excep..final模块.在Python中,进行异常保护的最多就是用try..except..final.首先来看下下面的代码.进行一个简单的除法运算.为了防 ...
- Python之路(第三十五篇) 并发编程:操作系统的发展史、操作系统的作用
一.操作系统发展史 第一阶段:手工操作 —— 真空管和穿孔卡片 第一代之前人类是想用机械取代人力,第一代计算机的产生是计算机由机械时代进入电子时代的标志,从Babbage失败之后一直到第二次世界大 ...
随机推荐
- MWeb 1.7.1 版发布!支持导出为 RTF 和 Docx、发布到 Evernote 带样式、文档库备份和新网站主题等大量改进!
编辑器及发布服务改进 增加设置图片宽度和居左.居右.居中的语法. 如:![图片说明-w450](pic.jpg) 这样表示设置图片宽度为 450.其中 -w450 为设置语法,生成 HTML 时会自动 ...
- 基于Spring4+SpringMVC4+Mybatis3+Hibernate4+Junit4框架构建高性能企业级的部标GPS监控平台
开发企业级的部标GPS监控平台,投入的开发力量很大,开发周期也很长,选择主流的开发语言以及成熟的开源技术框架来构建基础平台,是最恰当不过的事情,在设计之初就避免掉了技术选型的风险,避免以后在开发过程中 ...
- 基本C语言滤波算法
11种软件滤波方法的示例程序 假定从8位AD中读取数据(如果是更高位的AD可定义数据类型为int),子程序为get_ad(); 1.限副滤波 /* A值可根据实际情况调整 value为有效值,new ...
- 【皇甫】☀IOC和AOP的拓展实例
<!--构造器注入 --> <bean id="user1" class="cn.happy.entity.User"> <con ...
- objective-c第七章课后练习3
题:Fraction类对负分数适用吗?例如:1/4-1/2 能否显示成-1/4? //--------类定义实现参考上篇随笔,此处需更改print方法和main主方法部分---------- - (v ...
- hadoop 多表join:Map side join及Reduce side join范例
最近在准备抽取数据的工作.有一个id集合200多M,要从另一个500GB的数据集合中抽取出所有id集合中包含的数据集.id数据集合中每一个行就是一个id的字符串(Reduce side join要在每 ...
- python学习笔记系列----(七)类
7.1 python类和相关术语的简介 Python 通过最小的新语法和语义在语言中实现了类. 它是 C++ 或者 Modula-3 语言中类机制的混合.类的大多数重要特性都被完整的保留下来:类继承机 ...
- 微信 回调模式 echostr校验失败,请您检查是否正确解密并输出明文echostr
- Nop源码分析二
上文我们已经通过该行代码:var typeFinder = containerManager.Resolve<ITypeFinder>(); 从注入容器中获取到了typeFinder实例. ...
- FilterControl 显示时间并精确到时分秒的方法