锚点,iframe,溢出

原创 2018年04月14日 23:54:30

1.锚点

a标签除了用做页面跳转外还可以做锚点
  • 本页面的锚点是通过改变滚动条的位置实现
  • 页面跳转后的锚点会通过先跳转页面再改变滚动条的位置来实现
  • 可以将a的href属性链接到另一个a的name属性或者任何元素的id属性在做锚点
下面是四个不同颜色的盒子通过锚点跳转到各自的位置
<ul>
    <li><a href="#li1">1</a></li>
    <li><a href="#li2">2</a></li>
    <li><a href="#li3">3</a></li>
    <li><a href="#li4">4</a></li>
</ul>
<div id="div1"><a name="li1"></a></div>
<div id="div2"><a name="li2"></a></div>
<div id="div3"><a name="li3"></a></div>
<div id="div4"><a name="li4"></a></div>
div{height:150px; margin:25px 0;}
#div1{background-color:#999;}
#div2{background-color:#3F9;}
#div3{background-color:#C39;}
#div4{background-color:#F90;}
ul{position:fixed; top:20px; right:20px;}
li{width:25px; height:25px; margin-bottom:5px; border:1px #000 solid;text-align:center; line-height:25px;}
当通过锚点跳转到第3个div时:

2.iframe框架标签

iframe的属性

  1. scrolling:框架是否滚动,值为yes(有),no(无),默认为auto(需要的时候出现)
  2. frameBorder:是否显示边框,值为正整数,默认为1(有边框),值为0(无边框)
  3. align:对齐方式
  4. src:内框架的地址,可以是页面地址,也可以是图片的地址
  5. width/height:嵌套页面区域的宽高
  6. name:配合a的target属性值等于iframe的name,可以让a在超链接的跳转打开页面时在iframe区域打开
  7. srcdoc:用来代替原来HTML body里面的内容。但是IE不支持。

3.溢出

overflow:溢出如何显示
overflow-x:hidden (水平方向裁切)
overflow-y:hidden (垂直方向裁切)
overflow:hidden (两个方向裁切)
注意:如果overflow-x和overflow-y值相同则等同于overflow。如果overflow-x和overflow-y值不同,且其中一个值显式设置为visible或未设置默认为visible,而另外一个值是非visible的值。则visible值会被重置为auto
  • visible:默认值。溢出的内容不会被修剪,元素的内容在元素框外也可以见到
  • hidden:溢出的内容会被修剪,并且其余内容是不可见的
  • scroll:元素的内容会在元素框的边界处剪裁,浏览器会显示滚动条以便查看其余的内容
  • auto:如果溢出的内容被修剪,则浏览器会显示滚动条以便查看其余的内容
  • inherit:规定应该从父元素继承 overflow 属性的值
  • no-display:当内容溢出容器时不显示元素,类似于元素添加了display:none属性一样
1.关于文字溢出时显示省略号,但其内容可以通过title呈现出来
<p title="溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出">溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示</p>
p{width:400px; border:2px #F90 solid; white-space:nowrap; overflow:hidden;text-overflow:ellipsis;}
当鼠标移入文字上则文本的全部内容将全部显示出来。

2.用overflow属性实现不显示滚动条还可以通过滚动鼠标滚轮展示所有的文本效果。

<div class="div1"><div class="div2">溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示溢出如何显示何显示</div></div>
.div1{width:300px;height:300px; overflow:hidden;border:1px #f00 solid;}
.div2{width:320px; height:300px;  overflow:auto; margin:0;}








两个iframe之间实现锚点功能

1、当一个页面之间实现锚点功能时候可以通过如下方式实现:  1、《热爱生命》1、《热爱生命》 2、两个页面之间实现锚点功能,可以通过如下方式实现   1、《热爱生命》 1、《热爱生命》 3...
  • stormkai
  • stormkai
  • 2015-01-21 22:34:13
  • 1578

解决 iframe 中的锚点在火狐中无效的问题

最近在一个项目中用到 iframe,其中有些页面带有“锚点(anchor)”,在 IE 下 iframe 里的锚点工作正常,但是在火狐及 Google Chrome 浏览器中却无效··· 于是打开 ...
  • zlxzlxzlxzlxzlx
  • zlxzlxzlxzlxzlx
  • 2013-01-15 11:01:01
  • 2704

父页面操作iframe中子页面的锚点

父页面: a.html a b 子页面:xibei.html AAAAAAAAAAAAAAAAAAAAAAAAAAA a a a a a a ...
  • Mchange
  • Mchange
  • 2012-09-04 14:54:27
  • 1044

利用锚点 解决 IFrame 跨域 Javascript 调用

现在有2个页面分别位于不同的域下: 父页面的地址:http://local.example.org/iframe.html  子页面的地址: http://local.test.org/include...
  • maoxiang
  • maoxiang
  • 2011-05-30 22:39:00
  • 3712

iframe 父页面a标签链接跳转子页面锚点方法

方法写在子页面上: ParentBody.find("a").each(function () { var link = $(this); //获取当前元素的href属性值 ...
  • NotBad_
  • NotBad_
  • 2016-11-22 16:20:53
  • 1353

js 锚点控制,跳转 和iframe 嵌入页面 兼容

if(id=='dwtzxx'){ document.getElementById("sid").scrollIntoView(true); }else{//ifream 子页面 do...
  • q542928492
  • q542928492
  • 2017-05-12 16:02:21
  • 132

Html利用锚点标记代替iframe实现页面无刷新加载

在Html中,有时为了实现页面的无刷新加载,相信有不少人会用到iframe标签。尤其是在做后台管理系统的时候,经常会在左边放置一个导航菜单,然后将正文显示在iframe中,类似如下写法: xxx...
  • baiyanglu
  • baiyanglu
  • 2013-04-08 15:44:31
  • 3378

iframe导致浏览器内存溢出的解决方法

最近项目中碰到一个比较严重的问题,系统老是导致浏览器莫名其妙的重启,后来发现是框架中的iframe标签造成的,当切换iframe中的页面时,前一个页面中的无法被完全释放,导致浏览器所占的内存不停的飙升...
  • tianma630
  • tianma630
  • 2013-01-14 21:00:14
  • 8500

ExtJs非Iframe框架加载页面实现 解决自适应高度

在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域。而tab页面大多采用的嵌入一个iframe来显示内容。但是采用iframe方式有一个很大的弊端就是每次在加载一个新...
  • yuhua3272004
  • yuhua3272004
  • 2009-02-20 09:22:00
  • 6097

在IFrame中实现文本的自动换行

环境:chrome 43.0.2357.132 style="word-wrap:break-word"> 清朝前期,我国的疆域西跨,北接西伯利亚,东临太平洋,南包成为亚洲最大的国家。 ...
  • dragoo1
  • dragoo1
  • 2015-08-05 15:07:22
  • 2019
收藏助手
不良信息举报
您举报文章:锚点,iframe,溢出
举报原因:
原因补充:

(最多只允许输入30个字)