当父页面和子页面都属于同一个域下,那么它们之间的js方法是可以相互调用的。在调用方法前指定function所属对象即可,父页面获取iframe所属对象方法为:iframe的name.window.方法名(),iframe页面获取父页面所属对象方法为:parent.方法名()。
但是这里有一个非常重要的限制,由于浏览器基于安全考虑,是不允许js在不同域名间进行通信,所以父子页面必须属于同一个域,即使是相同主域下的不同二级域也是不行的。
对于父子页面完全属于两个不同的域名,那么它们之间永远无法直接进行通信;如果父子页面是属于同一个主域下的不同二级域,则可以使用强制设置document.domain的方式来达到让其互相通信。document.domain默认值是window.location.host,可以js中设置为window.location.host的上一级域,但是不能为根域,例如:可以在页面设置document.domain为duankou.com,但是不能设置为other.duankou.com或com。
document.domain在一定程度上解决了不同二级域名页面的跨域问题。需要注意的是,如果父页面包含多个iframe且设置了document.domain,那么要与其进行通信的iframe也必须设置document.domain。
另外在chrome 18中,父子页面属于相同域名,当设置document.domain后,它们之间变的无法通信了,其他浏览器正常。
父页面(parent.html):
"http://www.w3.org/1999/xhtml"> "button"value="callchild"οnclick="callChild()"/>
子页面(iframe页面,child.html):
"http://www.w3.org/1999/xhtml"> "button"value="callparent"οnclick="callParent()"/>
0034 使用table表格标签进行网页排版
上节课,使用table做出了一个最基本的表格,学会了设置表格的属性,调整宽度和边框。
这节课,来学习如何更多table的用法,以及使用table来对页面进行版面布局的方法。
上节课的课后练习
1.表格当中增加4行内容:Windows 20年,Linux 10年,Oracle 10年,MySQL 12年。
修改html文件,复制粘贴4行,然后修改里面的文字内容:
刷新页面:
2.表格增加一列,放在第一列,列里面的内容分别是:1-6行:编程语言,7-8行:操作系统,9-10行:数据库。
修改html代码,在table里面的每一个后面增加内容:
编程语言
,7-10行修改文字内容,如下图:
刷新页面看看:
纵向合并td
通过新增td可以在表格中增加列。这里感觉有点不好的地方,就是1-6行都是编程语言,有点重复,是否可以合并为一个格子呢?
可以使用rowspan属性来将td进行纵向合并。
修改html代码如下,在需要向下合并的td里面设置属性rowspan=行数:
刷新页面:
可以看到,rowspan可以告诉td向下合并几行,同时注意下面的几行都不要再写这一列被合并掉的td了,否则会多出来td的。
大家可以尝试,不删除某一行的
编程语言
语句看看是什么样的效果。
td中的文字内容居中
表格的td中的文字内容默认是靠左对齐的,如果要让表格中的第一列文字希望水平居中显示,可以使用CSS属性text-align: center;来实现,修改css里面的样式td1和td2:
刷新页面看看:
很多标签元素都可以使用属性text-align来实现文字水平居中显示。
可以使用text-align: left; 来让文字靠左对齐;还可以使用text-align: right; 来让文字靠右对齐。
横向合并td
既然可以纵向合并td,那么肯定也可以进行横向合并td,就是将同一行的2列的td合并为一个td。
可以使用td属性colspan=列数来实现横向合并td。
在html代码的table里面最后一行下面新增一行内容:其它,J2ME游戏开发若干年。
将第2列和第3列合并为一个td。
修改html文件:
刷新页面:
可以看到,2列的td被合并在一起了。
改成2行2列表格来对页面排版
使用div标签元素来对页面进行排版,有一个不足之处,那就是div结束的地方会自动进行换行。
如果要将两个div并排显示在同一个水平线上就有些不太方便。
可以通过修改div为相对父元素定位改变为浮动绝对位置定位的方式来实现,但是这种方式同样也存在一些局限性,它需要对div的层次关系非常清楚,并且不方便根据不同浏览器的宽度进行相对的设置。
通过用table表格标签来进行布局,在td当中嵌套div的方法,是一个有效的完成页面布局排版的方式。
例如,来将上面个人简介网页当中的“工作经历”和“工作经验(部分)”这2大块设置为同一行的并排两大块。
首先,在“工作经验”这个div之前插入表格的5行代码:
然后,将“工作经历”的标题部分代码剪切粘贴到第1个td当中;
将“工作经验(部分)”的标题部分代码剪切粘贴到第2个td当中;
将“工作经历”的详细内容部分代码剪切粘贴到第3个td当中;
将“工作经验(部分)”的详细内容部分代码剪切粘贴到第4个td当中;
html修改后代码如下:
然后修改css文件,增加td3和td4的属性设置,设置宽度各为50%,内边距为0px。
css修改后代码如下:
刷新页面:
发现几个问题:
第1个是div的边框是跟随着div的内容的,内容多,边框上下高度就大,内容少,则边框上下高度就小,这样看起来就是不对齐的。
由于div里面的内容是变化的,不固定的,因此不能采用div的边框,而要改成td的边框来设置,因为td的边框总是对齐的。
第2个是td当中的div内容是默认垂直居中的,要修改为靠上对齐;
第3个是由于前面定义了针对table标签元素的通用属性,有右边框和下边框,因此这里也用到了table标签,所以这个table也被设置了右边框和下边框,要把这里的table边框属性去掉。
下面先来解决div边框变为td边框的问题:
首先,修改css文件,复制一个moresmallcontent样式,然后样式名字变为moresmallcontent2,把里面的border设置为0px;
然后,修改td3的边框,增加一个border属性和之前div的边框属性值一样,然后增加一个特殊的border-right属性,颜色值不一样;
然后,修改td4的边框,增加一个border属性和之前div的边框属性值一样,然后增加一个特殊的border-left属性,为0px;
css修改后代码如下:
html将原来的moresmallcontent样式名字修改为moresmallcontent2。
html修改后代码如下:
刷新页面:
设置元素内的内容垂直方向对齐
上面的效果图可以看到右侧的内容比较少,由于td针对元素内部的内容,默认是垂直居中显示的,这里修改为垂直靠上比较好看。
修改css文件,在td3和td4里面增加一行vertical-align:top;
修改后的css代码如下:
刷新页面:
可以看到右侧的内容也是靠上对齐了,这样如果继续往下面增加更多内容的话,就不会影响到页面的排版了。
还可以使用属性值middle和bottom来设置垂直居中和垂直靠下的对齐方式。
针对某个特定元素的id设置样式
前面定义了针对table标签元素的通用属性,有右边框和下边框,因此这里也用到了table标签,所以这个table也被设置了右边框和下边框,要把这里的table边框属性去掉。
前面讲过可以通过class="8e50-c1e0-1196-5822 样式名"的方式给某个特定元素设置指定的样式,其实还有另外一种方式可以针对某个特定元素设置样式。
每个标签元素可以设置一个属性id="页面中唯一id值",来给每一个标签元素赋予一个独一无二的名字,这就是id属性的功能。
给元素设置好id属性之后,就可以在css文件中通过设置样式 #id 的方式来给这个特定的元素设置样式值。
修改html文件来给刚才的table增加一个id。
html修改后的代码如下:
修改css文件来给这个id赋予样式值。
css修改后的代码如下:
刷新页面:
可以看到,表格的右边框和下边框不见了,并且通过增加border-collapse:collapse;来让td之间的边框合并为一个单一的边框,让当中的竖线开起来比较舒服。
标签元素嵌套继承关系和顺序关系
总结一下,标签元素之间比较重要的嵌套的层次关系。
A标签元素被包含在B标签元素当中。那么B就是A的父元素,A就是B的子元素。父子关系一定不能搞错。
因为元素嵌套关系中,父元素的属性会影响到子元素,除非子元素自定重新定义。
这个知识点,前面有讲过,这里这是再次提醒。
另外,CSS样式里面还有一个顺序关系要注意。
就是针对同一个标签元素的同样的样式定义,以最后一个样式的值为准。
例如前面的样式:
border: solid 1px #303030;
border-right: solid 1px #b2b2b2;
这2行,是针对td的边框进行设置。
先设置4个边框的样式都是 solid 1px #303030;样式值,这里面就包含了border-right,然后再下面一行再设置border-right,样式值就以后面一个值为准,前面的设置的值就被替换掉了。
课后练习
1.去网上搜索2个自己喜欢的图片,1个图片用来作为整个网页的背景,另一个图片可以进行重叠组成网页的背景。
2.给技术经验的表格增加一个表头,标题分别是:技术类别,技术点,经验年数。文字加粗显示。
往期教程
因为教程是系列教程,前后关联性非常强,请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。